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.
|
1 2 |
import 'package:flutter/material.dart'; import 'dart:ui'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class. In this class we would call ViewSize() child class.
|
1 2 3 4 5 6 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: Center(child: ViewSize()))); } } |
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.
|
1 2 3 |
class ViewSize extends StatefulWidget { ViewSizeState createState() => ViewSizeState(); } |
5. Creating our main Child class ViewSizeState extends State.
|
1 2 3 4 5 |
class ViewSizeState extends State<ViewSize> { } |
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.
|
1 |
final _key = GlobalKey(); |
7. Creating a Size type of variable named as viewSize. We would use this variable to store width and height of variable.
|
1 2 |
// Assign Default Size Value. late Size viewSize = const Size(0.00, 0.00); |
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.
|
1 2 3 4 5 |
void _getSize() { setState(() { viewSize = _key.currentContext!.size!; }); } |
9. Creating Widget Build area -> a Child container widget with KEY object and a Button. We would call above function on button click event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 120, height: 100, color: Colors.green, padding: EdgeInsets.all(8.0), key: _key, ), Container( margin: const EdgeInsets.all(8), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.lightBlue, padding: EdgeInsets.all(7), textStyle: TextStyle(fontSize: 20), ), child: Text('Get Size of Container View Widget'), onPressed: _getSize, ), ), Text( viewSize != null ? 'Container Widget Width : ${viewSize.width.toString()}' : '', style: TextStyle(fontSize: 24), ), Text( viewSize != null ? 'Container Widget Height : ${viewSize.height.toString()}' : '', style: TextStyle(fontSize: 24), ), ], ), )); } |
10. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import 'package:flutter/material.dart'; import 'dart:ui'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: Center(child: ViewSize()))); } } class ViewSize extends StatefulWidget { ViewSizeState createState() => ViewSizeState(); } class ViewSizeState extends State<ViewSize> { final _key = GlobalKey(); // Assign Default Size Value. late Size viewSize = const Size(0.00, 0.00); void _getSize() { setState(() { viewSize = _key.currentContext!.size!; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 120, height: 100, color: Colors.green, padding: EdgeInsets.all(8.0), key: _key, ), Container( margin: const EdgeInsets.all(8), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.lightBlue, padding: EdgeInsets.all(7), textStyle: TextStyle(fontSize: 20), ), child: Text('Get Size of Container View Widget'), onPressed: _getSize, ), ), Text( viewSize != null ? 'Container Widget Width : ${viewSize.width.toString()}' : '', style: TextStyle(fontSize: 24), ), Text( viewSize != null ? 'Container Widget Height : ${viewSize.height.toString()}' : '', style: TextStyle(fontSize: 24), ), ], ), )); } } |
Screenshot :-
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
Ajay you have to make Unique global key for each Widget.