My Hexaville
Spead the Word
flutter circular reveal with progress button

Flutter Circular Reveal With Progress Button


As promised in the previous post, today I’m going to implement a circular reveal in Flutter. This was one of the first animations I learned how to create on Android and I totally love it

Circular Reveal

Now, Android SDK has an abstraction function for it, in Flutter there isn’t, as far as I’m concerned. Even though it’s an Android-specific feature and iOS developers might not be even familiar with it, I think this animation can be used both on Android and iOS devices for guiding a user to the next screen from the point of interaction

Without further ado, here’s what we’re going to get today

flutter circular reveal with progress button

This tutorial is based on the several previous ones, where I started to talk about things like animations and canvas animations in Flutter. If you haven’t read them, check them out to get on the same page

Steps

Let’s break down the animation first. There’re going to be two main widgets overlaying each other in the following order:

  • CustomPainter (for reveal animation)
  • ProgressButton (from the previous tutorial)

Basic Reveal

The way I have my reveal animation implemented is canvas drawing a circle and a Tween class animating radius

That what it would look like

flutter circular reveal with progress button

The cool part about Flutter here is that I did not declare my CustomPaint to take the whole screen, if fact I just have the initial size. It adjusts its size by itself

Wrapping ProgressButton

Now we can use that ProgressButton widget from this tutorial and get closer to the final result

I skipped some parts because they were implemented in the previous tutorial and are not relevant for this one. There’re two interesting parts here: reveal function is now called at the end of the animation by ProgressButton. Second: since ProgressButton is overlaying a circular reveal, it would cast a shadow on it, which would visually separate them from each other. This is solved by removing ProgressButton’s elevation in calculateElevation for revealing state

And the result of it is what you saw in the first GIF

Screen Transition Animations

If you noticed, the final transition animation is a fade in, not default slide one. It takes a bit of code to implement with bare Flutter framework. But this library gives a good abstraction, a replacement for default Flutter router plus transition animations

Reset State To Initial

When you click back, the state of the previous screen is exactly where you left it, after the animation completed. Even though login screen, my home page, should not be poppable, for the purpose of the sample, to rerun animation, it’s possible to go back to the login screen, on doing so you reset widget’s important fields

 

Alright, you can get the source code here. Even though I had to implement the whole thing from scratch, it wasn’t as hard as it might seem. Flutter development is indeed faster than Android one.  And I’m starting to see the benefits of its flexible design. Considering it’s still in beta, stable Flutter is going to crush it! Totally love it!


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: