Flutter – Tap Coordinates Detector
You may sometimes need to find the coordinates of the widget in your Flutter Application, Here we are going to find the coordinate of the body. When we press on the body of the Scaffold then it will show the coordinates of that point where we are tapped. A sample video is given below to get an idea about what we are going to do in this article.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: First We Need To Create a Variable Where We Store Coordinates.
Dart
double posx = 0; double posy = 0; |
Step 3: Method for getting Coordinates
We define the onTapDown method to know tap x y coordinates by a box on tap and get it’s coordinate and once detected we set the new posx posy and string txt to show values.
Dart
void onTapDown(BuildContext context, TapDownDetails details) { final RenderBox box = context.findRenderObject(); final Offset localOffset = box.globalToLocal (details.globalPosition); setState(() { posx = localOffset.dx; posy = localOffset.dy; }); } |
Step 4: Widget
GestureDetector detect the tap or press of the user screen and call the user-defined function by onTapDown, which we defined above. And show the coordinates x and y on the user screen.
Dart
GestureDetector( on TapDown: (TapDownDetails details)=> onTapDown(context,details), child: ) |
We need to create a page that contains positions containing text as a child, once used tap change the positioned position according to tap x and y. Due to the stateful widget once posx and posy change positioned will take the new coordinates.
Complete Code
Dart
import 'package:flutter/material.dart' ; // main method that runs the runApp Method. void main() { runApp(TapCoords()); } class TapCoords extends StatelessWidget { const TapCoords({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , title: 'Flutter Demo' , home: Scaffold( appBar: AppBar( title: Text( 'Tap The Body' ), ), body: MyWidget() ), ); } } class MyWidget extends StatefulWidget { const MyWidget({Key? key}) : super(key: key); @override State<StatefulWidget> createState() { return MyWidgetState(); } } class MyWidgetState extends State<MyWidget> { // variable to hold the // value of coordinate x. double posx = 0; // variable to hold the // value of coordinate y. double posy = 0; String Txt = "Tap Here To Start!" ; // Method to find the coordinates and // setstate method that will set the value to // variable posx and posy. void onTapDown(BuildContext context, TapDownDetails details) { // creating instance of renderbox final RenderBox box = context.findRenderObject()as RenderBox; // find the coordinate final Offset localOffset = box.globalToLocal(details.globalPosition); setState(() { posx = localOffset.dx; posy = localOffset.dy; // this string contain the x and y coordinates. Txt = 'Tapped\nX:$posx \nY:$posy' ; }); } @override Widget build(BuildContext context) { // GestureDetector that will detect the ontap return GestureDetector( onTapDown: (TapDownDetails details) => onTapDown(context, details), child: Stack(fit: StackFit.expand, children: <Widget>[ Container(color: Colors.white), Positioned( // show the coordinates. child: Text(Txt), left: posx, top: posy, ) ]), ); } } |
Output:
When we press on different positions on the body that will show the coordinates of that point.
Contact Us