How to Get Height and Width of Widget on Flutter

In this example, we are going to show you the easiest way to get the height and width of the widget on build and when it gets resized. We have shown you two ways in this example. See the example below:

double screenheight = MediaQuery.of(context).size.height;
double screenwidth = MediaQuery.of(context).size.width;

You may get "No media Query Widget Found" Error, click here to solve this error. For Detail about Screen Height and Width read this: How to get Device Screen Height and Width in Flutter App

final mywidgetkey = GlobalKey();

Container(
   key:mywidgetkey,
)

RenderBox renderbox = mywidgetkey.currentContext!.findRenderObject() as RenderBox;
double width = renderbox.size.width;
double height = renderbox.size.height;

print(width); //352.72727272727275
print(height); //100.0

Here, set the key for the widget which height and width you want, then get the rendered height and width like this of any widget in your widget tree.

Add measured_size package on your project by adding the following lines on pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  measured_size: ^1.0.0

Import package in Script:

import 'package:measured_size/measured_size.dart';

To Get Screen Height and Width on the build, and listen resize:

Size wsize = Size.zero;

MeasuredSize( 
    onChange: (Size size){
        setState(() {
            wsize = size;
        });
    },
    child:Card(
        child:Container( 
            child: Text("Width and Height:" + wsize.width.toString() + "," + wsize.height.toString())
       )
    ),
)

MeasuredSize returns child widget size on resizing. It also works on the initial build.

LayoutBuilder(builder: (context, constraints) { 
    print("Height:" + constraints.maxHeight.toString());
    print("Width:" + constraints.maxWidth.toString());
    return Card(
        child:Container( 
          child: Text("Width and Height:" +constraints.maxWidth.toString() + "," + constraints.maxHeight.toString())
      )
    );
  }
)

Layoutbuilder returns constraints like max-height, max-width, and min-height, min-width of its parent widget.

import 'package:flutter/material.dart';
import 'package:measured_size/measured_size.dart';

void main() {
  runApp(
    MaterialApp( home: MyApp(),)
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

   Size wsize = Size.zero;

  @override
  Widget build(BuildContext context) {

    double screenheight = MediaQuery.of(context).size.height;
    double screenwidth = MediaQuery.of(context).size.width;

    return Scaffold(
          appBar: AppBar(
              title:Text("Get Height/Width of Widget"),
              backgroundColor: Colors.deepOrange,
          ),
          body: Container( 
              margin: EdgeInsets.only(top:30),
              alignment: Alignment.topCenter,
              child: Column(children: [
                   
                   Padding(
                     padding: EdgeInsets.all(15),
                     child: Text("Screen Height: $screenheight , Screen Width: $screenwidth", textAlign:TextAlign.center,),
                  ),

                   Padding(
                     padding: EdgeInsets.all(15),
                     child: MeasuredSize( 
                       onChange: (Size size){
                          setState(() {
                             wsize = size;
                          });
                       },
                       child:Card(
                            child:Container( 
                                child: Text("Width and Height:" + wsize.width.toString() + "," + wsize.height.toString())
                          )
                        ),
                      )
                   ),


                   Padding(
                     padding: EdgeInsets.all(15),
                     child: LayoutBuilder(builder: (context, constraints) { 
                         print("Height:" + constraints.maxHeight.toString());
                         print("Width:" + constraints.maxWidth.toString());
                         return Card(
                              child:Container( 
                                child: Text("Width and Height:" +constraints.maxWidth.toString() + "," + constraints.maxHeight.toString())
                            )
                         );
                       }
                     )
                   )


              ],),
          )
      );
  }
}