April 6, 2021

Design custom button using tap gesture

By Mohit Agrawal

Let’s create a button from the scratch using tap gesture in Flutter

Introduction

Welcome back to another Flutter tutorial. In this article, I will cover the fundamentals of gesture. What are the different types of gestures are given in the Flutter?

After learning the basics, I will show you how to design your own custom button widget using gestures.

What is Gesture?

The different types of ways we touch our mobile screen to give some input are gestures. It is a physical action or movement of the user in order to interact with the user interface of any device.

Let’s take a simple example of the locked mobile screen. To unlock the device you need to swipe the bar from left to right of the screen. This is the perfect example of a swipe gesture.

Different types of Gestures

Let’s discuss some commonly used gestures in brief. All of them are very simple, just by reading the name itself you will understand them.

  • Tap: As the name says it will detect if the user taps on the screen. Methods to detect different tap gestures are like onTapDown(), onTapUp(), onTap() and onTapCancel().
  • Double tap: It will detect the when user clicks twice in a very short time interval. The method is onDoubleTap().
  • Long press: You can also detect the long press event by using the method onLongPress().
  • Vertical drag: Touching one side of the screen and then moving the fingertip to the other vertical side in a steady manner. Methods to detect vertical drag gestures are like onVerticalDragStart(), onVerticalDragUpdate(), onVerticalDragEnd().
  • Horizontal drag: Touching one side of the screen and then moving the fingertip to the other horizontal side in a steady manner. Methods to detect horizontal drag gestures are like onHorizontalDragStart(), onHorizontalDragUpdate(), onHorizontalDragEnd().
  • Panning: Touching the screen and moving the fingertip in any direction. This type of gesture is mainly used in game development. Methods to detect pan gesture are onPanStart(), onPanUpdate(), onPanEnd().

Tap gesture demo app

Now it’s time to code something to understand the concept of gestures in Flutter. We have discussed different types of gestures in the above section. Among all the gestures, onTap() is the most commonly used one and it easy to understand as well.

In this demo app, I will show you how to create your own custom button and implement the click call back using the tap gesture.

flutter_tap_gesture_1

Let’s start coding!!!

Create a new Flutter project and give it some nice name whatever you like 😃.

First, we will create the UI for the button. Take a container widget and using the BoxDecoration give it a curve border-radius. Check out the below code for more detail.

Container(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('Click me !!!', style: TextStyle(color: Colors.white),),
          ),
          decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.all(Radius.circular(5))
          ),
        ),

If you run your app at this stage then you will see your button but nothing will happen on click of it. We can implement the click action on the container using the Gesture widget.

You just have to wrap the widget on which you want to apply the gesture. In our case, we will apply the gesture to our container widget.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: printLogData,
          child: Container(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text('Click me !!!', style: TextStyle(color: Colors.white),),
              ),
                  decoration: BoxDecoration(
              color: Colors.blue,
                  borderRadius: BorderRadius.all(Radius.circular(5))
          ),
          ),
        ),
      ),
    );
  }

  void printLogData() {
    debugPrint('Did tap button');
  }
}

Above is the complete code for applying tap gestures on a container widget. As soon as the user clicks on the button the onTap() will be triggered. And in on tap, we have given a method printLogData().

Run the above code and click on the brand new custom button. You will see the output on the console window 🤞.

Video Tutorial

Conclusion

I have shown you the basics of gesture in Flutter. Using these concepts you will be able to design much complex custom UI design and their events.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!