Get X Y Position of Widget in Flutter on Button Click

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.

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

3. Creating MyApp extends StatelessWidget class. In this class we would call the ViewPosition class.

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.

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.

6. Creating a GlobalKey() object named as _key . We would pass this key in the Widget which position we want to find out.

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.

8. Creating a function named as _getPosition(). In this function we would extract the position of X and Y using KEY object.

9. Creating Widget Build area with Container widget and Button widget.

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

Screenshot :-

Get X Y Position of Widget in Flutter on Button Click

Leave a Reply

Your email address will not be published.