Flutter

Flutter – GestureDetector Code Example & Concepts

In this post, we will learn about how to use GestureDetector with Stateful widgets in order to record changes to state. The following are key aspects in relation to changing state of the widget based on the users’ gesture. 

  • Capture user’s gesture using a widget called as GestureDetector. The following happens as part of GestureDetector widget:
    • Capture events such as onTap, onDoubleTap etc and change the state
  • After the user gesture is captured and the state is changed, the widget is built and replaced with existing widget. The existing widget is flagged as dirty.

Here is the code representing the usage of GestureDetector for capturing user gesture, changing the state of the widget and rebuilding the widget tree again. Note that the elements tree remain intact. In the code below, the VoteCounter is a stateful widget. As it gets created, the related element is created and put it on elements tree. The element then ask the VoteCounter widget to create the state. The state is created and a reference is passed on to element in the element tree. As a result of creation of state, the build method is called which results in creation of widgets such as GestureDetector and Text widget.

class VoteCounter extends StatefulWidget {
  final String label = 'Vote';

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

class _VoteCounterState extends State<VoteCounter> {
  int count = 0;  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          count++;
        });
      },
      onDoubleTap: () {
        setState(() {
          count += 5;
        });
      },
      child: Text('${widget.label}: $count'),
    );
  }
}

The above VoteCounter widget can be called from other widgets to display on the screen. Here is the sample code calling the VoteCounter stateful widget.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Hello World'),
        ),
        body: Center(
          child: VoteCounter(),
        ),
      )
    );
  }
}

Here is how this would look on the screen. Tapping once results in incrementing the vote by 1. Doing a double tapping results in vote increment by 5 as per the code given above.

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar
Tags: flutter

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

1 month ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

2 months ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

2 months ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

2 months ago