Tùy chỉnh BottomNavigationBar trong ứng dụng 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.

BottomNavigationBar có rất nhiều tùy chọn để tùy chỉnh nó theo nhu cầu của bạn. Hãy đi vào tìm hiểu một số thuộc tính mà bạn có thể tùy chỉnh.

Background color 

Khi bạn muốn thay đổi màu nền của BottomNavigationBar để phù hợp với thương hiệu của mình. Bạn có thể làm điều đó đơn giản bằng cách sử dụng thuộc tính ‘’backgroundColor’’. 

Elevation 

Mặc định, BottomNavigationBar được thiết lập để nâng cao 8 điểm từ bề mặt để nó xuất hiện phía trên các trang. Bạn có thể thiết lập thuộc tính này thành bất kỳ giá trị nào:

Icon size 

Bạn có thể thu nhỏ hoặc phóng to kích thước của tất cả các biểu tượng cùng một lúc bằng thuộc tính ‘’iconSize’’:

Mouse cursor 

Khi chạy trên web, bạn có thể tùy chỉnh con trỏ chuột khi nó di chuột qua một mục trên BottomNavigationBar:

Selected item

Bạn có thể làm cho mục đã chọn xuất hiện khác với mục không được chọn bằng cách sử dụng một số thuộc tính đã chọn của BottomNavigationBar:

Unselected items

Bạn cũng có thể muốn thay đổi giao diện của các mục không được chọn. BottomNavigationBar có một vài thuộc tính không được chọn mà bạn có thể sử dụng:

Removing labels

Nếu bạn muốn hoàn toàn loại bỏ nhãn, bạn có thể sử dụng các thuộc tính ‘’showSelectedLabels’’ và ‘’showUnselectedLabels’’:

Highlighting selected item

Bạn có thể nhấn sáng mục đã chọn bằng cách đặt BottomNavigationBar thành BottomNavigationBarType.shifting:

Đây là các tùy chỉnh cơ bản giúp bạn có thể tạo 1 BottomNavigationBar của riêng bạn, ngoài ra còn 1 số tùy chỉnh các chưa được đề cập. Chúc các bạn thành công!