Tamaño de la pantalla de aleteo


89

Creé una nueva aplicación en Flutter y tuve problemas con el tamaño de la pantalla al cambiar entre diferentes dispositivos.

Creé la aplicación usando el tamaño de pantalla de Pixel 2XL y, como he tenido contenedores con elementos secundarios de ListView, se me pidió que incluyera una altura y un ancho para el contenedor.

Entonces, cuando cambio el dispositivo a un dispositivo nuevo, el contenedor es demasiado largo y arroja un error.

¿Cómo puedo lograr que la aplicación esté optimizada para todas las pantallas?



1
> He tenido contenedores con elementos secundarios de ListView, se me pidió que incluyera una altura y un ancho para el contenedor. puedes aclarar Puede crear una vista de lista que simplemente ocupa todo el espacio. ¿Puedes compartir tu diseño?
wasyl

Respuestas:


238

Puedes usar:

  • double width = MediaQuery.of(context).size.width;
  • double height = MediaQuery.of(context).size.height;

Para obtener la altura solo de SafeArea (para iOS 11 y superior):

  • var padding = MediaQuery.of(context).padding;
  • double newheight = height - padding.top - padding.bottom;

3
Cómo obtener el tamaño de la aplicación sin área segura
user7856586

43

Conseguir widthes fácil pero heightpuede ser complicado , las siguientes son las formas de lidiar conheight

// Full screen width and height
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

// Height (without SafeArea)
var padding = MediaQuery.of(context).padding;
double height1 = height - padding.top - padding.bottom;

// Height (without status bar)
double height2 = height - padding.top;

// Height (without status and toolbar)
double height3 = height - padding.top - kToolbarHeight;

1
¡Excelente! Justo lo que quería. Es una locura que me haya quedado fuera para calcular la altura del área segura para dibujar mis vistas. ¡Me preguntaba qué estaba pasando todo este tiempo! : D ¡Salud!
Rohit TP

17

El siguiente código no devuelve el tamaño de pantalla correcto a veces:

MediaQuery.of(context).size

Probé en SAMSUNG SM-T580, que devuelve en {width: 685.7, height: 1097.1}lugar de la resolución real 1920x1080.

Por favor use:

import 'dart:ui';

window.physicalSize;

13
Parece que MediaQuery.of(context).sizedevuelve píxeles lógicos. Pero lo mismo será utilizado por los otros widgets de Flutter. Entonces, en general, obtendrá un tamaño proporcional si eso es lo que necesita. Si necesita el valor de píxel exacto del dispositivo que puede hacer algo como esto, por ejemplo para la anchura: MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio. Acabo de escribir un artículo sobre esto en caso de que más personas busquen lo mismo: medium.com/tagmalogic/…
Miha

5

MediaQuery.of(context).size.widthy MediaQuery.of(context).size.heightfunciona muy bien, pero cada vez es necesario escribir expresiones como width / 20 para establecer un ancho de altura específico.

Creé una nueva aplicación en Flutter y tuve problemas con el tamaño de la pantalla al cambiar entre diferentes dispositivos.

Sí, flutter_screenutil plugin disponible para adaptar la pantalla y el tamaño de fuente. ¡Deje que su interfaz de usuario muestre un diseño razonable en diferentes tamaños de pantalla!

Uso:

Agregar dependencia:

Compruebe la última versión antes de la instalación.

dependencies:
  flutter:
    sdk: flutter
  # add flutter_ScreenUtil
  flutter_screenutil: ^0.4.2

Agregue las siguientes importaciones a su código de Dart:

import 'package:flutter_screenutil/flutter_screenutil.dart';

Inicialice y configure el tamaño de ajuste y el tamaño de fuente para escalar de acuerdo con la opción de accesibilidad "tamaño de fuente" del sistema

//fill in the screen size of the device in the design

//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil()..init(context);

//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//If you wang to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

Utilizar:

//for example:
//rectangle
Container(
           width: ScreenUtil().setWidth(375),
           height: ScreenUtil().setHeight(200),
           ...
            ),

