Open In App

Flutter – Determine the Height and Width of the Screen

Improve
Improve
Like Article
Like
Save
Share
Report

Recently we created a Flutter Application and it’s running well but when we installed the same application on another big-screen device it gives an error. When we switch the device to a new device the container is too long and throws an error. That means the application must be responsive to any screen. Flutter gives us to make a responsive screen by calculating screen size. We can calculate the screen height and width using MediaQuery.

double width = MediaQuery.of(context).size.width;    // Gives the width
double height = MediaQuery.of(context).size.height;  // Gives the height

A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

Adding material package that gives us the essential functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
   runApp(RunMyApp());
}

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the materialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
   const RunMyApp({super.key});
   
   @override
   Widget build(BuildContext context) {
       return MaterialApp();
   }
}

Step 4: Creating Scaffold Widget

Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. The body has the Center widget that has Column as a child, Again Column can have multiple children. Here we have sizedbox, Text widget.

home: Scaffold(
   appBar: AppBar(
       title: Text('Getting height and width of the screen'),
   ),
   body:  Center(
            child: Column(
          children: [
            SizedBox(
              height: 150,
            ),
            Text('Width : ' + MediaQuery.of(context).size.width.toString()),
            Text('Height : ' + MediaQuery.of(context).size.height.toString())
          ],
        )),
),
  • MediaQuery.of(context).size.width gives the width of the screen and displays using the text widget.
  • MediaQuery.of(context).size.height gives the height of the screen and displays using the text widget.

Final Code:

Dart




import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(home: RunMyApp()));
}
  
class RunMyApp extends StatelessWidget {
  RunMyApp({super.key});
  //double width = MediaQuery.of(context).size.width;
  //double height = MediaQuery.of(context).size.height;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Getting Height and Width of the Green'),
        ),
        body: Center(
            child: Column(
          children: [
            SizedBox(
              height: 150,
            ),
            Text('Width : ' + MediaQuery.of(context).size.width.toString()),
            Text('Height : ' + MediaQuery.of(context).size.height.toString())
          ],
        )),
      ),
    );
  }
}


Output:



Last Updated : 15 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads