BottomNavigationBar – Bí kíp chuyển tab mượt mà trong app Flutter

Trong một trong các bài trước, chúng ta đã tìm hiểu về Navigation trong Flutter – chuyển màn hình & truyền dữ liệu giữa các trang. Hôm nay, chúng ta sẽ khám phá cách tạo giao diện có nhiều tab giống như các app phổ biến như Facebook, Zalo, v.v… bằng BottomNavigationBar.

🌟 BottomNavigationBar là gì?

BottomNavigationBar là một widget cho phép người dùng chuyển đổi giữa các màn hình chính trong ứng dụng thông qua một thanh điều hướng nằm dưới cùng giao diện.

Ứng dụng thường dùng BottomNavigationBar khi có từ 2 đến 5 tab chính, ví dụ như: Trang chủ, Tìm kiếm, Thông báo, Hồ sơ...

Tạo một ví dụ cơ bản

1. Cấu trúc cơ bản

Chúng ta sẽ tạo một app có 3 tab: Trang chủ, Yêu thích và Cài đặt.

```dart
import 'package:flutter/material.dart'; void main() { runApp(MyApp());
} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); }
} class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> { int _selectedIndex = 0; final List<Widget> _pages = <Widget>[ Center(child: Text('Trang chủ')), Center(child: Text('Yêu thích')), Center(child: Text('Cài đặt')), ]; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Demo BottomNavigationBar'), ), body: _pages[_selectedIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _selectedIndex, onTap: _onItemTapped, items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Trang chủ', ), BottomNavigationBarItem( icon: Icon(Icons.favorite), label: 'Yêu thích', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Cài đặt', ), ], ), ); }
}

2. Giải thích code

• BottomNavigationBar nằm ở thuộc tính bottomNavigationBar của Scaffold
• currentIndex xác định tab đang được chọn.
• onTap được gọi khi người dùng bấm vào một tab.
• _selectedIndex và _pages giúp thay đổi nội dung hiển thị tương ứng với tab.
• items: Một danh sách các BottomNavigationBarItem, mỗi item đại diện cho một tab trên thanh điều hướng. Mỗi BottomNavigationBarItem thường có icon (widget hiển thị biểu tượng) và label (chuỗi văn bản hiển thị tên tab).

3. Một vài thuộc tính tùy chỉnh giao diện

BottomNavigationBar cung cấp nhiều thuộc tính để bạn tùy chỉnh giao diện cho phù hợp với ứng dụng của mình:

• backgroundColor: Đặt màu nền cho toàn bộ thanh BottomNavigationBar.
• selectedItemColor: Xác định màu sắc của icon và label của tab đang được chọn.
• unselectedItemColor: Xác định màu sắc của icon và label của các tab không được chọn.
• selectedFontSize: Đặt kích thước font chữ cho label của tab đang được chọn.
• unselectedFontSize: Đặt kích thước font chữ cho label của các tab không được chọn.
• selectedIconTheme: Cho phép bạn tùy chỉnh theme (màu sắc, kích thước, độ đậm...) cho icon của tab đang được chọn thông qua một IconThemeData.
• unselectedIconTheme: Tương tự như selectedIconTheme, nhưng áp dụng cho các tab không được chọn.
• showSelectedLabels: Một giá trị boolean để quyết định có hiển thị label của tab đang được chọn hay không (mặc định là true).
• showUnselectedLabels: Một giá trị boolean để quyết định có hiển thị label của các tab không được chọn hay không (mặc định là true).
• type: Xác định cách các item trên thanh điều hướng được bố trí và tương tác. Có hai giá trị chính:
  • BottomNavigationBarType.fixed: Các item được bố trí đều nhau trên thanh và màu sắc của item được chọn sẽ thay đổi.
  • BottomNavigationBarType.shifting: Khi một item được chọn, nó sẽ trượt lên và có màu nền riêng. Thường dùng khi có ít hơn 4 item.

4. Một vài lưu ý khi dùng BottomNavigationBar

• Nên giữ số lượng tab từ 2 đến 5, nếu nhiều hơn thì nên dùng Drawer hoặc NavigationRail.
• Các tab nên có icon rõ ràng và tên ngắn gọn.
• Đừng quên cập nhật setState() để ứng dụng nhận biết sự thay đổi khi bấm tab 😆.

Tổng kết

Trong bài hôm nay, chúng ta đã học cách sử dụng BottomNavigationBar để tạo giao diện đa tab cơ bản trong Flutter. Đây là một widget rất hữu ích và thường dùng trong hầu hết các ứng dụng.

Bài sau, mình sẽ thử tìm hiểu về TabBar hoặc Drawer để so sánh hai cách điều hướng này.

Cảm ơn mọi người đã đọc đến đây! Nếu bạn cũng đang học Flutter như mình thì cùng cố gắng mỗi ngày nha 💪 Hẹn gặp lại ở bài viết tiếp theo! 😄