Navigate between screens in Flutter
In this post, we are going to show the favorite elements selected from a list. This is a continuation of my previous post.
We need to add a button somewhere which goes to a new screen with favorite words selected. In this case, I'm going to use an IconButton for this design.
AppBar widget has a property called
actions which is a
List<Widget>, we just need to add one:
IconButton represents an icon with a behavior, the
onPressed function will be executed when the user press this button. So, we need to create a new screen called
Terminology: In Flutter, screens and pages are called routes. The remainder of this recipe refers to routes. In Android, a route is equivalent to an Activity. In iOS, a route is equivalent to a ViewController. In Flutter, a route is just a widget.
In this case, our new route is StatelessWidget which means this route is not a mutable state. I mean, Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information provided it.
On the other hand, we need to call Navigator this way in order to create our new route:
Navigator is a widget that manages a set of child widgets with a stack discipline. Its means, that when we press the button to call a new screen, it will be put above the first screen.
We need to create a MaterialPageRoute to replace the current screen with a new one. This widget manages the screen with a platform-adaptive transition.
FavoriteWordsRoute ... is empty, right?. Now, we are going to design it. We want a design that looks similar to the main list. But, we need to show the words selected.
For that, when we create
FavoriteWordsRoute we need to pass selected items.
By convention, widget constructors only use named arguments, in this case,
favoriteItems is a named argument. Named arguments can be marked as required using
@required. Also by convention, the first argument is key, and the last argument is child, children, or the equivalent.
FavoriteWordsRoute looks like:
So far, so good. But it still does nothing!
Before we create a new
ListView.separated() main list, we need to add Scaffold widget. This widget is really useful and important, it gives you many basic functionalities out of the box, like
AppBar (with an icon which backs to the previous screen),
So, we add
ListView.separated() widgets to create our list of favorite words.
In this case, we show only the title using
We can see that we have a new screen with the favorite words selected. We can go back to the main screen by pressing the back button.
When there are not selected some words and pressed the button, the next screen shows blank. This is not a good design for UI and for user experience.
Well, I have a challenge for you: you could show a message using a
Text widget that has to show the following text 'No favorite words here!'.
Remind, there is no one solution.
Do you accept the challenge? Tell me in the comments and we can talk solutions!
In the future post, I'm going to code how to show the part number when users are selecting words over the button, like a Badge.
The full code is available on GitHub.
If you want, you can read my previous Flutter articles!
That's all folks!