Flutter: Sử dụng BottomNavigationBar cực dễ với bài viết này

BottomNavigationBar là một thành phần quan trọng trong Flutter, cho phép bạn tạo một thanh điều hướng dưới cùng của ứng dụng với các tab và chuyển đổi giữa các màn hình hoặc chức năng khác nhau. Đây là một cách tiện lợi để tạo trải nghiệm người dùng dễ sử dụng và trực quan. Trong bài viết này, chúng ta sẽ tìm hiểu về BottomNavigationBar và cách sử dụng nó trong Flutter.

Để bắt đầu, chúng ta cần thực hiện các bước sau:

1. Tạo một danh sách các màn hình hoặc chức năng:

Đầu tiên, bạn cần tạo một danh sách các màn hình hoặc chức năng mà bạn muốn chuyển đổi thông qua BottomNavigationBar.

Ví dụ, bạn có thể tạo một danh sách các StatefulWidget để đại diện cho mỗi màn hình:

StatefulWidget

2. Tạo BottomNavigationBar:

Tiếp theo, bạn cần tạo BottomNavigationBar widget và cung cấp danh sách các tab và màn hình tương ứng cho nó. Mỗi tab được đại diện bằng một BottomNavigationBarItem:

Tạo hàm onTabSelected

– Hàm “_onTabSelected” được sử dụng để cập nhật lại màn hình  khi bạn nhấn vào tab được chọn

Tạo các BottomNavigationBarItem

3. Hiển thị màn hình tương ứng:

Cuối cùng, bạn cần hiển thị màn hình tương ứng với tab được chọn. Bạn có thể sử dụng giá trị  “_currentIndex” để xác định màn hình nào cần được hiển thị:

Hoàn thành đoạn mã

Với các bước trên, bạn đã tạo thành công một BottomNavigationBar trong Flutter. Khi người dùng chọn một tab khác, _onTabSelected sẽ được gọi và màn hình tương ứng sẽ được hiển thị dựa trên giá trị _currentIndex.

BottomNavigationBar cung cấp nhiều tùy chọn tùy chỉnh khác nhau để thay đổi giao diện và hành vi của nó, bao gồm cả màu sắc, biểu tượng, văn bản, và hiệu ứng chuyển đổi. Bạn có thể tìm hiểu thêm trong tài liệu chính thức của Flutter để tùy chỉnh BottomNavigationBar phù hợp với nhu cầu của bạn.

Cuối  cùng chúng ta xem thành quả khi “run code” nhé.

Giao diện BottomNavigationBar