Navigate between screens in Flutter

Hi everybody,

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

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.

Let's see 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), BottomNavigationBar, Drawer, FloatingActionButton, etc.

So, we add Scaffold and ListView.separated() widgets to create our list of favorite words.

In this case, we show only the title using ListTile widget.

Main screen:

Favorite screen:

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.

CHALLENGE ALERT!

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!

Enjoy!