How to get the screen size height and width in the flutter

Whenever any developer develops any software, his first concern is whether this software is dynamic. that the components and connectors of that software in any device must be created at run time and interconnected, and/or removed during system execution. and require the code to be in a running state.

Different programming languages have different logic for dynamic software, different method and process are followed but here we are not going to talk about all programming languages because I have given in the title How to get the screen size height and width in the flutter.

So now we talk about how to make an app dynamic in Flutter, there are two methods for this.

To overcome this problem of flutter in the world of internet, there are many plugins, to use which one has to just add the plugin to the pubspec.yaml file and use it to develop your app. But wait it has some flaws too each plugin adds a lot of files and other files to your app, which can slow down performance. And also there are many plugins whose code is very poor and has not been updated for a long time. they can make your app easier to hack. It can also crash your app. When you install too many plugins in your app, all the plugins may conflict with each other and cause your app to crash.

Ok now let’s see the second way, in this method we create a custom class and according to the requirement we can customize it which we cannot do in the above method and we will create this class because wherever in the project Also if you want to use size this class has to be called .In this article we will use the same method


In the Flutter project, a new file needs to be created inside the lib directory called size_config.dart. All the work related to screen size will be done in this file.

In this file material.dart has to be imported. material.dart is used for implementing the material design.

To use import this library on the top of size_config.dart :

import 'package:flutter/material.dart';

Next, make SizeConfig Class like:

import 'package:flutter/material.dart';

class SizeConfig{

//and here will be the code for screen size


In this class, I create some variables. such as width, height, default size, and orientation.

import 'package:flutter/material.dart';

class SizeConfig{

 static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double defaultSize;
  static Orientation orientation;


// Get the proportionate height as per screen size

double getProportionateScreenHeight(double inputHeight) {
  double screenHeight = SizeConfig.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;

// Get the proportionate height as per screen size

// Get the proportionate height as per screen size
double getProportionateScreenWidth(double inputWidth) {
  double screenWidth = SizeConfig.screenWidth;
  // 375 is the layout width that designer use
  return (inputWidth / 375.0) * screenWidth;

Then in your widgets dimension do this:

Widget build(BuildContext context) {
    return Container(
    height: SizeConfig.screenHeight* 10, //10 for example
    width: SizeConfig.screenWidth* 10, //10 for example


2 replies on “How to get the screen size height and width in the flutter”

  1. He Makes Money Online WITHOUT Traffic?

    Most people believe that you need traffic to profit online…
    And for the most part, they’re right!
    Fact is.. 99.99% of methods require you to have traffic.
    And that in itself is the problem..
    Because frankly, getting traffic is a pain in the rear!
    Don’t you agree?
    That’s why I was excited when a good friend told me that he was profiting, but with ZERO traffic.
    I didn’t believe him at first…
    But after he showed me the proof, it’s certainly the real deal!
    I’m curious what your thoughts are.
    Click here to take a look >>
    Please view it before it’s taken down.

Leave a Reply

Your email address will not be published. Required fields are marked *