Flutter vừa tung ra bản cập nhật 1.17 mới. Trong bản này được cập nhật thêm nhiều chức năng và widget mới. Trong đó có NavigationRail, các bạn có thể xem hình bên dưới.

Nhưng một vấn đề xảy ra khi mình muốn hiển thị Text và Icon theo chiều ngang thì lại không được hỗ trợ. Vì vậy mình quyết định tạo ra một widget riêng cho mình.

Chúng ta sẽ tạo ra hai widget, thứ nhất là NavigationHorizontalRail và NavigationHorizontalRailDestination. NavigationHorizontalRail để thực hiện việc chứa các widget NavigationHorizontalRailDestinantion và chứa các thuộc tính màu sắc, callback lắng nghe việc thay đổi lựa chọn của người dùng.

Đầu tiên, tạo ra widget là NavigationHorizontalRailDestination chứa các thuộc tính sau:

Ở hàm build, tuỳ thuộc vào UI của bạn mà bạn sẽ lên layout một cách hợp lý. Ở đây mình làm đơn giản như sau:

Tạo ra một statefulwidget tên là NavigationHorizontalRail chứa các thuộc tính sau:

Trong state của NavigationHorizontalRail khai báo một biến indexSelected để dễ dàng quản lý việc thay đổi và cập nhật ra ngoài.

Trong hàm build như sau:

Lúc sử dụng, ta viết như sau:

Ở đây mình sử dụng provider để quản lý state chỉnh.

_model.users là một danh sách dữ liệu
_model.indexSelected là một biến mặt định để chỉ định vị trí đầu tiên.

Vì NavigationHorizontalRail vẫn là một widget chứa list view, vì thế các bạn nên đặt trong một Expanded khi chứa trong Column nhé.

Chúc các bạn thành công!