Bài viết này tôi sẽ chia sẻ một số thư viện để tạo nên Bottom Navigation Bar đẹp và thú vị cho App của bạn. Hãy cùng tìm hiểu nhé.

1. Convex Bottom Bar

Tại thời điểm này, convex_bottom_barlà một trong những plugin phổ biến nhất trên pub.dev.
bottom_nav_bar
bottom_nav_bar
bottom_nav_bar
Cài đặt
Bạn có thể cài đặt plugin bằng cách chạy lệnh sau:

flutter pub add convex_bottom_bar

Ví dụ

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
      TabItem(icon: Icons.message, title: 'Message'),
      TabItem(icon: Icons.people, title: 'Profile'),
    ],
    onTap: (int i) => print('click index=$i'),
  )
);

Tham khảo tại:
https://pub.dev/packages/convex_bottom_bar

2. Animated Bottom Navigation Bar

bottom_nav_bar

Cài đặt

flutter pub add animated_bottom_navigation_bar

Ví dụ

Scaffold(
   body: Container(), //destination screen
   floatingActionButton: FloatingActionButton(
      //params
   ),
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   bottomNavigationBar: AnimatedBottomNavigationBar(
      icons: iconList,
      activeIndex: _bottomNavIndex,
      gapLocation: GapLocation.center,
      notchSmoothness: NotchSmoothness.verySmoothEdge,
      leftCornerRadius: 32,
      rightCornerRadius: 32,
      onTap: (index) => setState(() => _bottomNavIndex = index),
      //other params
   ),
);

Tham khảo tại:
https://pub.dev/packages/animated_bottom_navigation_bar

3. Salomon Bottom Bar
bottom_nav_bar

Cài đặt

flutter pub add salomon_bottom_bar

Ví dụ

import 'package:salomon_bottom_bar/salomon_bottom_bar.dart';

int _currentIndex = 0;

Scaffold(
        appBar: AppBar(
          title: Text(MyApp.title),
        ),
        bottomNavigationBar: SalomonBottomBar(
          currentIndex: _currentIndex,
          onTap: (i) => setState(() => _currentIndex = i),
          items: [
            /// Home
            SalomonBottomBarItem(
              icon: Icon(Icons.home),
              title: Text("Home"),
              selectedColor: Colors.purple,
            ),

            /// Likes
            SalomonBottomBarItem(
              icon: Icon(Icons.favorite_border),
              title: Text("Likes"),
              selectedColor: Colors.pink,
            ),

            /// Search
            SalomonBottomBarItem(
              icon: Icon(Icons.search),
              title: Text("Search"),
              selectedColor: Colors.orange,
            ),

            /// Profile
            SalomonBottomBarItem(
              icon: Icon(Icons.person),
              title: Text("Profile"),
              selectedColor: Colors.teal,
            ),
          ],
        ),
)

Tham khảo tại:
https://pub.dev/packages/salomon_bottom_bar

4. Bottom Bar With Sheet

bottom_nav_bar

Cài đặt

flutter pub add bottom_bar_with_sheet

Ví dụ

import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';

Scaffold(
  bottomNavigationBar: BottomBarWithSheet(
    controller: _bottomBarController,
    bottomBarTheme: const BottomBarTheme(
      decoration: BoxDecoration(color: Colors.white),
      itemIconColor: Colors.grey,
    ),
    items: const [
      BottomBarWithSheetItem(icon: Icons.people),
      BottomBarWithSheetItem(icon: Icons.favorite),
    ],
  ),
);

Tham khảo tại:
https://pub.dev/packages/bottom_bar_with_sheet

5. Bubble Bottom Bar
bottom_nav_bar
Cài đặt

flutter pub add bubble_bottom_bar

Ví dụ

import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

floatingActionButton: FloatingActionButton(
        onPressed: (){},
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: BubbleBottomBar(
        opacity: .2,
        currentIndex: currentIndex,
        onTap: changePage,
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
        elevation: 8,
        fabLocation: BubbleBottomBarFabLocation.end, //new
        hasNotch: true, //new
        hasInk: true, //new, gives a cute ink effect
        inkColor: Colors.black12, //optional, uses theme color if not specified
        items: <BubbleBottomBarItem>[
            BubbleBottomBarItem(backgroundColor: Colors.red, icon: Icon(Icons.dashboard, color: Colors.black,), activeIcon: Icon(Icons.dashboard, color: Colors.red,), title: Text("Home")),
            BubbleBottomBarItem(backgroundColor: Colors.deepPurple, icon: Icon(Icons.access_time, color: Colors.black,), activeIcon: Icon(Icons.access_time, color: Colors.deepPurple,), title: Text("Logs")),
            BubbleBottomBarItem(backgroundColor: Colors.indigo, icon: Icon(Icons.folder_open, color: Colors.black,), activeIcon: Icon(Icons.folder_open, color: Colors.indigo,), title: Text("Folders")),
            BubbleBottomBarItem(backgroundColor: Colors.green, icon: Icon(Icons.menu, color: Colors.black,), activeIcon: Icon(Icons.menu, color: Colors.green,), title: Text("Menu"))
        ],
      ),

Tham khảo tại:
https://pub.dev/packages/bubble_bottom_bar