174 Start

lib/screens/filters.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+
+// import 'package:flutter_navigation/screens/tabs.dart';
+// import 'package:flutter_navigation/widgets/main_drawer.dart';
+
+class FiltersScreen extends StatefulWidget {
+  const FiltersScreen({
+    super.key,
+  });
+
+  @override
+  State<StatefulWidget> createState() {
+    return _FiltersScreenState();
+  }
+}
+
+class _FiltersScreenState extends State<FiltersScreen> {
+  var _glutenFilterSet = false;
+  var _lactoseFilterSet = false;
+  var _vegetarianFilterSet = false;
+  var _veganFilterSet = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Your Filters'),
+      ),
+      // drawer: MainDrawer(
+      //   onSelectScreen: (identifier) {
+      //     Navigator.of(context).pop();
+      //     if (identifier == 'meals') {
+      //       Navigator.of(context).pushReplacement(
+      //         MaterialPageRoute(
+      //           builder: (ctx) => const TabsScreen(),
+      //         ),
+      //       );
+      //     }
+      //   },
+      // ),
+      body: Column(children: [
+        SwitchListTile(
+          value: _glutenFilterSet,
+          onChanged: (isChecked) {
+            setState(() {
+              _glutenFilterSet = isChecked;
+            });
+          },
+          title: Text(
+            'Gluten-free',
+            style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                  color: Theme.of(context).colorScheme.onBackground,
+                ),
+          ),
+          subtitle: Text(
+            'Only include gluten-free meals.',
+            style: Theme.of(context).textTheme.labelMedium!.copyWith(
+                  color: Theme.of(context).colorScheme.onBackground,
+                ),
+          ),
+          activeColor: Theme.of(context).colorScheme.tertiary,
+          contentPadding: const EdgeInsets.only(left: 34, right: 22),
+        ),
+        SwitchListTile(
+          value: _lactoseFilterSet,
+          onChanged: (isChecked) {
+            setState(() {
+              _lactoseFilterSet = isChecked;
+            });
+          },
+          title: Text(
+            'Lactose-free',
+            style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                  color: Theme.of(context).colorScheme.onBackground,
+                ),
+          ),
+          subtitle: Text(
+            'Only include lactose-free meals.',
+            style: Theme.of(context).textTheme.labelMedium!.copyWith(
+                  color: Theme.of(context).colorScheme.onBackground,
+                ),
+          ),
+          activeColor: Theme.of(context).colorScheme.tertiary,
+          contentPadding: const EdgeInsets.only(left: 34, right: 22),
+        ),
+        SwitchListTile(
+          value: _vegetarianFilterSet,
+          onChanged: (isChecked) {
+            setState(() {
+              _vegetarianFilterSet = isChecked;
+            });
+          },
+          title: Text(
+            'Vegetarian',
+            style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                  color: Theme.of(context).colorScheme.onBackground,
+                ),
+          ),
+          subtitle: Text(
+            'Only include vegetarian meals.',
+            style: Theme.of(context).textTheme.labelMedium!.copyWith(
+                  color: Theme.of(context).colorScheme.onBackground,
+                ),
+          ),
+          activeColor: Theme.of(context).colorScheme.tertiary,
+          contentPadding: const EdgeInsets.only(left: 34, right: 22),
+        ),
+        SwitchListTile(
+          value: _veganFilterSet,
+          onChanged: (isChecked) {
+            setState(() {
+              _veganFilterSet = isChecked;
+            });
+          },
+          title: Text(
+            'Vegan',
+            style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                  color: Theme.of(context).colorScheme.onBackground,
+                ),
+          ),
+          subtitle: Text(
+            'Only include vegan meals.',
+            style: Theme.of(context).textTheme.labelMedium!.copyWith(
+                  color: Theme.of(context).colorScheme.onBackground,
+                ),
+          ),
+          activeColor: Theme.of(context).colorScheme.tertiary,
+          contentPadding: const EdgeInsets.only(left: 34, right: 22),
+        ),
+      ]),
+    );
+  }
+}

lib/screens/tabs.dart

@@ -4,6 +4,7 @@ import 'package:flutter_navigation/screens/meals.dart';
 import 'package:flutter_navigation/widgets/main_drawer.dart';
 
 import '../models/meal.dart';
+import 'filters.dart';
 
 class TabsScreen extends StatefulWidget {
   const TabsScreen({super.key});
@@ -45,6 +46,17 @@ class _TabsScreenState extends State<TabsScreen> {
     });
   }
 
+  void _setScreen(String identifier) {
+    Navigator.of(context).pop();
+    if (identifier == 'filters') {
+      Navigator.of(context).push(
+        MaterialPageRoute(
+          builder: (ctx) => const FiltersScreen(),
+        ),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     Widget activePage = CategoriesScreen(
@@ -64,7 +76,9 @@ class _TabsScreenState extends State<TabsScreen> {
       appBar: AppBar(
         title: Text(activePageTitle),
       ),
-      drawer: const MainDrawer(),
+      drawer: MainDrawer(
+        onSelectScreen: _setScreen,
+      ),
       body: activePage,
       bottomNavigationBar: BottomNavigationBar(
         onTap: _selectPage,

lib/widgets/main_drawer.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 
 class MainDrawer extends StatelessWidget {
-  const MainDrawer({super.key});
+  const MainDrawer({ super.key, required this .onSelectScreen,});
+
+  final void Function(String identifier) onSelectScreen;
 
   @override
   Widget build(BuildContext context) {
@@ -13,8 +15,12 @@ class MainDrawer extends StatelessWidget {
             decoration: BoxDecoration(
               gradient: LinearGradient(
                 colors: [
-                  Theme.of(context).colorScheme.primaryContainer,
+                  Theme
-                  Theme.of(context)
+                      .of(context)
+                      .colorScheme
+                      .primaryContainer,
+                  Theme
+                      .of(context)
                       .colorScheme
                       .primaryContainer
                       .withOpacity(0.8),
@@ -28,14 +34,24 @@ class MainDrawer extends StatelessWidget {
                 Icon(
                   Icons.fastfood,
                   size: 48,
-                  color: Theme.of(context).colorScheme.primary,
+                  color: Theme
+                      .of(context)
+                      .colorScheme
+                      .primary,
                 ),
                 const SizedBox(width: 18),
                 Text(
                   'Cooking Up!',
-                  style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                  style: Theme
-                        color: Theme.of(context).colorScheme.primary,
+                      .of(context)
-                      ),
+                      .textTheme
+                      .titleLarge!
+                      .copyWith(
+                    color: Theme
+                        .of(context)
+                        .colorScheme
+                        .primary,
+                  ),
                 )
               ],
             ),
@@ -44,31 +60,55 @@ class MainDrawer extends StatelessWidget {
             leading: Icon(
               Icons.restaurant,
               size: 26,
-              color: Theme.of(context).colorScheme.onBackground,
+              color: Theme
+                  .of(context)
+                  .colorScheme
+                  .onBackground,
             ),
             title: Text(
               'Meals',
-              style: Theme.of(context).textTheme.titleSmall!.copyWith(
+              style: Theme
-                color: Theme.of(context).colorScheme.onBackground,
+                  .of(context)
+                  .textTheme
+                  .titleSmall!
+                  .copyWith(
+                color: Theme
+                    .of(context)
+                    .colorScheme
+                    .onBackground,
                 fontSize: 24,
               ),
             ),
-            onTap: () {},
+            onTap: () {
+              onSelectScreen('meals');
+            },
           ),
           ListTile(
             leading: Icon(
               Icons.settings,
               size: 26,
-              color: Theme.of(context).colorScheme.onBackground,
+              color: Theme
+                  .of(context)
+                  .colorScheme
+                  .onBackground,
             ),
             title: Text(
               'Filters',
-              style: Theme.of(context).textTheme.titleSmall!.copyWith(
+              style: Theme
-                color: Theme.of(context).colorScheme.onBackground,
+                  .of(context)
+                  .textTheme
+                  .titleSmall!
+                  .copyWith(
+                color: Theme
+                    .of(context)
+                    .colorScheme
+                    .onBackground,
                 fontSize: 24,
               ),
             ),
-            onTap: () {},
+            onTap: () {
+              onSelectScreen('filters');
+            },
           ),
         ],
       ),