Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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:

Get Screen Height and Width:

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

How to Get Widget Height & Width and Listen to Size Change:

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.

How to Get Height and Width of Widget using LayoutBuilder Widget:

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.

Full Code Example:

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())
                            )
                         );
                       }
                     )
                   )


              ],),
          )
      );
  }
}

Output Screenshot:

In this way, you can get height and width of parent or child width in Flutter.

No any Comments on this Article


Please Wait...