My Hexaville
Spead the Word
flutter progress button

Flutter Progress Button Animation


Let’ continue learning Flutter animations, now I’m going to implement a very common animation – progress button

 

 

Here’s the final result

flutter progress button

Let’s break down the work we need to do first

  • Display a button with rounded corners
  • Shrink the button and display a progress indicator
  • Display completed state with a check mark

Button with rounded corners

As you see in a GIF, there’s an elevation and a ripple effect taking place. It looks identical on both iOS and Android. Ripple effect might not be the most natural look for iOS though

So those two features I take from a RaisedButton class, it also gives an onPressed listener. Now, this button does not have a border radius attribute, to have rounded corners, we need to wrap a button in a PhysicalModel. After doing so I lost the built-in elevation of RaisedButton, luckily PhysicalModel can handle that. That is the reason why I have _isPressed flag

There’s a duplicated color for PhysicalModel class, which is covered completely by RaisedButton, it’s a required attribute of a PhysicalModel. Not the most optimal, but it works. There’s gotta be a more optimal solution for this definitely

My _width field has a double.infinity value by default. It makes a button expand to the whole width of a screen

Shrink animation

Now if you followed my previous post, you know about Tween animations in Flutter. I’m not going to go into detail of that, if you want to learn about Flutter animations, check that post

To animate a button shrinking down to a circle, you just need to animate its width, from initial to 48 dp (initial height size)

I have three states stored in an int _state

  •  initial (0)
  •  loading (1)
  • completed (2)

It can be done with enums, but I used ints, a habit from Android development.

We need to display a CircularProgressIndicator on loading, to give it indefinite state, pass a null as a value attribute.

Also, you need to get an initial width for animation. It’s possible by using a GlobalKey class

Completed state

Since there’s nothing to load, I have a 3 seconds delay before setting a state to complete. The code to handle a color change is in the first stage, using a ternary operator

 

That’s it, in the next post I’ll try to implement a circular reveal animation probably, to guide a user to the next screen

Check the source code here


About the Author Ihor Klimov

Formerly an Android developer, lately picked up some Flutter. This blog is everything that I find exciting about Android and Flutter development. Stay tuned and hope to see you again!

follow me on: