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.

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:

DefaultTabController(
    length: 3,
    child:
);

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.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);

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

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Flutter'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

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

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

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)