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