Your Second Flutter App

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

It's time for a challenge on Flutter widget creation. Currently, we have an app that has lots of different domains. It'd be nice for the user to navigate to a filter page and filter on all the courses that they want to see. Flutter is all about creating widgets. So this is a prime opportunity to test out your widget creation skills. Your challenge is to first pause the video and create a stateful widget filter page, and then customize it. So here's what I want you to do. First, create a new folder called filter in the UI folder. Next, create a file called filter_page.dart. In that file, the filter page stateful widget should have a Scaffold and an AppBar. The AppBar's title should have a text widget that uses our filter string from strings.dart. The body should have just a text widget that reads "Filter Page." Now, this is a big order, but if you followed along so far, I know that you can do it. Once I review the answer, we'll add the ability to navigate to it. So pause the video and give it your best shot. (upbeat music) How'd your challenge go? Don't worry if you got stuck, that's part of the process. But hey, if you managed to get it, well done. Let's go through it now together. Create a new folder called filter in the UI folder. Then create a new file called filter_page.dart. With the file open, create a new stateful widget by typing ST and selecting stateful widget. Give it the name "FilterPage." Next, select the stateful widget and press Command + . on Mac OS or Ctrl + . on Windows. Import the material library. Now, for the state class itself, update the build method to the following. Make sure to import strings.dart. And that's it. That was the challenge. Now that we have our page, let's actually call it. Open up rwcourses_app.dart. We will add an action to the AppBar. We'll make a button providing an icon. And then we'll trigger the navigation from the onPress property. Of course, import filter page. Now build and run or hot reload the app. You'll see the filter button. And when you tap it, you'll be taken to the new filter page. Nice work.