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.