Write the first Flutter application (Part 2)

5. Add icon to the list

• Add _save Set to RandomWordsState. This set stores pairs of words that users prefer. Set is preferred to List because properly implemented Set does not allow duplicate items.

• In the _buildRow function, added alreadySaved is saved to ensure that the word pair hasn’t been added to favorites.

In _buildRow () you will also add heart-shaped icons to ListTile objects to enable priority. In the next step, you will add interactivity with the heart symbol.

• Hot reload app, now you will see hearts open on every row, but they haven’t interacted yet.

6. Add interactivity

In this step, you will make the heart symbols touchable. When a user types an item in the list, turning it into its “favorite” state, the word combination is added or removed from a collection of saved favorites. To do this, you will modify the _buildRow function. If an entry from has been added to the favorites, touching again will remove the item from favorites. Once a cell has been tapped, the function will call setState () to notify the frame that the state has changed.

• Add onTap

Hot reload app, you will be able to click on any box to like or dislike.

7. Navigate to the new screen

In this step, you’ll add a new page (called a route in Flutter) that shows your favorites. You will learn how to navigate between a Home route and a new route.

In Flutter, the Navigator manages a stack of application routes. Push a route onto the Navigator’s stack, updating the screen for that route. Enable a route from the Navigator stack, returning the screen to the previous route.

Next, you’ll add a list icon to the AppBar in the build method for RandomWordsState. When the user clicks on the list icon, a new route containing the saved favorites is pushed to the Navigator, displaying the icon.

• Add the symbol and its corresponding action to the build method:

• Add the _pushSaved () function to the RandomWordsState class.

• Hot reload app, icon list appears in the application bar.

Next, you will route and push it into the Navigator stack. This action changes the screen to show the new route. The content for the new page is built into the builder property of MaterialPageRoute, in an anonymous function.

Calling Navigator.push, as shown below, will push the route to the Navigator stack.

Next, you will add MaterialPageRoute and its builder. For now, let’s add the code that creates the ListTile rows. The divideTiles () method of ListTile adds a horizontal distance between each ListTile. Variables are divided between the last rows, converted into a list by function: toList).

Builder property returns Scaffold, containing the app bar for the new route, named “Saved Suggestions”. The body of the new route includes a ListView containing the ListTiles rows; Each row is separated by a divider.

• Add horizontal dividers

Hot reload app:

8. Change the theme

In this step, you will modify the application theme. Theme controls the look and feel of your application. You can use the default theme, depending on your physical device or emulator, or customize the theme to your liking.

You can easily change the application theme by configuring the ThemeData class. This application is currently using the default theme, but you will change the main color of the application to white.

Hot reload. Now all background apps are white, including the appbar.

Thank you for reading my post