Your Second Flutter App

Nov 30 2021 · Dart 2.13, Flutter 2.2.3, Visual Studio Code

Part 3: Navigate & Animate

20. Challenge: Add a Filter Screen

Episode complete

Play next episode

About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 19. Complete the Course Details Page Next episode: 21. Use a Hero Animation

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

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

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.