Added animation to the bottom navigation bar

zytact · Apr 2, 2020 · 1015b72 · 1015b72
1 parent 8b19325
commit 1015b72
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/lib/home.dart b/lib/home.dart
@@ -4,6 +4,7 @@ import 'CompletedPage.dart';
 import 'DroppedPage.dart';
 import 'PlantoWatchPage.dart';
 import 'WatchingPage.dart';
+import 'package:curved_navigation_bar/curved_navigation_bar.dart';
 
 class HomePage extends StatefulWidget {
   @override
@@ -20,20 +21,35 @@ class _HomePageState extends State<HomePage> {
       DroppedPage(),
       PlantoWatchPage()
   ];
+  List<Color> color = [
+    Colors.green,
+    Colors.blue,
+    Colors.greenAccent,
+    Colors.red,
+    Colors.grey
+
+  ];
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: tabs[_currentIndex],
-      bottomNavigationBar: BottomNavigationBar(
-        currentIndex: _currentIndex,
+      bottomNavigationBar: CurvedNavigationBar(
+        color: color[_currentIndex],
+        backgroundColor: const Color(0xFF333333),
+        buttonBackgroundColor: color[_currentIndex],
+        index: _currentIndex,
+        height: 50,
         items: [
-          BottomNavigationBarItem(icon: Icon(Icons.arrow_upward), title: Text("Watching")),
-          BottomNavigationBarItem(icon: Icon(Icons.check), title: Text("Completed")),
-          BottomNavigationBarItem(icon: Icon(Icons.add), title: Text("Add")),
-          BottomNavigationBarItem(icon: Icon(Icons.delete), title: Text("Dropped")),
-          BottomNavigationBarItem(icon: Icon(Icons.note), title: Text("Plan to Watch"))
+          Icon(Icons.arrow_upward),
+          Icon(Icons.check),
+          Icon(Icons.add),
+          Icon(Icons.delete),
+          Icon(Icons.note), 
         ],
-        type: BottomNavigationBarType.fixed,
+        animationCurve: Curves.bounceInOut,
+        animationDuration: Duration(
+          milliseconds: 200
+        ),
         onTap: (index){
           setState(() {
             _currentIndex = index;