Flutter: Cách sử dụng Tabbar

TabBar là một widget phổ biến trong Flutter, cho phép người dùng chuyển đổi giữa nhiều màn hình con trong một ứng dụng. Đi kèm với TabBar là TabBarView, cho phép hiển thị nội dung tương ứng với tab được chọn. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng TabBar và TabBarView để tạo giao diện đa màn hình đơn giản trong ứng dụng Flutter.

Để biết có một tabbar đơn giản chúng ta cùng thực hiện các bước sau:

Bước 1: Tạo TabController

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

Tạo TabController

Trong DefautTabController có 2 trường bắt buộc là length (int) và child (Widget). Trong đó:

• Length : là số lượng Tab , nó có kiểu dữ liệu là int
• Child: là Widget dùng để hiển thị lên màn hình.

Bước 2: Tạo các Tab để lựu chọn

Tiếp theo chúng ta sẽ tạo các Tab để hiển thị lên màn hình bằng Widget TabBar như sau:

Tạo TabBar

Kết quả thu được như sau:

Giao diện TabBar

Trong widget TabBar có thuộc tính bắt buộc là tabs (List<Widget>), ở đây mình sử dụng widget Icon để dùng các icon hiển thị làm tượng trưng cho các Tab, các bạn có thể sử dụng các widget tùy thích, hãy thử nhé.

Bước 3: Tạo nội dung cho từng Tab

Tạo các nội dung trong từng Tab để hiển thị lên màn hình, các Tab sẽ có những nội dung khác nhau. Chúng ta sẽ dùng widget TabBarView để xây dựng nội dung đó :

Tạo TabBarView

Kết quả thu được như sau:

Nội dung Tab1

Nội dung Tab2

Trong widget TabBarView có trường bắt buộc là children (List<Widget>) dùng để hiển thị nội dung cho các Tab. Mỗi widget con sẽ hiển thị nội dung tương ứng cho mỗi Tabbar. 

Ví dụ: Có 2 TabBar là Tab1, Tab2 và 2 TabBarView là View1, View2. Thì View1 sẽ hiển thị nội dung cho Tab1 và View2 sẽ hiển thị nội dung cho Tab2.

Kết luận: TabBar và TabBarView là hai widget mạnh mẽ trong Flutter cho phép chúng ta dễ dàng tạo giao diện đa màn hình trong ứng dụng. Chúng ta có thể sử dụng chúng để hiển thị nội dung tương ứng với từng tab và cung cấp trải nghiệm người dùng tốt hơn. Hy vọng bài viết này đã giúp bạn hiểu cách sử dụng TabBar trong Flutter.