How to Determine the Screen Height and Width in Flutter

Question

I ve created a new application on flutter  and I ve had problems with the screen sizes when switching between different devices  I created the application using the Pixel 2XL screen size  and because I ve had containers with a child of ListView it s asked me to include a height and width for the container  So when I switch the device to a new device the container is too long and throws an error  How can I go about making it so the application is optimized for all screens

User · Answer

Getting width is easy but height can be tricky  following are the ways to deal with height    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

User · Answer

How to access screen size or pixel density or aspect ratio in flutter   We can access screen size and other like pixel density  aspect ration etc  with helps of MediaQuery  syntex   MediaQuery of context  size height

User · Answer

MediaQuery of context  size width and MediaQuery of context  size height works great  but every time need to write expressions like width 20 to set specific height width      I ve created a new application on flutter  and I ve had problems with the screen sizes when switching between different devices    Yes  flutter screenutil plugin available for adapting screen and font size  Let your UI display a reasonable layout on different screen sizes   Usage   Add dependency   Please check the latest version before installation   dependencies    flutter      sdk  flutter     add flutter ScreenUtil   flutter screenutil   0 4 2   Add the following imports to your Dart code    import  package flutter screenutil flutter screenutil dart     Initialize and set the fit size and font size to scale according to the system s  font size  accessibility option    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     Use     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                    Please refer updated documentation for more details  Note  I tested and using this plugin  which really works great with all devices including iPad  Hope this will helps someone

User · Answer

Using the following method we can get the device s physical height  Ex  1080X1920 WidgetsBinding instance window physicalSize height WidgetsBinding instance window physicalSize width

User · Answer

Just declare a function Size screenSize     return MediaQuery of context  size     Use like below return Container        width  screenSize   width        height  screenSize   height        child

User · Answer

The below code doesn t return the correct screen size sometimes   MediaQuery of context  size   I tested on SAMSUNG SM-T580  which returns  width  685 7  height  1097 1  instead of the real resolution 1920x1080   Please use   import  dart ui    window physicalSize

User · Answer

We have noticed that using the MediaQuery class can be a bit cumbersome  and it   s also missing a couple of key pieces of information  Here We have a small Screen helper class  that we use across all our new projects  class Screen     static double get  ppi   gt   Platform isAndroid    Platform isIOS   150   96    static bool isLandscape BuildContext c    gt  MediaQuery of c  orientation    Orientation landscape      PIXELS   static Size size BuildContext c    gt  MediaQuery of c  size    static double width BuildContext c    gt  size c  width    static double height BuildContext c    gt  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    gt  inches c  width    static double heightInches BuildContext c    gt  inches c  height    static double diagonalInches BuildContext c    gt  diagonal c     ppi     To use bool isLandscape   Screen isLandscape context  bool isLargePhone   Screen diagonal context   gt  720  bool isTablet   Screen diagonalInches context   gt   7  bool isNarrow   Screen widthInches context   lt  3 5   To More  See  https   blog gskinner com archives 2020 03 flutter-simplify-platform-detection-responsive-sizing html

User · Answer

You can use   double width   MediaQuery of context  size width  double height   MediaQuery of context  size height   To get height just of SafeArea  for iOS 11 and above    var padding   MediaQuery of context  padding  double newheight   height - padding top - padding bottom

User · Answer

Hey you can use this class to get Screen Width and Height in percentage  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           and to Use like this  Container height  Responsive width 100  context   width  Responsive width 50  context

[flutter] How to Determine the Screen Height and Width in Flutter

Examples related to flutter

Examples related to dart

Examples related to height

Examples related to width

Examples related to screen-size