Thiết kế Tabs 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ế Tabs trong Flutter.

Trong các ứng dụng thường sử dụng điều hướng Tabs trở nên rất phổ biến, để thiết kế Tabs trong Flutter cũng khá đơn giản bằng cách khởi tạo TabContoder và TabBar.

Để 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.

Bước 1: Để các Tab hoạt động sẽ cần giữ đồng bộ các Tab với những phần nội dung được chọn, đây là công việc của TabContoder. Để khởi tạo TabContoder thực hiện như sau:

Bước 2: Tiếp theo sẽ khởi tạo các Tab, sau khi khởi tạo TabContoder để làm việc thì chúng ta có thể tạo các Tab của mình bằng cách sử dụng Widget TabBar.

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ụ Tab trong Flutter:

Thiết kế Tabs 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