Tamaño de la pantalla de aleteo

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?

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;

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;

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;

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

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),);

¿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

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: ...
 )

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

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