Để các tab hoạt động, chúng ta sẽ cần đồng bộ hóa các phần nội dung và tab đã chọn. Đó là công việc của  TabController.  

Để thêm Tab vào ứng dụng, ta cần tạo TabBar  &  TabBarView  và đính kèm  TabController vào chúng. Sau đó, TabController sẽ đồng bộ hóa TabBar với TabBarView để ta để ta có thể thực hiện các bước tiếp theo

Sử dụng  DefaultTabController  là cách đơn giản nhất vì nó sẽ tạo  TabController cho chúng ta và sẽ khả dụng đối với Widget sau này. Cú pháp của  DefaultTabController  như sau.

DefaultTabController(

  // So luong tab / phan noi dung ban muon trinh bay

  length: 3,

  child: // tham khao buoc ke tiep

);

Step 1: Cài đặt Flutter App.

Step 2: Tạo 2 màn hình.

Trong  thư mục lib  , tạo một thư mục có tên là  screens và bên trong đó, tạo hai tệp.

  • FirstScreen.dart
  • SecondScreen.dart

Viết đoạn mã sau bên trong FirstScreen.dart .

// FirstScreen.dart

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container(

      child: Center(

        child: Text('Tab 1 Layout'),

      ),

    );

  }

}

Trong đoạn mã trên, chúng ta vừa thêm một văn bản ở giữa.

Khi người dùng nhấp vào nút tab đầu tiên, chúng ta sẽ thấy màn hình này.

Viết mã sau vào bên trong SecondScreen.dart  .

// SecondScreen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container(

      child: Center(

        child: Text('Tab 2 Layout'),

      ),

    );

  }

}

Đây là cách bố trí tab thứ hai. Chúng ta đã tạo bố cục hai tab cho ứng dụng của mình.

Bây giờ, việc còn lại là tạo một  DefaultTabController . 

Step 3: Tạo một  DefaultTabController

Viết đoạn mã sau vào  tệp main.dart 

// main.dart

import 'package:flutter/material.dart';

import './pages/FirstScreen.dart';

import './pages/SecondScreen.dart';

void main() {

  runApp(MyApp());

}

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: DefaultTabController(

        length: 2,

        child: Scaffold(

          appBar: AppBar(

            bottom: TabBar(

              tabs: [

                Tab(icon: Icon(Icons.directions_car)),

                Tab(icon: Icon(Icons.directions_transit))

              ],

            ),

            title: Text('Flutter Tabs Example'),

          ),

          body: TabBarView(

            children: [

              FirstScreen(),

              SecondScreen(),

            ],

          ),

        ),

      ),

    );

  }

}

Trong đoạn mã trên, chúng ta đã import hai màn hình được tạo trước đó.

Ứng dụng này chỉ có hai tab. Vì vậy, chúng ta chỉ định một chiều dài cho hai.

Sau đó, chúng ta lấy TabBar và gán hai biểu tượng tab.

Chức năng của TabBarView - với hai màn hình, được thể hiện thông qua quá trình người dùng nhấp vào. Khi người dùng nhấp vào một trong các biểu tượng, nó sẽ hiển thị các màn hình liên quan.

Lưu tệp và đi đến terminal và gõ lệnh sau. Hãy đảm bảo rằng cả trình mô phỏng iOS và Android đều đang mở. Chúng ta sẽ kiểm tra đầu ra trên cả hai Thiết bị ảo.

flutter run -d all

Xem thành quả ngay bên dưới.

Flutter Tabs Tutorial | Working with Tabs Example

App minh họa trên hình là ví dụ cơ bản về Flutter Tab, hy vọng bài viết giúp bạn hiểu cách chúng ta có thể xây dựng bố cục dựa trên Tab trong Ứng dụng Flutter. 

Nguồn: appdividend.com

VietnamWorks inTECH

TẠO TÀI KHOẢN MỚI: XEM FULL “1 TÁCH CODEFEE” - NHẬN SLOT TƯ VẤN CV TỪ CHUYÊN GIA - CƠ HỘI RINH VỀ VOUCHER 200K