Thiết kế Navigation Drawer trong Flutter

Trong các ứng dụng sử dụng thường có hai tùy chọn để điều hướng là Tabs và Drawers. Sau đây là phần hướng dẫn thiết kế Navigation Drawer trong Flutter.

Trong các ứng dụng sử dụng thường có hai tùy chọn để điều hướng là Tabs và Drawers. Sau đây là phần hướng dẫn thiết kế Navigation Drawer trong Flutter. Khi không có đủ không gian để hỗ trợ các Tabs thì Drawers là một trong những giải pháp thay thế tiện dụng nhất.

Để tìm hiểu thêm về Flutter bạn có thể thao khảo thêm một số bài viết như khởi tạo ứng dụng Flutter đầu tiênxây dựng ứng dụng Flutter tính chỉ số BMIxây dựng ứng dụng Calculator bằng Flutter.

Trong Flutter chúng ta có thể sử dụng Drawer Widget kết hợp với Scaffold để tạo bố cục Material Design Drawer.

Bước 1: Khởi tạo Scaffold và Drawer

Để thiết kế Navigation Drawer trong Flutter bạn sẽ cần phải bọc nó trong Widget Scaffold. Để khởi tạo Scaffold với Drawer thực hiện như sau: 

Bước 2: Thêm các mục vào Drawer, chúng ta sẽ thêm ListView với DrawerHeader và ListTile Widgets vào Drawers

Bước 3: Sau đây là ví dụ hoàn chỉnh bạn có thể tham khảo.

Giao diện mẫu khi chạy đoạn mã chương trình ví dụ Navigation Drawer trong Flutter:

Thiết kế Navigation Drawer trong Flutter

Tải mã nguồn tại đây:

Link 1 Link 2

Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết về xây dựng ứng dụng di động trên Android và iOS bằng Flutter miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.

(Tác giả: Team Việt Dev)

Bình luận