Flutter gesturedetector : How to make any widget clickable

Suppose you have widgets like text, container, and any other widgets that are not clickable. There is no onPressed(), onSubmitted() ,onLongPress() e.t.c attributed in it. Even if you want to make these types of widgets interact with users then you have to use Flutter gesturedetector. It is a widget that detects gestures. In this entire tutorial, you will learn how to implement the flutter gesture detector.

Problem

In this tutorial, I will create a Container to make it clickable using the gesturedetector widget and will change the color and also show the user that you have clicked the container widget on terminal.

Steps to implement Flutter Gesturedector

In this section, you will know all the steps required to implement Flutter gesturedetector. Just follow the steps for a clear understanding.

Step 1: Create a Stateful Widget

The first step is to create a Stateful widget that will contain a container with some text inside it. I have used the Stateful widget as it will show the changes to the same UI.  Execute the below lines of code.

import 'package:flutter/material.dart';

class GesturerDetectorApp extends StatefulWidget {
  const GesturerDetectorApp({Key? key}) : super(key: key);

  @override
  _GesturerDetectorAppState createState() => _GesturerDetectorAppState();
}

class _GestorDetectorAppState extends State {
late Color? color = Colors.blue[900];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Gestor Detector App"),
        ),
        body: Center(
          child: Container(
            height: 100,
            width: 100,
            color: Colors.blue[900],
            alignment: Alignment.center
            child: Text("Click Me!",
                  style: TextStyle(color: Colors.white, fontSize: 20)),,
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(GestorDetectorApp());
}

When you run the above code you will get a Container of blue in color with “Click Me ” text written inside it.

Step 2: Wrap the container with the flutter gesturedetector

After creating the container widget, let’s wrap it with a flutter gesturedetector widget. Inside the gesture detector, I will create a onTap() callback function that will change the color of the container to Red.

Execute the below lines of code and see the output.

import 'package:flutter/material.dart';

class GestorDetectorApp extends StatefulWidget {
  const GestorDetectorApp({Key? key}) : super(key: key);

  @override
  _GestorDetectorAppState createState() => _GestorDetectorAppState();
}

class _GestorDetectorAppState extends State {
  late Color? color = Colors.blue[900];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Gesture Detector App"),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              print("Continer is clicked");
              setState(() {
                color = Colors.red[600];
              });
            },
            child: Container(
              height: 100,
              width: 100,
              color: color,
              alignment: Alignment.center,
              child: Text("Click Me!",
                  style: TextStyle(color: Colors.white, fontSize: 20)),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(GestorDetectorApp());
}

Output

Before the tapping of container

After the tapping of container

Terminal Output

End Notes

Flutter gesturedetector is a very useful widget for making any UI widget clickable. In fact, there are many callbacks for it like onTap, onDoubleTap, onPress, onLongPress e.t.c that can manipulate any widget. I hope you have understood the problem with the flutter gesturedetector. If you have any queries then you can contact us for more help.

Source:

Flutter Documentation