How to Determine Screen Height and Width

0 votes
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?
Mar 21 in Flutter by Ashwini
• 5,380 points

edited Mar 21 by Tanishqa 68 views

1 answer to this question.

0 votes

To optimize your Flutter application for different screen sizes, you can determine the height and width of the device's screen dynamically using the MediaQuery class.

Here's an example of how you can determine the screen size in your Flutter code:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;

    return Container(
      width: screenWidth,
      height: screenHeight,
      // your child widgets here
    );
  }
}

By using MediaQuery.of(context).size.width and MediaQuery.of(context).size.height, you can get the screen width and height of the device your app is running on. You can then use these values to set the dimensions of your container dynamically.

Additionally, you can use the MediaQueryData class to get other device information, such as the device pixel ratio and orientation. This can be useful for making your app responsive to different devices.

Overall, using MediaQuery and MediaQueryData can help you create a responsive Flutter app that looks great on all devices.

answered Mar 21 by tan

Related Questions In Flutter

0 votes
1 answer

How to make flutter app responsive according to different screen size?

To make your Flutter app responsive according ...READ MORE

answered Mar 27 in Flutter by anonymous
679 views
0 votes
1 answer

How to get build and version number of Flutter app?

You can get the build and version ...READ MORE

answered Mar 29 in Flutter by pooja
154 views
0 votes
1 answer
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
2,769 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
576 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,446 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,440 points
343 views
0 votes
1 answer

Sizing elements to percentage of screen width/height

Yes, you can size an element relative ...READ MORE

answered Mar 24 in Flutter by vishalini
93 views
0 votes
1 answer

How to change flutter project name and id?

Yes, it is possible to change the ...READ MORE

answered Mar 20 in Flutter by pooja
231 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP