3. Create a project

Create your first Flutter project

Launch Visual Studio Code and open the command palette (withF1 orCtrl+Shift+P orShift+Cmd+P). Start typing "flutter new". Select theFlutter: New Project command.

Next, selectApplication and then a folder in which to create your project. This could be your home directory, or something likeC:\src\.

Finally, name your project. Something likenamer_app ormy_awesome_namer.

Flutter now creates your project folder and VS Code opens it.

pubspec.yaml

name:namer_appdescription:"A new Flutter project."publish_to:"none"version:0.1.0environment:sdk:^3.9.0dependencies:flutter:sdk:flutterenglish_words:^4.0.0provider:^6.1.5dev_dependencies:flutter_test:sdk:flutterflutter_lints:^6.0.0flutter:uses-material-design:true

Thepubspec.yaml file specifies basic information about your app, such as its current version, its dependencies, and the assets with which it will ship.

analysis_options.yaml

include:package:flutter_lints/flutter.yamllinter:rules:avoid_print:falseprefer_const_constructors_in_immutables:falseprefer_const_constructors:falseprefer_const_literals_to_create_immutables:falseprefer_final_fields:falseunnecessary_breaks:trueuse_key_in_widget_constructors:false

This file determines how strict Flutter should be when analyzing your code. Since this is your first foray into Flutter, you're telling the analyzer to take it easy. You can always tune this later. In fact, as you get closer to publishing an actual production app, you will almost certainly want to make the analyzer stricter than this.

Finally, open themain.dart file under thelib/ directory.

Replace the contents of this file with the following:

lib/main.dart

import'package:english_words/english_words.dart';import'package:flutter/material.dart';import'package:provider/provider.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnChangeNotifierProvider(create:(context)=>MyAppState(),child:MaterialApp(title:'Namer App',theme:ThemeData(colorScheme:ColorScheme.fromSeed(seedColor:Colors.deepOrange),),home:MyHomePage(),),);}}classMyAppStateextendsChangeNotifier{varcurrent=WordPair.random();}classMyHomePageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){varappState=context.watch<MyAppState>();returnScaffold(body:Column(children:[Text('A random idea:'),Text(appState.current.asLowerCase)],),);}}

These 50 lines of code are the entirety of the app so far.

5. Make the app prettier

This is how the app looks at the moment.

Not great. The centerpiece of the app—the randomly generated pair of words—should be more visible. It is, after all, the main reason our users are using this app! Also, the app contents are weirdly off-center, and the whole app is boringly black & white.

This section addresses these issues by working on the app's design. The end goal for this section is something like the following:

Extract a widget

The line responsible for showing the current word pair looks like this now:Text(appState.current.asLowerCase). To change it into something more complex, it's a good idea to extract this line into a separate widget. Having separate widgets for separate logical parts of your UI is an important way of managing complexity in Flutter.

Flutter provides a refactoring helper for extracting widgets but before you use it, make sure that the line being extracted only accesses what it needs. Right now, the line accessesappState, but really only needs to know what the current word pair is.

For that reason, rewrite theMyHomePage widget as follows:

lib/main.dart

//...classMyHomePageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){varappState=context.watch<MyAppState>();varpair=appState.current;//←Addthis.returnScaffold(body:Column(children:[Text('A random AWESOME idea:'),Text(pair.asLowerCase),//←Changetothis.ElevatedButton(onPressed:(){appState.getNext();},child:Text('Next'),),],),);}}//...

Nice. TheText widget no longer refers to the wholeappState.

Now, call up theRefactor menu. In VS Code, you do this in one of two ways:

1. Right-click the piece of code you want to refactor (Text in this case) and selectRefactor... from the drop-down menu,

OR

2. Move your cursor to the piece code you want to refactor (Text, in this case), and pressCtrl+. (Win/Linux) orCmd+. (Mac).

In theRefactor menu, selectExtract Widget. Assign a name, such asBigCard, and clickEnter.

This automatically creates a new class,BigCard, at the end of the current file. The class looks something like the following:

lib/main.dart

//...classBigCardextendsStatelessWidget{constBigCard({super.key,requiredthis.pair});finalWordPairpair;@overrideWidgetbuild(BuildContextcontext){returnText(pair.asLowerCase);}}//...

Notice how the app keeps working even through this refactoring.

Add a Card

Now it's time to make this new widget into the bold piece of UI we envisioned at the beginning of this section.

Find theBigCard class and thebuild() method within it. As before, call up theRefactor menu on theText widget. However, this time you aren't going to extract the widget.

Instead, selectWrap with Padding. This creates a new parent widget around theText widget calledPadding. After saving, you'll see that the random word already has more breathing room.

Increase the padding from the default value of8.0. For example, use something like20 for roomier padding.

lib/main.dart

//...classBigCardextendsStatelessWidget{constBigCard({super.key,requiredthis.pair});finalWordPairpair;@overrideWidgetbuild(BuildContextcontext){returnCard(child:Padding(padding:constEdgeInsets.all(20),child:Text(pair.asLowerCase),),);}}//...

The app will now look something like this:

Theme and style

To make the card stand out more, paint it with a richer color. And because it's always a good idea to keep a consistent color scheme, use the app'sTheme to choose the color.

Make the following changes toBigCard'sbuild() method.

lib/main.dart

//...@overrideWidgetbuild(BuildContextcontext){finaltheme=Theme.of(context);//←Addthis.returnCard(color:theme.colorScheme.primary,//←Andalsothis.child:Padding(padding:constEdgeInsets.all(20),child:Text(pair.asLowerCase),),);}//...

These two new lines do a lot of work:

• First, the code requests the app's current theme withTheme.of(context).
• Then, the code defines the card's color to be the same as the theme'scolorScheme property. The color scheme contains many colors, andprimary is the most prominent, defining color of the app.

The card is now painted with the app's primary color:

You can change this color, and the color scheme of the whole app, by scrolling up toMyApp and changing the seed color for theColorScheme there.

lib/main.dart

//...@overrideWidgetbuild(BuildContextcontext){finaltheme=Theme.of(context);//↓Addthis.finalstyle=theme.textTheme.displayMedium!.copyWith(color:theme.colorScheme.onPrimary,);returnCard(color:theme.colorScheme.primary,child:Padding(padding:constEdgeInsets.all(20),//↓Changethisline.child:Text(pair.asLowerCase,style:style),),);}//...

What's behind this change:

• By usingtheme.textTheme, you access the app's font theme. This class includes members such asbodyMedium (for standard text of medium size),caption (for captions of images), orheadlineLarge (for large headlines).
• ThedisplayMedium property is a large style meant for display text. The worddisplay is used in the typographic sense here, such as indisplay typeface. The documentation fordisplayMedium says that "display styles are reserved for short, important text"—exactly our use case.
• The theme'sdisplayMedium property could theoretically benull. Dart, the programming language in which you're writing this app, is null-safe, so it won't let you call methods of objects that are potentiallynull. In this case, though, you can use the! operator ("bang operator") to assure Dart you know what you're doing. (displayMedium is definitelynot null in this case. The reason we know this is beyond the scope of this codelab, though.)
• CallingcopyWith() ondisplayMedium returns acopy of the text stylewith the changes you define. In this case, you're only changing the text's color.
• To get the new color, you once again access the app's theme. The color scheme'sonPrimary property defines a color that is a good fit for useon the app'sprimary color.

The app should now look something like the following:

If you feel like it, change the card further. Here are some ideas:

• copyWith() lets you change a lot more about the text style than just the color. To get the full list of properties you can change, put your cursor anywhere insidecopyWith()'s parentheses, and hitCtrl+Shift+Space (Win/Linux) orCmd+Shift+Space (Mac).
• Similarly, you can change more about theCard widget. For example, you can enlarge the card's shadow by increasing theelevation parameter's value.
• Try experimenting with colors. Apart fromtheme.colorScheme.primary, there's also.secondary,.surface, and a myriad of others. All of these colors have theironPrimary equivalents.

Improve accessibility

Flutter makes apps accessible by default. For example, every Flutter app correctly surfaces all text and interactive elements in the app to screen readers such as TalkBack and VoiceOver.

Sometimes, though, some work is required. In the case of this app, the screen reader might have problems pronouncing some generated word pairs. While humans don't have problems identifying the two words incheaphead, a screen reader might pronounce theph in the middle of the word asf.

A solution is to replacepair.asLowerCase with"${pair.first} ${pair.second}". The latter uses string interpolation to create a string (such as"cheap head") from the two words contained inpair. Using two separate words instead of a compound word makes sure that screen readers identify them appropriately, and provides a better experience to visually impaired users.

However, you might want to keep the visual simplicity ofpair.asLowerCase. UseText'ssemanticsLabel property to override the visual content of the text widget with a semantic content that is more appropriate for screen readers:

lib/main.dart

//...@overrideWidgetbuild(BuildContextcontext){finaltheme=Theme.of(context);finalstyle=theme.textTheme.displayMedium!.copyWith(color:theme.colorScheme.onPrimary,);returnCard(color:theme.colorScheme.primary,child:Padding(padding:constEdgeInsets.all(20),//↓Makethefollowingchange.child:Text(pair.asLowerCase,style:style,semanticsLabel:"${pair.first} ${pair.second}",),),);}//...

Now, screen readers correctly pronounce each generated word pair, yet the UI stays the same. Try this in action byusing a screen reader on your device.

Tip: Flutter has a variety of tools for accessibility, including automated tests and theSemantics widget. Learn more on Flutter documentation'sAccessibility page.

Center the UI

Now that the random word pair is presented with enough visual flair, it's time to place it in the center of the app's window/screen.

First, remember thatBigCard is part of aColumn. By default, columns lump their children to the top, but we can override this. Go toMyHomePage'sbuild() method, and make the following change:

lib/main.dart

//...classMyHomePageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){varappState=context.watch<MyAppState>();varpair=appState.current;returnScaffold(body:Column(mainAxisAlignment:MainAxisAlignment.center,//←Addthis.children:[Text('A random AWESOME idea:'),BigCard(pair:pair),ElevatedButton(onPressed:(){appState.getNext();},child:Text('Next'),),],),);}}//...

This centers the children inside theColumn along its main (vertical) axis.

The children are already centered along the column'scross axis (in other words, they are already centered horizontally). But theColumnitself isn't centered inside theScaffold. We can verify this by using theWidget Inspector.

The Widget Inspector itself is beyond the scope of this codelab, but you can see that when theColumn is highlighted, it doesn't take up the whole width of the app. It only takes up as much horizontal space as its children need.

You can just center the column itself. Put your cursor ontoColumn, call up theRefactor menu (withCtrl+. orCmd+.), and selectWrap with Center.

The app should now look something like the following:

If you want, you can tweak this some more.

• You can remove theText widget aboveBigCard. It could be argued that the descriptive text ("A random AWESOME idea:") isn't needed anymore since the UI makes sense even without it. And it's cleaner that way.
• You can also add aSizedBox(height: 10) widget betweenBigCard andElevatedButton. This way, there's a bit more separation between the two widgets. TheSizedBox widget just takes space and doesn't render anything by itself. It's commonly used to create visual "gaps".

With the optional changes,MyHomePage contains this code:

lib/main.dart

//...classMyHomePageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){varappState=context.watch<MyAppState>();varpair=appState.current;returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[BigCard(pair:pair),SizedBox(height:10),ElevatedButton(onPressed:(){appState.getNext();},child:Text('Next'),),],),),);}}//...

And the app looks like the following:

In the next section, you'll add the ability to favorite (or ‘like') generated words.

6. Add functionality

The app works, and occasionally even provides interesting word pairs. But whenever the user clicksNext, each word pair disappears forever. It would be better to have a way of "remembering" the best suggestions: such as a ‘Like' button.

Add the business logic

Scroll toMyAppState and add the following code:

lib/main.dart

//...classMyAppStateextendsChangeNotifier{varcurrent=WordPair.random();voidgetNext(){current=WordPair.random();notifyListeners();}//↓Addthecodebelow.varfavorites=<WordPair>[];voidtoggleFavorite(){if(favorites.contains(current)){favorites.remove(current);}else{favorites.add(current);}notifyListeners();}}//...

Examine the changes:

• You added a new property toMyAppState calledfavorites. This property is initialized with an empty list:[].
• You also specified that the list can only ever contain word pairs:<WordPair>[], usinggenerics. This helps make your app more robust—Dart refuses to evenrun your app if you try to add anything other thanWordPair to it. In turn, you can use thefavorites list knowing that there can never be any unwanted objects (likenull) hiding in there.

lib/main.dart

//...classMyHomePageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){varappState=context.watch<MyAppState>();varpair=appState.current;returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[BigCard(pair:pair),SizedBox(height:10),Row(mainAxisSize:MainAxisSize.min,//←Addthis.children:[ElevatedButton(onPressed:(){appState.getNext();},child:Text('Next'),),],),],),),);}}//...

The UI is back to where it was before.

Next, add theLike button and connect it totoggleFavorite(). For a challenge, first try to do this by yourself, without looking at the code block below.

It's okay if you don't do it exactly the same way as it's done below. In fact, don't worry about the heart icon unless you really want a major challenge.

It's also completely okay to fail—this is your first hour with Flutter, after all.

Here's one way to add the second button toMyHomePage. This time, use theElevatedButton.icon() constructor to create a button with an icon. And at the top of thebuild method, choose the appropriate icon depending on whether the current word pair is already in favorites. Also, note the use ofSizedBox again, to keep the two buttons a bit apart.

lib/main.dart

//...classMyHomePageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){varappState=context.watch<MyAppState>();varpair=appState.current;//↓Addthis.IconDataicon;if(appState.favorites.contains(pair)){icon=Icons.favorite;}else{icon=Icons.favorite_border;}returnScaffold(body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[BigCard(pair:pair),SizedBox(height:10),Row(mainAxisSize:MainAxisSize.min,children:[//↓Andthis.ElevatedButton.icon(onPressed:(){appState.toggleFavorite();},icon:Icon(icon),label:Text('Like'),),SizedBox(width:10),ElevatedButton(onPressed:(){appState.getNext();},child:Text('Next'),),],),],),),);}}//...

The app should look as follows:

Unfortunately, the user can'tsee the favorites. It's time to add a whole separate screen to our app. See you in the next section!

7. Add navigation rail

Most apps can't fit everything into a single screen. This particular app probably could, but for didactic purposes, you are going to create a separate screen for the user's favorites. To switch between the two screens, you are going to implement your firstStatefulWidget.

To get to the meat of this step as soon as possible, splitMyHomePage into 2 separate widgets.

Select all ofMyHomePage, delete it, and replace with the following code:

lib/main.dart

//...classMyHomePageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Row(children:[SafeArea(child:NavigationRail(extended:false,destinations:[NavigationRailDestination(icon:Icon(Icons.home),label:Text('Home'),),NavigationRailDestination(icon:Icon(Icons.favorite),label:Text('Favorites'),),],selectedIndex:0,onDestinationSelected:(value){print('selected: $value');},),),Expanded(child:Container(color:Theme.of(context).colorScheme.primaryContainer,child:GeneratorPage(),),),],),);}}classGeneratorPageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){varappState=context.watch<MyAppState>();varpair=appState.current;IconDataicon;if(appState.favorites.contains(pair)){icon=Icons.favorite;}else{icon=Icons.favorite_border;}returnCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[BigCard(pair:pair),SizedBox(height:10),Row(mainAxisSize:MainAxisSize.min,children:[ElevatedButton.icon(onPressed:(){appState.toggleFavorite();},icon:Icon(icon),label:Text('Like'),),SizedBox(width:10),ElevatedButton(onPressed:(){appState.getNext();},child:Text('Next'),),],),],),);}}//...

When saved, you'll see that the visual side of the UI is ready—but it doesn't work. Clicking ♥︎ (the heart) in the navigation rail does nothing.

Examine the changes.

• First, notice that the entire contents ofMyHomePage is extracted into a new widget,GeneratorPage. The only part of the oldMyHomePage widget that didn't get extracted isScaffold.
• The newMyHomePage contains aRow with two children. The first widget isSafeArea, and the second is anExpanded widget.
• TheSafeArea ensures that its child is not obscured by a hardware notch or a status bar. In this app, the widget wraps aroundNavigationRail to prevent the navigation buttons from being obscured by a mobile status bar, for example.
• You can change theextended: false line inNavigationRail totrue. This shows the labels next to the icons. In a future step, you will learn how to do this automatically when the app has enough horizontal space.
• The navigation rail has two destinations (Home andFavorites), with their respective icons and labels. It also defines the currentselectedIndex. A selected index of zero selects the first destination, a selected index of one selects the second destination, and so on. For now, it's hard coded to zero.
• The navigation rail also defines what happens when the user selects one of the destinations withonDestinationSelected. Right now, the app merely outputs the requested index value withprint().
• The second child of theRow is theExpanded widget. Expanded widgets are extremely useful in rows and columns—they let you express layouts where some children take only as much space as they need (SafeArea, in this case) and other widgets should take as much of the remaining room as possible (Expanded, in this case). One way to think aboutExpanded widgets is that they are "greedy". If you want to get a better feel of the role of this widget, try wrapping theSafeArea widget with anotherExpanded. The resulting layout looks something like this:

• TwoExpanded widgets split all the available horizontal space between themselves, even though the navigation rail only really needed a little slice on the left.
• Inside theExpanded widget, there's a coloredContainer, and inside the container, theGeneratorPage.

Stateless versus stateful widgets

Until now,MyAppState covered all your state needs. That's why all the widgets you have written so far are stateless. They don't contain any mutable state of their own. None of the widgets can changeitself—they must go throughMyAppState.

This is about to change.

You need some way to hold the value of the navigation rail'sselectedIndex. You also want to be able to change this value from within theonDestinationSelected callback.

Youcould addselectedIndex as yet another property ofMyAppState. And it would work. But you can imagine that the app state would quickly grow beyond reason if every widget stored its values in it.

Some state is only relevant to a single widget, so it should stay with that widget.

Enter theStatefulWidget, a type of widget that hasState. First, convertMyHomePage to a stateful widget.

Place your cursor on the first line ofMyHomePage (the one that starts withclass MyHomePage...), and call up theRefactor menu usingCtrl+. orCmd+.. Then, selectConvert to StatefulWidget.

The IDE creates a new class for you,_MyHomePageState. This class extendsState, and can therefore manage its own values. (It can changeitself.) Also notice that thebuild method from the old, stateless widget has moved to the_MyHomePageState (instead of staying in the widget). It was moved verbatim — nothing inside thebuild method changed. It now merely lives somewhere else.

The underscore (_) at the start of_MyHomePageState makes that class private and is enforced by the compiler. If you want to know more about privacy in Dart, and other topics, read theLanguage Tour.

setState

The new stateful widget only needs to track one variable:selectedIndex. Make the following 3 changes to_MyHomePageState:

lib/main.dart

//...class_MyHomePageStateextendsState<MyHomePage>{varselectedIndex=0;//←Addthisproperty.@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Row(children:[SafeArea(child:NavigationRail(extended:false,destinations:[NavigationRailDestination(icon:Icon(Icons.home),label:Text('Home'),),NavigationRailDestination(icon:Icon(Icons.favorite),label:Text('Favorites'),),],selectedIndex:selectedIndex,//←Changetothis.onDestinationSelected:(value){//↓Replaceprintwiththis.setState((){selectedIndex=value;});},),),Expanded(child:Container(color:Theme.of(context).colorScheme.primaryContainer,child:GeneratorPage(),),),],),);}}//...

Examine the changes:

1. You introduce a new variable,selectedIndex, and initialize it to0.
2. You use this new variable in theNavigationRail definition instead of the hard-coded0 that was there until now.
3. When theonDestinationSelected callback is called, instead of merely printing the new value to console, you assign it toselectedIndex inside asetState() call. This call is similar to thenotifyListeners() method used previously—it makes sure that the UI updates.

The navigation rail now responds to user interaction. But the expanded area on the right stays the same. That's because the code isn't usingselectedIndex to determine what screen displays.

Use selectedIndex

Place the following code at the top of_MyHomePageState'sbuild method, just beforereturn Scaffold:

lib/main.dart

// ...Widgetpage;switch(selectedIndex){case0:page=GeneratorPage();break;case1:page=Placeholder();break;default:throwUnimplementedError('nowidgetfor$selectedIndex');}// ...

Examine this piece of code:

1. The code declares a new variable,page, of the typeWidget.
2. Then, a switch statement assigns a screen topage, according to the current value inselectedIndex.
3. Since there's noFavoritesPage yet, usePlaceholder; a handy widget that draws a crossed rectangle wherever you place it, marking that part of the UI as unfinished.

4. Applying thefail-fast principle, the switch statement also makes sure to throw an error ifselectedIndex is neither 0 or 1. This helps prevent bugs down the line. If you ever add a new destination to the navigation rail and forget to update this code, the program crashes in development (as opposed to letting you guess why things don't work, or letting you publish a buggy code into production).

Now thatpage contains the widget you want to show on the right, you can probably guess what other change is needed.

Here's_MyHomePageState after that single remaining change:

lib/main.dart

//...class_MyHomePageStateextendsState<MyHomePage>{varselectedIndex=0;@overrideWidgetbuild(BuildContextcontext){Widgetpage;switch(selectedIndex){case0:page=GeneratorPage();break;case1:page=Placeholder();break;default:throwUnimplementedError('no widget for $selectedIndex');}returnScaffold(body:Row(children:[SafeArea(child:NavigationRail(extended:false,destinations:[NavigationRailDestination(icon:Icon(Icons.home),label:Text('Home'),),NavigationRailDestination(icon:Icon(Icons.favorite),label:Text('Favorites'),),],selectedIndex:selectedIndex,onDestinationSelected:(value){setState((){selectedIndex=value;});},),),Expanded(child:Container(color:Theme.of(context).colorScheme.primaryContainer,child:page,//←Here.),),],),);}}//...

The app now switches between ourGeneratorPage and the placeholder that will soon become theFavorites page.

Responsiveness

Next, make the navigation rail responsive. That is to say, make it automatically show the labels (usingextended: true) when there's enough room for them.

Flutter provides several widgets that help you make your appsautomatically responsive. For example,Wrap is a widget similar toRow orColumn that automatically wraps children to the next "line" (called "run") when there isn't enough vertical or horizontal space. There'sFittedBox, a widget that automatically fits its child into available space according to your specifications.

ButNavigationRail doesn'tautomatically show labels when there's enough space because it can't know whatis enough space in every context. It's up to you, the developer, to make that call.

Say you decide to show labels only ifMyHomePage is at least 600 pixels wide.

lib/main.dart

//...class_MyHomePageStateextendsState<MyHomePage>{varselectedIndex=0;@overrideWidgetbuild(BuildContextcontext){Widgetpage;switch(selectedIndex){case0:page=GeneratorPage();break;case1:page=Placeholder();break;default:throwUnimplementedError('no widget for $selectedIndex');}returnLayoutBuilder(builder:(context,constraints){returnScaffold(body:Row(children:[SafeArea(child:NavigationRail(extended:constraints.maxWidth>=600,//←Here.destinations:[NavigationRailDestination(icon:Icon(Icons.home),label:Text('Home'),),NavigationRailDestination(icon:Icon(Icons.favorite),label:Text('Favorites'),),],selectedIndex:selectedIndex,onDestinationSelected:(value){setState((){selectedIndex=value;});},),),Expanded(child:Container(color:Theme.of(context).colorScheme.primaryContainer,child:page,),),],),);});}}//...

Now, your app responds to its environment, such as screen size, orientation, and platform! In other words, it's responsive!.

The only work that remains is to replace thatPlaceholder with an actualFavorites screen. That's covered in the next section.

8. Add a new page

Remember thePlaceholder widget we used instead of theFavorites page?

It's time to fix this.

If you feel adventurous, try to do this step by yourself. Your goal is to show the list offavorites in a new stateless widget,FavoritesPage, and then show that widget instead of thePlaceholder.

Here are a few pointers:

• When you want aColumn that scrolls, use theListView widget.
• Remember, access theMyAppState instance from any widget usingcontext.watch<MyAppState>().
• If you also want to try a new widget,ListTile has properties liketitle (generally for text),leading (for icons or avatars) andonTap (for interactions). However, you can achieve similar effects with the widgets you already know.
• Dart allows usingfor loops inside collection literals. For example, ifmessages contains a list of strings, you can have code like the following:

On the other hand, if you're more familiar with functional programming, Dart also lets you write code likemessages.map((m) => Text(m)).toList(). And, of course, you can always create a list of widgets and imperatively add to it inside thebuild method.

The advantage of adding theFavorites page yourself is that you learn more by making your own decisions. The disadvantage is that you might run into trouble that you aren't yet able to solve by yourself. Remember: failing is okay, and is one of the most important elements of learning. Nobody expects you to nail Flutter development in your first hour, and neither should you.

What follows is justone way to implement the favorites page. How it's implemented will (hopefully) inspire you to play with the code—improve the UI and make it your own.

Here's the newFavoritesPage class:

lib/main.dart

//...classFavoritesPageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){varappState=context.watch<MyAppState>();if(appState.favorites.isEmpty){returnCenter(child:Text('No favorites yet.'),);}returnListView(children:[Padding(padding:constEdgeInsets.all(20),child:Text('You have ''${appState.favorites.length} favorites:'),),for(varpairinappState.favorites)ListTile(leading:Icon(Icons.favorite),title:Text(pair.asLowerCase),),],);}}

Here's what the widget does:

• It gets the current state of the app.
• If the list of favorites is empty, it shows a centered message:No favorites yet.
• Otherwise, it shows a (scrollable) list.
• The list starts with a summary (for example,You have 5 favorites.).
• The code then iterates through all the favorites, and constructs aListTile widget for each one.

All that remains now is to replace thePlaceholder widget with aFavoritesPage. And voilá!

You can get the final code of this app in thecodelab repo on GitHub.

9. Next steps

Congratulations!

Look at you! You took a non-functional scaffold with aColumn and twoText widgets, and made it into a responsive, delightful little app.

What we've covered

• The basics of how Flutter works
• Creating layouts in Flutter
• Connecting user interactions (like button presses) to app behavior
• Keeping your Flutter code organized
• Making your app responsive
• Achieving a consistent look & feel of your app

What next?

• Experiment more with the app you wrote during this lab.
• Look at the code ofthis advanced version of the same app, to see how you can add animated lists, gradients, cross-fades, and more.

• Follow your learning journey by going toflutter.dev/learn.