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, 2023 in Flutter by Ashwini
• 5,430 points

edited Mar 21, 2023 by Tanishqa 2,736 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, 2023 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, 2023 in Flutter by anonymous
7,160 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, 2023 in Flutter by pooja
1,207 views
0 votes
1 answer

How to scan for bluetooth printers and print pdf or image via bluetooth in flutter?

The user wants to scan for Bluetooth ...READ MORE

answered Apr 4, 2023 in Flutter by seena
2,041 views
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,460 points
3,465 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,460 points
1,021 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,460 points
4,062 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,460 points
706 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, 2023 in Flutter by vishalini
2,483 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, 2023 in Flutter by pooja
4,538 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