Merge pull request #191 from VITianLalit/tab_switch_animation

Add Animated Page Transitions for Bottom Navigation Tabs
VaibhavCodeClub · Jun 29, 2024 · 9d6589a · 9d6589a
2 parents 9fbac3c + 452b636
commit 9d6589a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/lib/pages/main_home.dart b/lib/pages/main_home.dart
@@ -1,16 +1,14 @@
-
-
 import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:learn/cubit/index_cubit.dart';
-import 'package:learn/main.dart';
 import 'package:learn/pages/about.dart';
 import 'package:learn/pages/explore/explore.dart';
 import 'package:learn/pages/favorite.dart';
 import 'package:learn/pages/home.dart';
 import 'package:learn/widgets/navbar/navbar.dart';
+import 'package:adaptive_theme/adaptive_theme.dart';
 
 class MainHome extends StatefulWidget {
   final AdaptiveThemeMode? savedThemeMode;
@@ -25,6 +23,15 @@ class MainHome extends StatefulWidget {
 }
 
 class _MainHomeState extends State<MainHome> {
+  late PageController _pageController;
+  DateTime? currentBackPressTime;
+
+  @override
+  void initState() {
+    super.initState();
+    _pageController = PageController();
+  }
+
   bool _onBackPressed(bool canPop) {
     DateTime now = DateTime.now();
     if (currentBackPressTime == null ||
@@ -42,6 +49,12 @@ class _MainHomeState extends State<MainHome> {
     return canPop;
   }
 
+  @override
+  void dispose() {
+    _pageController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return PopScope(
@@ -55,13 +68,20 @@ class _MainHomeState extends State<MainHome> {
           child: BlocBuilder<IndexCubit, int>(
             builder: (context, index) {
               return Scaffold(
-                body: const [
-                  MyHomePage(),
-                  ExplorePage(),
-                  FavoritePage(),
-                  AboutPage(),
-                ][index],
-                bottomNavigationBar: const BottomNavBar(),
+                body: PageView(
+                  controller: _pageController,
+                  children: const [
+                    MyHomePage(),
+                    ExplorePage(),
+                    FavoritePage(),
+                    AboutPage(),
+                  ],
+                  onPageChanged: (index) {
+                    context.read<IndexCubit>().changeIndex(index);
+                  },
+                ),
+                bottomNavigationBar:
+                    BottomNavBar(pageController: _pageController),
               );
             },
           ),

diff --git a/lib/widgets/navbar/navbar.dart b/lib/widgets/navbar/navbar.dart
@@ -3,7 +3,12 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:learn/cubit/index_cubit.dart';
 
 class BottomNavBar extends StatefulWidget {
-  const BottomNavBar({super.key});
+  final PageController pageController;
+
+  const BottomNavBar({
+    super.key,
+    required this.pageController,
+  });
 
   @override
   State<BottomNavBar> createState() => _BottomNavBarState();
@@ -18,6 +23,12 @@ class _BottomNavBarState extends State<BottomNavBar> {
         return NavigationBar(
           selectedIndex: currentPageIndex,
           onDestinationSelected: (index) {
+            // Animate to the selected page
+            widget.pageController.animateToPage(
+              index,
+              duration: const Duration(milliseconds: 300),
+              curve: Curves.easeInOut,
+            );
             context.read<IndexCubit>().changeIndex(index);
           },
           destinations: const [