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
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
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.