https://unsplash.com/@lmbrtt

Make progress button in Flutter

In this article, I am going to explain you how to create the progress button in the Flutter.
Progress button is a normal button but when you click on it. It will show the progress so that user will have idea that some process is running.

First create a new Flutter project, Flutter provides us some freebies with the starter code. It is already managing the state of click count and has created a floating action button for us. Remove those unnecessary code like FloatingButton Text and add the MaterialButton in it.

Below code snippet is layout of material button in flutter, it does not contain any click events as of now.

And output will be like below screenshot.

In the MaterialButton widget, I called the method setUpButtonChild() , that will returns Widget to create a child for the MaterialButton.

Next, when the user clicks on the button, progress should be shown in it. So to implement it we will play with the state of button. To learn the state of button for further study visit this documentation link. Summary of setState method fully explained in that link.

Get Started

Create a variable name _state in _MyHomePageState class and initialize it with the value 0. Now in the MatrialButton Widget in OnPressed , we will change the state to show progress.

Now, change the state of button with animateButton() method.

animateButton()

In the animateButton(), we will again call setState() and update the _state value with the 1, I have also used the Timer to illustrate the whole process of changing state of button. After 3300 milliseconds we will again call the setState() to update the value for the _state from 1 to 2.

Okay!! But wait…

Where this _state will be used, how does this affect our button. We have already using _state in the onPressed of the Button to check if the _state is set to 0 or not (i.e initial state).

So we are going to use the _state to set up our child widget of the Button.
(i.e. in the setUpButtonChild())

setUpButtonChild()

So in the end, our full code will look something like this.

and the final output will be as below screenshot.

This looks pretty cool, right? But still, something is missing….

Animation???

Now, I am adding some animations in this layout to make it more beautiful and attractive, to work with animations in Flutter you should aware of two classes named as Animation and AnimationController.

First of all, set the GlobalKey object in the MaterialButton’s Key parameter.

Global keys is uniquely identify elements. Global keys provides access to other objects that are associated with elements, such as the a [BuildContext] and, for [StatefulWidget]s, a [State].

Now, create the Animation, AnimationController objects. Add below code in _MyHomePageState class.

GlobalKey _globalKey = new GlobalKey();
Animation _animation;
AnimationController _controller;

In next step, in the MaterialButton add _globalKey

key: _globalKey,

Wrap your MaterialButton with the PhysicalModel.

child: new PhysicalModel(
  color: Colors.lightGreen,
  borderRadius: BorderRadius.circular(25.0),
  child: new MaterialButton(
    ....
  ),
),

PhysicalModel Let’s you create a physical model with a rounded-rectangular clip.

Set MaterialButton’s width parameter’s value as global. Now in the animateButton() method get the width of the MaterialButton using the _globalKey.

double initialWidth = _globalKey.currentContext.size.width;

Add initialize the Animation and AnimationController objects.

_controller =
    AnimationController(duration: Duration(milliseconds: 300), vsync: this);
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
  ..addListener(() {
    setState(() {
      _width = initialWidth - ((initialWidth - 48.0) * _animation.value);
    });
  });

Use the forward() to Starts running this animation forwards.

_controller.forward();

Voila, That’s it… Simple isn’t it? 😄

You are done with the Progress Button with animations.

Lastly, below is the output of final animation view in flutter.

In above article I have implemented Progress bar with animation in flutter, for showing the process. Hope this helps you.

You can check my GitHub repository for the same.

ibhavikmakwana/ProgressButton

Click the 👏 to help others find this article.

Hold the clap button to leave more claps.

If you have any query/queries reach me at my twitter account

Bhavik Makwana (@ibhavikmakwana) | Twitter