In this tutorial, I will be showing how to Create a Bouncing Button in Flutter app.yeah Bouncing Button is Amazing if you ever Saw Reflectly App bouncing button, then you will find out that Both Bouncing Button Look Similar in Way functionality.

Our Final Bouncing Button will Look like this:

Bouncing Button in flutter

bouncing button

How to Create Bouncing Button in a flutter app as Below –

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

We’re going to begin by adding a SingleTickerProviderStateMixin into a Stateful widget.

SingleTickerProviderStateMixin is used for accessing Animation State.

Animation Controller

animation Controller

So we add Two-Variable first will for button Scaling & Second For Animation Controller, which will need to create the Animation

After that we Create Intestate.

why are we using Initstate ?

Because of initstate is the first method Called whenever the widget is created.

AnimationController has property. In this AnimatioController we’re using Vsync, Duration, LowerBound, UpperBound As we have shown in the below Code:

//CODE

double _scale;
AnimationController _controller;
      @override
     void initState() {
        _controller = AnimationController(
         vsync: this,
         duration: Duration(
            milliseconds: 200,
      ),
   lowerBound: 0.0,
   upperBound: 0.1,
     )..addListener(() {
          setState(() {});
         });
       super.initState();
    }

We also need to dispose of it by overriding the dispose of () function 

 @override
void dispose(){
  _controller.dispose();
  super.dispose();
}

Ok, We created AnimationCrontroller & we’re Accessing that _controller variable in Material app Widget.

first, create a Material App in that write Scaffold for App structure.

In the Scaffold,  write the Column widget because we want to Add  Text & Button Widget. After that Create GestureDetector because gesture detector giving us OnTap Property with help on OnTap we’re going to implement Bouncing Button.

Before that, we need to Create a Bouncing button with help of Container Widget.

Below Code about a Customize Button Layout

After that, we are creating two functions, One for when the User Tap Down & Other when Button released. This Two Function will tell Controller  to go forward & Later on, Go Backward

GestureDectector with OnTapDown & OnTapUp Function

You can see the full source code of the project here.

View on github

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support For Hardwork

💬 If you have a question about anything in the Tutorial, leave me a comment and I’ll do my best to answer your question.