Hello friends, In today’s tutorial we would learn about finding out position of any widget in Flutter. Position of any widget can be determine using X and Y position. X is the horizontal position from left side and Y is the Vertical position from Top side. If we get X and Y values then we can easily find out position of widgets in flutter. Now the main thing is that to get the position of any widget we have to first pass the KEY object to that widget. So that the KEY object can hold its all information like position and dimensions. Now using the KEY object we can later on extract the X and Y position. So in this tutorial we would learn about Get X Y Position of Widget in Flutter on Button Click.
Contents in this project Get X Y Position 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. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating MyApp extends StatelessWidget class. In this class we would call the ViewPosition class.
|
1 2 3 4 5 6 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: Center(child: ViewPosition()))); } } |
4. Creating our Child class named as ViewPosition extends StatefulWidget. In this class we would make our main Child class ViewPositionState with createState() method to Enable mutable state management.
|
1 2 3 |
class ViewPosition extends StatefulWidget { ViewPositionState createState() => ViewPositionState(); } |
5. Creating our main Child class ViewPositionState extends State<ViewPosition>. This class is our main Child class in which we would make the complete app design.
|
1 2 3 4 5 6 |
class ViewPositionState extends State<ViewPosition> { } |
6. Creating a GlobalKey() object named as _key . We would pass this key in the Widget which position we want to find out.
|
1 |
final _key = GlobalKey(); |
7. Creating 2 Double type variables named as X_Position and Y_Position with default values. We would use these variables to hold the x and y position.
|
1 2 |
double X_Position = 0.00; double Y_Position = 0.00; |
8. Creating a function named as _getPosition(). In this function we would extract the position of X and Y using KEY object.
|
1 2 3 4 5 6 7 8 9 10 |
void _getPosition() { RenderBox? box = _key.currentContext!.findRenderObject() as RenderBox?; Offset position = box!.localToGlobal(Offset.zero); setState(() { X_Position = position.dx; Y_Position = position.dy; }); } |
9. Creating Widget Build area with Container widget and Button widget.
|
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 |
Widget build(BuildContext context) { return Scaffold( body: SafeArea( top: true, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 100, 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[900], padding: EdgeInsets.all(6), textStyle: TextStyle(fontSize: 20), ), child: Text('Get X and Y Position of Widget'), onPressed: _getPosition, ), ), Text( X_Position != null ? 'X Position : ${X_Position.toString()}' : '', style: TextStyle(fontSize: 24), ), Text( Y_Position != null ? 'Y Position : ${Y_Position.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 72 73 74 |
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: ViewPosition()))); } } class ViewPosition extends StatefulWidget { ViewPositionState createState() => ViewPositionState(); } class ViewPositionState extends State<ViewPosition> { final _key = GlobalKey(); double X_Position = 0.00; double Y_Position = 0.00; void _getPosition() { RenderBox? box = _key.currentContext!.findRenderObject() as RenderBox?; Offset position = box!.localToGlobal(Offset.zero); setState(() { X_Position = position.dx; Y_Position = position.dy; }); } @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( top: true, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 100, 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[900], padding: EdgeInsets.all(6), textStyle: TextStyle(fontSize: 20), ), child: Text('Get X and Y Position of Widget'), onPressed: _getPosition, ), ), Text( X_Position != null ? 'X Position : ${X_Position.toString()}' : '', style: TextStyle(fontSize: 24), ), Text( Y_Position != null ? 'Y Position : ${Y_Position.toString()}' : '', style: TextStyle(fontSize: 24), ), ], ), ))); } } |
Screenshot :-
