bottom navigation bar

lib/home.dart

@@ -1,3 +1,4 @@
+import 'package:cradle/navigation.dart';
 import 'package:flutter/material.dart';
 
 import 'albumCard/albumCard.dart';
@@ -23,6 +24,14 @@ class MyHomePage extends StatefulWidget {
 class _MyHomePageState extends State<MyHomePage> {
   bool isCard = true;
 
+  int indexPage = 0;
+
+  callBack(int index) {
+    setState(() {
+      indexPage = index;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     // This method is rerun every time setState is called, for instance as done
@@ -92,9 +101,10 @@ class _MyHomePageState extends State<MyHomePage> {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.start,
           crossAxisAlignment: CrossAxisAlignment.start,
-          children: albumCards,
+          children: [albumCards, albumCards][indexPage],
         ),
       ),
+      bottomNavigationBar: Navigation(callBack: callBack),
     );
   }
 }

lib/navigation.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+class Navigation extends StatefulWidget {
+  int currentPageIndex = 0;
+  final Function callBack;
+
+  Navigation({super.key, required this.callBack});
+
+  @override
+  State<Navigation> createState() => _Navigation();
+}
+
+class _Navigation extends State<Navigation> {
+  @override
+  Widget build(BuildContext context) {
+    return NavigationBar(
+      labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
+      selectedIndex: widget.currentPageIndex,
+      onDestinationSelected: (int index) {
+        setState(() {
+          widget.currentPageIndex = index;
+          widget.callBack(index);
+        });
+      },
+      destinations: const <Widget>[
+        NavigationDestination(
+          selectedIcon: Icon(Icons.home),
+          icon: Icon(Icons.home_outlined),
+          label: 'Home',
+        ),
+        NavigationDestination(
+          selectedIcon: Icon(Icons.settings),
+          icon: Icon(Icons.settings_outlined),
+          label: 'Settings',
+        ),
+      ],
+    );
+  }
+}