Example of Get Width Height of Widget in Flutter on Button Click

Hello friends, In today’s tutorial we would learn about how can we use Key property in flutter to get selected widget width and height. The main purpose of today’s tutorial to find out a widgets dimensions also known as Size of widget. When we pass a Key object to a widget then it will get us a KEY to access few properties of that widget like Size of widget in width and height format. But we have to use  Key_Name.currentContext() method to extract width and height. Now next question raise in our mind is why do we need this type of functionality. Sometimes when we’re playing with animation in flutter or want to track moving object’s on screen with their dimensions then this would be helpful for us. So in this tutorial we would learn about Example of Get Width Height of Widget in Flutter on Button Click.

Contents in this project Example of Get Width Height of Widget in Flutter on Button Click :-

1. Open your project’s main.dart file and import material.dart and dart:ui package.

2. Create void main runApp() method and here we would call our main MyApp class.

3. Creating our main MyApp extends StatelessWidget class. In this class we would call ViewSize() child class.

4. Creating the ViewSize extends StatefulWidget. In this class we would make our main Child class named as ViewSizeState with createState() method to enable State management in given class tree.

5. Creating our main Child class ViewSizeState extends State.

6. Creating a Key object named as _key using GlobalKey(). We would pass this key object to the Container widget, which height width we want to find out.

7. Creating a Size type of variable named as viewSize. We would use this variable to store width and height of variable.

8. Creating a function named as _getSize(). In this method we would use the _Key with currentContext() method to find out width and height and store the width height in State.

9. Creating Widget Build area -> a Child container widget with KEY object and a Button. We would call above function on button click event.

10. Complete source code for main.dart file :-

Screenshot :-

Get Width Height of Widget in Flutter


  1. when I create a function then call multiple times to in any column then how to work globalkey ,
    because it is showing duplicate value error

Leave a Reply

Your email address will not be published.