166 Start

lib/main.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_navigation/screens/tabs.dart';
 
 import 'package:google_fonts/google_fonts.dart';
-import 'package:flutter_navigation/screens/categories.dart';
 
 final theme = ThemeData(
   useMaterial3: true,
@@ -23,7 +23,7 @@ class App extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       theme: theme,
-      home: const CategoriesScreen(),
+      home: const TabsScreen(),
     );
   }
 }

lib/screens/categories.dart

@@ -23,11 +23,7 @@ class CategoriesScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Pick your category'),
-      ),
-      body: GridView(
+    return GridView(
         padding: const EdgeInsets.all(24),
         gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
           crossAxisCount: 2,
@@ -44,7 +40,6 @@ class CategoriesScreen extends StatelessWidget {
               },
             )
         ],
-      ),
-    );
+      );
   }
 }

lib/screens/meals.dart

@@ -5,9 +5,13 @@ import 'package:flutter_navigation/widgets/meal_item.dart';
 import '../models/meal.dart';
 
 class MealsScreen extends StatelessWidget {
-  const MealsScreen({super.key, required this.title, required this.meals});
+  const MealsScreen({
+    super.key,
+    this.title,
+    required this.meals,
+  });
 
-  final String title;
+  final String? title;
   final List<Meal> meals;
 
   void selectMeal(BuildContext context, Meal meal) {
@@ -51,9 +55,14 @@ class MealsScreen extends StatelessWidget {
             }),
       );
     }
+
+    if (title == null) {
+      return content;
+    }
+
     return Scaffold(
       appBar: AppBar(
-        title: Text(title),
+        title: Text(title!),
       ),
       body: content,
     );

lib/screens/tabs.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_navigation/screens/categories.dart';
+import 'package:flutter_navigation/screens/meals.dart';
+
+class TabsScreen extends StatefulWidget {
+  const TabsScreen({super.key});
+
+  @override
+  State<StatefulWidget> createState() {
+    return _TabsScreenState();
+  }
+}
+
+class _TabsScreenState extends State<TabsScreen> {
+  int _selectedPageIndex = 0;
+
+  void _selectPage(int index) {
+    setState(() {
+      _selectedPageIndex = index;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Widget activePage = const CategoriesScreen();
+    var activePageTitle = 'Categories';
+
+    if (_selectedPageIndex == 1) {
+      activePage = const MealsScreen(meals: []);
+      activePageTitle = 'Your Favorites';
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(activePageTitle),
+      ),
+      body: activePage,
+      bottomNavigationBar: BottomNavigationBar(
+        onTap: _selectPage,
+        currentIndex: _selectedPageIndex,
+        items: const [
+          BottomNavigationBarItem(
+            icon: Icon(Icons.set_meal),
+            label: 'Categories',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.star),
+            label: 'Favorites',
+          ),
+        ],
+      ),
+    );
+  }
+}