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

Next
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 a an app that has lots of different domains. It’d be nice for the user to navigate to a filter page and to filter out all the courses.

class FilterPage extends StatefulWidget {
  const FilterPage({ Key? key }) : super(key: key);

  @override
  _FilterPageState createState() => _FilterPageState();
}

class _FilterPageState extends State<FilterPage> {
  @override
  Widget build(BuildContext context) {
    return Container(

    );
  }
}
class _FilterPageState extends State<FilterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Strings.filter),
      ),
      body: const Text('Filter'),
    );
  }
}
import '../../strings.dart';
  appBar: AppBar(
    title: Text(Strings.appTitle),
    actions: <Widget>[
      IconButton(
        icon: const Icon(Icons.filter_list),
        onPressed: () => Navigator.of(context).push<MaterialPageRoute>(
            MaterialPageRoute(builder: (_) => const FilterPage())),
      )
    ],
  ),
import 'ui/filter/filter_page.dart';