Flutter: App Clone — Android Messages

I have created this new section named App Clone, in which I will try to clone the screens of some known apps, as the first example I will show you how to imitate the main screen of the application Messages of Android.

Don’t you know the app? This is how it looks like

Android Messages App

The curious thing about this screen is that it brings an interesting animation, when the user scrolls up or down the Fab button changes according to the direction.

How to do it in Flutter?

Well, very simple, for that we will use the NotificationListener widget, for those who didn’t read my previous post, you can take a look here:

Flutter : let’s know the ScrollController and ScrollNotification

Let started

Analyzing the main image we see that it is composed of:

Scaffold
__AppBar
____title ‘Messages’
____actions
______IconButton -> search
______IconButton -> dots

__Body
____ListView
______Custom StatelessWidget

__FloatingActionButton (changes according to the direction)

That was a quick look at the main outline of the app’s UI. I won’t go into much detail on how to build the Custom StatelessWidget since it is not complicated.

Translated into code would be the following:

Result

Flutter Messages App

Now, the challenge is how to transform my FloatingActionButton when the user scroll and change the direction? For that, our ListView must have as parent the NotificationListener of the ScrollNotification subtype.

NotificationListener<ScrollNotification>(
              onNotification: (onScrollNotification) {
              
              },
              child: _buildList())

With this we are already listening to scroll notifications, now let’s do the logic to know if it is going up or down.

We have to create a variable to save the current direction:

class _AndroidMessagesPageState extends State<AndroidMessagesPage> {
bool isGoingDown = true;

Now, the logic inside our onScrollNotification callBack

Refreshing the Fab button according to the direction:

Result

As you can see, we refreshed the Fab button , but the transition isn’t smooth, right?
We can improve it by creating our own button and using AnimatedContainer for the animation, in the following way.

https://gist.github.com/diegoveloper/3c18ad5398f2e33c134bcefd187d1f43

And call our new Fab button like this way:

floatingActionButton: MyFabButton(isGoingDown)

Final result

References

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

You can find me on Twitter: @diegoveloper.