Package AutoRoute Phần 5

Tiếp tục với chuỗi các bài viết tìm hiểu Package AutoRouter. Hôm này mình sẽ tìm hiểu cách setup một BottomTabNavigation.

1. Chuẩn Bị

• Xác định số Tab muốn hiển thị trên BottomTabNavigation

  • Demo này mình sẽ hiển thị 3 Tab : Post, User, Setting.

    @RoutePage()
    class PostPage extends StatefulWidget {
      const PostPage({super.key});
        
    @RoutePage()
    class SettingPage extends StatefulWidget {
      const SettingPage({super.key});
        
    @RoutePage()
    class UserPage extends StatefulWidget {
      const UserPage({super.key});
    

  • Bây giờ, chúng ta cần tạo một Page để chứa 3 Tab trên. Page này cần chứa một đối tượng gọi là AutoTabsRouter bao gồm các tham số :

    • routes : Tham số này xác định các tabs con của BottomTabNavigation, chúng ta cần truyền các route vào.

    • duration: Độ dài của animation khi thay đổi tab. Nếu bạn không muốn có hiệu ứng thì set nó là 0

    • transitionBuilder : tham số này dùng để custom animation khi thay đổi tab.

    • builder : Dùng để xây dựng layout của footer

    import 'package:auto_route/auto_route.dart';
    import 'package:auto_route_study/config/auto_route/app_router.dart';
    import 'package:flutter/material.dart';
        
    @RoutePage()
    class DashBoardPage extends StatefulWidget {
      const DashBoardPage({super.key});
        
      @override
      State<DashBoardPage> createState() => _DashBoardPageState();
    }
        
    class _DashBoardPageState extends State<DashBoardPage> {
      @override
      Widget build(BuildContext context) {
        return AutoTabsRouter(
          duration: const Duration(milliseconds: 0),
          routes: const [
            UserRoute(),
            PostRoute(),
            SettingRoute(),
        
          ],
          transitionBuilder: (context, child, animation) => FadeTransition(
            alwaysIncludeSemantics: true,
            opacity: animation,
            // the passed child is technically our animated selected-tab page
            child: child,
          ),    
          builder: _tabBuilder,
        );
      }
        
      late TabsRouter tabsRouters;
      Widget _tabBuilder(BuildContext context, Widget child) {
        tabsRouters = AutoTabsRouter.of(context);
        return Scaffold(
          body: child,
          bottomNavigationBar: _buildBottomNavigationBar(tabsRouters),
        );
      }
        
      _buildBottomNavigationBar(TabsRouter tabsRouters) {
        return BottomNavigationBar(
          currentIndex: tabsRouters.activeIndex,
          onTap: _onTapBottomNavigation,
          items: const [
            //Xác định Text và Icon ở mỗi Tab. 
            BottomNavigationBarItem(label: 'Users', icon: Icon(Icons.people)),
            BottomNavigationBarItem(label: 'Posts', icon: Icon(Icons.people)),
            BottomNavigationBarItem(label: 'Settings', icon: Icon(Icons.people)),
          ],
        );
      }
        
      void _onTapBottomNavigation(int value) {
        //setActiveIndex dùng để chuyển tab
        tabsRouters.setActiveIndex(value);
      }
    }
    

  • Tiếp theo chúng ta cần khai báo các route ở AppRouter

    import 'package:auto_route/auto_route.dart';
    import 'package:auto_route_study/config/auto_route/path_router.dart';
    import 'package:auto_route_study/presentation/dash_board_page.dart';
    import 'package:auto_route_study/presentation/login_page.dart';
    import 'package:auto_route_study/presentation/post_page.dart';
    import 'package:auto_route_study/presentation/setting_page.dart';
    import 'package:auto_route_study/presentation/user_page.dart';
        
    part 'app_router.gr.dart';
        
    @AutoRouterConfig()
    class AppRouter extends _$AppRouter {
      @override
      List<AutoRoute> get routes => [
            AutoRoute(
              initial: true,
              path: PathRouter.dashboardPage,
              page: DashBoardRoute.page,
              children: [
                AutoRoute(
                  initial: true,
                  path: PathRouter.userPage,
                  page: UserRoute.page,
                ),
                AutoRoute(
                  path: PathRouter.postPage,
                  page: PostRoute.page,
                ),
                AutoRoute(
                  path: PathRouter.settingPage,
                  page: SettingRoute.page,
                ),
              ],
            ),
            AutoRoute(path: PathRouter.loginPage, page: LoginRoute.page)
          ];
    }
    

    • Có thể thấy DashBoardRoute chứa các route con bao gồm : UserRoute, PostRoute, SettingRoute

    • UserRoute đang setting initial = true, nghĩa là Tab này sẽ được chọn khi BottomTabNavigation hiển thị.

  • Đến đây, mình đã hoàn thành các bước cài đặt BottomTabNavigation cơ bản nhất dùng AutoRoute rồi. Cùng chạy code lên thử nhé.

  • Tips : Để biết được BottomTabNavitaion đang hiển thị Tab nào chúng ta có thể dùng thuộc tính activeIndex

     tabsRouters = AutoTabsRouter.of(context);
     var indexSelected = tabsRouters.activeIndex;
    

  • Để di chuyển sang một Tab khác, có thể dùng hàm setActiveIndex

    tabsRouters = AutoTabsRouter.of(context);
    tabsRouters.setActiveIndex(value);
    

• Đến đây, mình đã tìm hiểu cách tạo BottomNavigation cơ bản nhất sử dụng AutoRoute. Sẽ còn phần nâng cao nữa. nhưng để không bị ngợp. Ở phần này mình chỉ tìm hiểu đến đây.

• Ngoài ra, đối tượng AutoTabsRouter còn sử dụng có thêm 2 contructor nữa là AutoTabsRouter.pageView , AutoTabsRouter.tabBar cách sử dụng giống như trên chỉ khác nhau về hành vi thể hiện.