BottomNavigationBar trong Flutter

Trong ứng dụng Flutter, tiện ích BottomNavigationBar cho phép người dùng xem một danh mục khi ứng dụng khởi động và nhanh chóng chuyển đổi sang các danh mục khác chỉ bằng một cú chạm.

Bài viết này, chúng tôi sẽ cung cấp cho bạn mọi thông tin cần thiết về BottomNavigationBar trong Flutter: cách nó hoạt động, hướng dẫn qua một số trường hợp sử dụng và chỉ cho bạn cách tùy chỉnh tiện ích BottomNavigationBar trong ứng dụng Flutter của bạn.

Phần 1: Giới thiệu về BottomNavigationBar và cách đưa BottomNavigationBar vào ứng dụng flutter

BottomNavigationBar là gì

BottomNavigationBar là một tiện ích hiển thị một hàng các tiện ích nhỏ ở dưới cùng của một ứng dụng Flutter. Thông thường, nó được sử dụng để hiển thị khoảng ba đến năm mục. Mỗi mục phải có một nhãn và một biểu tượng. BottomNavigationBar cho phép bạn chọn một mục một lúc và nhanh chóng điều hướng đến một trang cụ thể.

Hiển thị BottomNavigationBar

BottomNavigationBar được gán cho thuộc tính bottomNavigationBar của Scaffold:

BottomNavigationBar được gán cho thuộc tính bottomNavigationBar của Scaffold

BottomNavigationBar có một thuộc tính bắt buộc gọi là “items”. “items” chấp nhận một tiện ích của kiểu BottomNavigationBarItem. BottomNavigationBarItem đơn giản chỉ được sử dụng để hiển thị mục thực tế bên trong BottomNavigationBar.

Đoạn mã trên chỉ hiển thị BottomNavigationBar với mục đầu tiên được chọn làm mặc định. Tuy nhiên, nó chưa thay đổi sự lựa chọn khi chúng ta nhấp vào các mục khác.

Khi nhấp vào các mục khác chưa có sự thay đổi

Hiển thị sự lựa chọn của “items”

Để hiển thị sự lựa chọn của các mục khác, chúng ta sẽ sử dụng hai thuộc tính: “onTap” và “currentIndex”.

Thuộc tính: onTap

Thuộc tính: currentIndex

Biến _selectedIndex lưu trữ giá trị của mục đang được chọn hiện tại. _selectedIndex được gán cho thuộc tính currentIndex.

Hàm gọi lại _onItemTapped() được gán cho onTap của BottomNavigationBar, và sẽ trả về chỉ số của mục khi được chạm vào. Chỉ cần gán chỉ số của mục đang được chọn vào _selectedIndex và sử dụng setState, BottomNavigationBar sẽ hiển thị mục đó như là mục được chọn.

BottomNavigationBar sẽ hiển thị mục đó như là mục được chọn

Hiển thị trang của mục đã chọn

Hiện tại, chúng ta chưa có bất kỳ trang nào để hiển thị dựa trên mục đã chọn. Vì vậy, hãy tiến hành tạo trang đó:

Hiển thị trang của mục đã chọn

Biến _pages chứa một danh sách các tiện ích. Đơn giản chỉ hiển thị một biểu tượng lớn của chính mục đó. Hiển thị một trang ở giữa màn hình từ _pages dựa trên _selectedIndex .

Bây giờ chúng ta đã có BottomNavigationBar hoạt động:

Bây giờ chúng ta đã có BottomNavigationBar hoạt động