Back to top

A Step by Step Guide to Building Your First Flutter App: Part 2

In Part 1 you must have learned how to build a basic app using Flutter. In this step-by-step guide, you will learn how to extend that app by adding other interesting features such as adding a second page, including more interactivity, and modify the app’s theme color.

Areas covered in this part:

1. Craft a Flutter app that looks natural on both, Android and iOS

2. Using hot reload for quick development

3. Add more interactivity to a stateful widget

4. Create and navigate to the second screen

5. Change the app’s theme

You will be building…

Assuming that you’ve developed a simple app that generate names for startup company following the instructions given in Part 1, in this part you will be adding clickable heart icons to save those names as favorites, then navigate to a new route (a screen) by adding another page for the saved favorites, and then modify the app’s overall theme color.

Let’s begin.

In order to continue, you should be having the starting app (startup_namer), which you have created in the first part. However, if you don’t have the startup_namer, you can go back to Part 1 and create it by following the instructions provided there.

If you have the startup_namer let’s continue in extending the app.

Step 1: Adding heart icons to each row

Begin by adding a _saved Set to the RandomWordsState. This Set helps storing the word pairing that the user has marked as their favorites. The Set is preferred to List because a properly implemented Set does not allow duplicate entries.

To ensure that the word pairing is not repeated (which not already been added to the favorites), you will add an alreadySaved in the _buildRow function.

Now, in the _buildRow( ) you will also add the heart-shaped icons to the ListTile objects to enable favoriting. Here’s the code to add the icons.

Hot reload the app. You should able to see the hearts as shown in the picture below.

(Left) Android, (right) iOS

The icons are just listed, they are not interactive yet. In the next step we’ll make them interactive.

Code help: If the app is not working properly, here’s the code2 to help you get back on track.

Step 2: Adding interactivity

Let us make the heart icons tapable. When users tap and toggle the ‘favorite’ state, the word pairing will be added or removed accordingly from the set of saved favorites.

To do this, you have to modify the _buildRow function. If a word paring has already been added to favorites, tapping it again removes it from favorites. When a tile has been tapped, the function calls setState( ) to notify the framework that state has changed.

Here’s how you will add onTap

Tip: In Flutter’s reactive style framework, calling setState() triggers a call to the build() method for the State object, resulting in an update to the UI.

Hit the Hot reload to see the result. Now you should be able to tap on the names to mark it as favorites and unmark it as well.

(left) Android, (right) iOS

Code help: If the app is not working properly, here’s the code to help you get back on track.

Step 3: Create and navigate to a new page

In Flutter, a new page is called a route. This new route will be used to display favorites. In this step you will learn how to navigate between the home route and a new route.

In Flutter, since the Navigator manages a stack containing the app’s routes, by pushing a route onto the Navigator’s stack, it updates the display to that route. Popping a route from the Navigator’s stack, returns the display to the previous route.

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

Add the icon and its corresponding action to the build method.

Then, add a _pushSaved() function to the RandomWordsState class.

Once you hot reload the app, the list icon will appear in the app bar. It is not interactive yet, because the _pushSaved function is empty.

In the next step let us build a route and push it to the Navigator’s stack. This will enable the screen to display the new route, and the content of the new route is built in MaterialPageRoute’s builder property, in an anonymous function.

It’s time to call Navigator .push to push the route to the Navigator’s stack. The IDE will throw an invalid code complain, but we’ll fix that in the next section.

Next, add the MaterialPageRoute and its builder. But, for now, just add the code that generates the ListTile rows. The divideTiles ( ) method of ListTile adds horizontal spacing between each ListTile. The divided variable holds the final rows, converted to a list by the convenience function, toList().

Add the below code.

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

Now, add horizontal dividers.

Hot reload the app. Now you will be able to tap the list icons and favorite the items. You will also notice there is back button in the app bar, which will take you to the home route.

(left) iOS Main Route, (Right) iOS Saved Suggestions route

Code help: If the app is not working properly, here’s the code to help you get back on track.

Step 4: Change the UI using a theme

In this step let us modify the app’s theme. You have the option to use default theme, which is dependent on the physical device or emulator, or you can customize your theme.

The app’s theme can changed by configuring the ThemeData class. This app uses the default theme, but let us change its primary color to white.

Change the color in MyApp class

Hot reload the app. After you change the theme, the entire background will become white, including the app bar.

(left) Android, (right) iOS

By using ThemeData you can change other aspects of the UI as well. The color class in Material library offers variety of colors you can experiment with, and the hot reload features make the implementation quick and easy.

Code help: If the app is not working properly, here’s the code to help you get back on track.


Now, you should be ready a with a basic app Flutter app that is natural looking on both Android and iOS.

We hope this two-part guide has helped you in successfully creating a simple app in Flutter. If you want to gain more knowledge on Flutter Widget Framework, you can always head to Flutter Codelabs.

Post a Comment