Your Second Flutter App

FilterPage is now working, but we’ve not done anything yet to actually filter courses. We’ll get that working in this episode. However, we’ll also notice a deficiency in our approach, and that will lead us into the next part of the course, on lifting state up in the app.

To get started, open your project in progress or download the sample project for this episode. Now run your app. Open the filter page and select a filter. Go back to the course page, and you’ll see that our course listings aren’t being filtered. Let’s give it a shot.

In the UI / courses, open up course_page.dart. Add a filterValue for the state of the page.

class _CoursesPageState extends State<CoursesPage> {
  int _filterValue = Constants.allFilter;

We’ll add a loadValue method that looks just like the one you added earlier on FilterPage. In fact, we’ll just copy we wrote. Open up filter_page.dart. Copy initState and paste it into course_page.dart. Do the same for loadValue.

Once pasted, make sure to import shared preferences.

import 'package:shared_preferences/shared_preferences.dart';

Now, in our call to the controller to fetchCourses, pass the new _filterVale property, so that we fetch courses for the currently selected filter.

future: _controller.fetchCourses(_filterValue),

Now restart the app. And now indeed I only see filters courses when the app starts up, so that’s great. But, if I go to the filter screen and filter to a different course type and then go back, the courses page does not update to show the newly selected filter.

We only are setting the state on CoursesPage when it first starts, and selecting a new filter on the FilterPage has no effect. This gets into the important topic of State Management on Flutter, which is the subject of the final part of the course.