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.
1 2 3 4 5 6 7 |
<span class="token keyword">class</span> <span class="token class-name">RandomWordsState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span> <span class="token operator"><</span> RandomWords <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">final</span> List <span class="token operator"><</span> WordPair <span class="token operator">></span> _suggestions <span class="token operator">=</span> <span class="token operator"><</span> WordPair <span class="token operator">></span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">final</span> Set <span class="token operator"><</span> WordPair <span class="token operator">></span> _saved <span class="token operator">=</span> Set <span class="token operator"><</span> WordPair <span class="token operator">></span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Add this line.</span> <span class="token keyword">final</span> TextStyle _biggerFont <span class="token operator">=</span> <span class="token function">TextStyle</span> <span class="token punctuation">(</span> fontSize <span class="token punctuation">:</span> <span class="token number">18.0</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">}</span> |
- In the _buildRow function, added alreadySaved is saved to ensure that the word pair hasn’t been added to favorites.
1 2 3 4 5 |
Widget <span class="token function">_buildRow</span> <span class="token punctuation">(</span> WordPair pair <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> bool alreadySaved <span class="token operator">=</span> _saved <span class="token punctuation">.</span> <span class="token function">contains</span> <span class="token punctuation">(</span> pair <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Add this line.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">}</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Widget <span class="token function">_buildRow</span> <span class="token punctuation">(</span> WordPair pair <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> bool alreadySaved <span class="token operator">=</span> _saved <span class="token punctuation">.</span> <span class="token function">contains</span> <span class="token punctuation">(</span> pair <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">ListTile</span> <span class="token punctuation">(</span> title <span class="token punctuation">:</span> <span class="token function">Text</span> <span class="token punctuation">(</span> pair <span class="token punctuation">.</span> asPascalCase <span class="token punctuation">,</span> style <span class="token punctuation">:</span> _biggerFont <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> trailing <span class="token punctuation">:</span> <span class="token function">Icon</span> <span class="token punctuation">(</span> <span class="token comment">// Add the lines from here... </span> alreadySaved <span class="token operator">?</span> Icons <span class="token punctuation">.</span> favorite <span class="token punctuation">:</span> Icons <span class="token punctuation">.</span> favorite_border <span class="token punctuation">,</span> color <span class="token punctuation">:</span> alreadySaved <span class="token operator">?</span> Colors <span class="token punctuation">.</span> red <span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// ... to here.</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Widget <span class="token function">_buildRow</span> <span class="token punctuation">(</span> WordPair pair <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> alreadySaved <span class="token operator">=</span> _saved <span class="token punctuation">.</span> <span class="token function">contains</span> <span class="token punctuation">(</span> pair <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">ListTile</span> <span class="token punctuation">(</span> title <span class="token punctuation">:</span> <span class="token function">Text</span> <span class="token punctuation">(</span> pair <span class="token punctuation">.</span> asPascalCase <span class="token punctuation">,</span> style <span class="token punctuation">:</span> _biggerFont <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> trailing <span class="token punctuation">:</span> <span class="token function">Icon</span> <span class="token punctuation">(</span> alreadySaved <span class="token operator">?</span> Icons <span class="token punctuation">.</span> favorite <span class="token punctuation">:</span> Icons <span class="token punctuation">.</span> favorite_border <span class="token punctuation">,</span> color <span class="token punctuation">:</span> alreadySaved <span class="token operator">?</span> Colors <span class="token punctuation">.</span> red <span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> onTap <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Add 9 lines from here...</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> alreadySaved <span class="token punctuation">)</span> <span class="token punctuation">{</span> _saved <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> pair <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> _saved <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> pair <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token comment">// ... to here.</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span class="token keyword">class</span> <span class="token class-name">RandomWordsState</span> <span class="token keyword">extends</span> <span class="token class-name">State</span> <span class="token operator"><</span> RandomWords <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span> <span class="token punctuation">(</span> BuildContext context <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">Scaffold</span> <span class="token punctuation">(</span> appBar <span class="token punctuation">:</span> <span class="token function">AppBar</span> <span class="token punctuation">(</span> title <span class="token punctuation">:</span> <span class="token function">Text</span> <span class="token punctuation">(</span> <span class="token string">'Startup Name Generator'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> actions <span class="token punctuation">:</span> <span class="token operator"><</span> Widget <span class="token operator">></span> <span class="token punctuation">[</span> <span class="token comment">// Add 3 lines from here...</span> <span class="token function">IconButton</span> <span class="token punctuation">(</span> icon <span class="token punctuation">:</span> <span class="token function">Icon</span> <span class="token punctuation">(</span> Icons <span class="token punctuation">.</span> list <span class="token punctuation">)</span> <span class="token punctuation">,</span> onPressed <span class="token punctuation">:</span> _pushSaved <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token comment">// ... to here.</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> body <span class="token punctuation">:</span> <span class="token function">_buildSuggestions</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">}</span> |
- Add the _pushSaved () function to the RandomWordsState class.
1 2 |
<span class="token keyword">void</span> <span class="token function">_pushSaved</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
- 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.
1 2 3 4 5 |
<span class="token keyword">void</span> <span class="token function">_pushSaved</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> Navigator <span class="token punctuation">.</span> <span class="token function">of</span> <span class="token punctuation">(</span> context <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<span class="token keyword">void</span> <span class="token function">_pushSaved</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> Navigator <span class="token punctuation">.</span> <span class="token function">of</span> <span class="token punctuation">(</span> context <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> MaterialPageRoute <span class="token operator"><</span> <span class="token keyword">void</span> <span class="token operator">></span> <span class="token punctuation">(</span> <span class="token comment">// Add 20 lines from here...</span> builder <span class="token punctuation">:</span> <span class="token punctuation">(</span> BuildContext context <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> Iterable <span class="token operator"><</span> ListTile <span class="token operator">></span> tiles <span class="token operator">=</span> _saved <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> WordPair pair <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">ListTile</span> <span class="token punctuation">(</span> title <span class="token punctuation">:</span> <span class="token function">Text</span> <span class="token punctuation">(</span> pair <span class="token punctuation">.</span> asPascalCase <span class="token punctuation">,</span> style <span class="token punctuation">:</span> _biggerFont <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">final</span> List <span class="token operator"><</span> Widget <span class="token operator">></span> divided <span class="token operator">=</span> ListTile <span class="token punctuation">.</span> <span class="token function">divideTiles</span> <span class="token punctuation">(</span> context <span class="token punctuation">:</span> context <span class="token punctuation">,</span> tiles <span class="token punctuation">:</span> tiles <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toList</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// ... to here.</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<span class="token keyword">void</span> <span class="token function">_pushSaved</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> Navigator <span class="token punctuation">.</span> <span class="token function">of</span> <span class="token punctuation">(</span> context <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> MaterialPageRoute <span class="token operator"><</span> <span class="token keyword">void</span> <span class="token operator">></span> <span class="token punctuation">(</span> builder <span class="token punctuation">:</span> <span class="token punctuation">(</span> BuildContext context <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> Iterable <span class="token operator"><</span> ListTile <span class="token operator">></span> tiles <span class="token operator">=</span> _saved <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> WordPair pair <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">ListTile</span> <span class="token punctuation">(</span> title <span class="token punctuation">:</span> <span class="token function">Text</span> <span class="token punctuation">(</span> pair <span class="token punctuation">.</span> asPascalCase <span class="token punctuation">,</span> style <span class="token punctuation">:</span> _biggerFont <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">final</span> List <span class="token operator"><</span> Widget <span class="token operator">></span> divided <span class="token operator">=</span> ListTile <span class="token punctuation">.</span> <span class="token function">divideTiles</span> <span class="token punctuation">(</span> context <span class="token punctuation">:</span> context <span class="token punctuation">,</span> tiles <span class="token punctuation">:</span> tiles <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toList</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">Scaffold</span> <span class="token punctuation">(</span> <span class="token comment">// Add 6 lines from here...</span> appBar <span class="token punctuation">:</span> <span class="token function">AppBar</span> <span class="token punctuation">(</span> title <span class="token punctuation">:</span> <span class="token function">Text</span> <span class="token punctuation">(</span> <span class="token string">'Saved Suggestions'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> body <span class="token punctuation">:</span> <span class="token function">ListView</span> <span class="token punctuation">(</span> children <span class="token punctuation">:</span> divided <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ... to here.</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span> <span class="token punctuation">(</span> BuildContext context <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span> <span class="token punctuation">(</span> title <span class="token punctuation">:</span> <span class="token string">'Startup Name Generator'</span> <span class="token punctuation">,</span> theme <span class="token punctuation">:</span> <span class="token function">ThemeData</span> <span class="token punctuation">(</span> <span class="token comment">// Add the 3 lines from here... </span> primaryColor <span class="token punctuation">:</span> Colors <span class="token punctuation">.</span> white <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token comment">// ... to here.</span> home <span class="token punctuation">:</span> <span class="token function">RandomWords</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Hot reload. Now all background apps are white, including the appbar.
Thank you for reading my post