////If you want to display a square:
Container(
           width: ScreenUtil().setWidth(300),
           height: ScreenUtil().setWidth(300),
            ),

Consulte la documentación actualizada para obtener más detalles.

Nota: probé y usé este complemento, que realmente funciona muy bien con todos los dispositivos, incluido el iPad

Espero que esto ayude a alguien


si usa este complemento, significa que solo puede definir 1 ancho y alto, por ejemplo, si usa el iPhone 6 (iPhone6 ​​750 * 1334), entonces debe usar estos valores, pero ¿cómo es eso para que responda en todos los diferentes iPhones? ????
GY22

solo establece su diseño base basado en un tamaño de pantalla. El complemento se adapta correctamente a diferentes tamaños de pantalla
Marc

1

Oye, puedes usar esta clase para obtener el ancho y la altura de la pantalla en porcentaje

import 'package:flutter/material.dart';
class Responsive{
  static width(double p,BuildContext context)
  {
    return MediaQuery.of(context).size.width*(p/100);
  }
  static height(double p,BuildContext context)
  {
    return MediaQuery.of(context).size.height*(p/100);
  }
}

y para usar así

Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);

0

¿Cómo acceder al tamaño de la pantalla, la densidad de píxeles o la relación de aspecto en flutter?

Podemos acceder al tamaño de la pantalla y otros como la densidad de píxeles, la relación de aspecto, etc. con la ayuda de MediaQuery.

sintexis: MediaQuery.of (contexto) .size.height


0

Solo declara una función

Size screenSize() {
return MediaQuery.of(context).size;
}

Usar como a continuación

return Container(
      width: screenSize().width,
      height: screenSize().height,
      child: ...
 )

0

Hemos notado que usar la MediaQueryclase puede ser un poco engorroso y también le faltan algunas piezas clave de información.

Aquí tenemos una pequeña clase de ayuda de pantalla, que usamos en todos nuestros nuevos proyectos:

class Screen {
  static double get _ppi => (Platform.isAndroid || Platform.isIOS)? 150 : 96;
  static bool isLandscape(BuildContext c) => MediaQuery.of(c).orientation == Orientation.landscape;
  //PIXELS
  static Size size(BuildContext c) => MediaQuery.of(c).size;
  static double width(BuildContext c) => size(c).width;
  static double height(BuildContext c) => size(c).height;
  static double diagonal(BuildContext c) {
    Size s = size(c);
    return sqrt((s.width * s.width) + (s.height * s.height));
  }
  //INCHES
  static Size inches(BuildContext c) {
    Size pxSize = size(c);
    return Size(pxSize.width / _ppi, pxSize.height/ _ppi);
  }
  static double widthInches(BuildContext c) => inches(c).width;
  static double heightInches(BuildContext c) => inches(c).height;
  static double diagonalInches(BuildContext c) => diagonal(c) / _ppi;
}

Usar

bool isLandscape = Screen.isLandscape(context)
bool isLargePhone = Screen.diagonal(context) > 720;
bool isTablet = Screen.diagonalInches(context) >= 7;
bool isNarrow = Screen.widthInches(context) < 3.5;

Para obtener más información, consulte: https://blog.gskinner.com/archives/2020/03/flutter-simplify-platform-detection-responsive-sizing.html


0

Usando el siguiente método podemos obtener la altura física del dispositivo. Ex. 1080X1920

WidgetsBinding.instance.window.physicalSize.height
WidgetsBinding.instance.window.physicalSize.width

5
Si bien este código puede resolver la pregunta, incluir una explicación de cómo y por qué esto resuelve el problema realmente ayudaría a mejorar la calidad de su publicación y probablemente resultaría en más votos a favor. Recuerde que está respondiendo la pregunta a los lectores en el futuro, no solo a la persona que pregunta ahora. Por favor, editar su respuesta para agregar explicaciones y dar una indicación de lo que se aplican limitaciones y supuestos. De la opinión
doble pitido
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.