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:

____title ‘Messages’
______IconButton -> search
______IconButton -> dots

______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:


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.

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:


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.


And call our new Fab button like this way:

floatingActionButton: MyFabButton(isGoingDown)

Final result


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

You can find me on Twitter: @diegoveloper.