Chào các em, lại là anh Creyt đây. Hôm nay chúng ta sẽ cùng "mổ xẻ" một anh bạn tưởng chừng đơn giản nhưng lại cực kỳ hữu ích trong Flutter, đó là VerticalDivider. Nghe tên là thấy "dọc" rồi đúng không? Chính xác! Nó là cái đường kẻ dọc mảnh mai, nhưng lại có võ đấy.
VerticalDivider là gì? Để làm gì?
Tưởng tượng thế này: các em đang lướt TikTok, thấy cái video của crush xong cái video quảng cáo, làm sao biết đâu là hết video này, đâu là video kia? Đơn giản là nó tự động chuyển cảnh. Nhưng trong UI của chúng ta, đôi khi cần một "dấu chấm câu" rõ ràng để người dùng biết "À, đây là hết phần A, giờ sang phần B rồi nhé!". VerticalDivider chính là "dấu chấm câu" đó, nhưng theo chiều dọc.
Nói một cách "học thuật" hơn, VerticalDivider là một widget trong Flutter dùng để tạo ra một đường kẻ dọc mỏng, phân tách các nội dung khác nhau trong một bố cục theo chiều ngang (thường là trong một Row). Nó giống như cái vạch phân làn trên đường cao tốc vậy, giúp các xe (widget) không lấn sang nhau, giữ cho giao diện của chúng ta gọn gàng, dễ nhìn và có cấu trúc hơn.
Tại sao lại cần nó?
Đơn giản thôi: Tính thẩm mỹ và Trải nghiệm người dùng (UX). Một giao diện mà mọi thứ cứ dính chùm vào nhau thì chẳng khác nào đọc một cuốn sách không có đoạn văn, không có chương mục cả. VerticalDivider giúp tạo ra khoảng trắng thị giác (visual whitespace), dẫn dắt mắt người dùng, và làm cho các phần tử UI trở nên dễ hiểu hơn, giảm gánh nặng nhận thức.
Code Ví Dụ Minh Hoạ: Cùng "vạch" một đường!
Giờ thì, lý thuyết suông mãi cũng chán, phải "thực chiến" mới ngấm đúng không? Anh em mình cùng xem VerticalDivider nó hoạt động như thế nào trong một Row đơn giản nhé.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'VerticalDivider Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('VerticalDivider của Creyt'),
),
body: Center(
child: Container(
height: 150, // Chiều cao của container chứa Row
color: Colors.grey[200],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// Phần tử thứ nhất
Container(
padding: const EdgeInsets.all(8.0),
color: Colors.red[100],
child: const Text(
'Phần A: Thông tin',
style: TextStyle(fontSize: 18),
),
),
// Đây rồi! Anh bạn VerticalDivider của chúng ta
const VerticalDivider(
color: Colors.blue, // Màu của vạch
thickness: 2, // Độ dày của vạch
indent: 10, // Khoảng cách từ trên xuống đến vạch
endIndent: 10, // Khoảng cách từ dưới lên đến vạch
),
// Phần tử thứ hai
Container(
padding: const EdgeInsets.all(8.0),
color: Colors.green[100],
child: const Text(
'Phần B: Hành động',
style: TextStyle(fontSize: 18),
),
),
],
),
),
),
),
);
}
}
Trong ví dụ trên:
color: Đơn giản là màu của cái vạch. Muốn nó "chìm" thì dùng màu xám, muốn nó "nổi" thì chơi màu tươi.thickness: Độ dày của vạch. Cứ nghĩ nó là "độ đậm" của nét bút ấy.indent: "Thụt vào" từ phía trên. Tức là, vạch sẽ không bắt đầu từ mép trên cùng củaRowmà sẽ cách ra một đoạn. Giống như lề trên của trang giấy vậy.endIndent: "Thụt vào" từ phía dưới. Tương tựindent, nhưng là từ mép dưới.
Mẹo và Best Practices từ Creyt
- Đừng lạm dụng: Giống như nước hoa, xịt ít thì thơm, xịt nhiều thì hắc. Dùng
VerticalDividerquá nhiều sẽ làm UI của em trông như một cái bảng tính Excel, rất rối mắt. Chỉ dùng khi thực sự cần phân tách rõ ràng các nhóm nội dung. - Khoảng cách là vàng: Luôn kết hợp
VerticalDividervớiPaddinghoặcSizedBoxxung quanh nó. Một cái vạch mà dính sát vào nội dung thì nó sẽ trông rất "ngộp". Hãy cho nó không gian để "thở" nhé. - Context là vua:
VerticalDividersinh ra là để nằm trongRow. Nếu em muốn chia dọc trong mộtColumnthì đó là lúc anh bạnDivider(không có "Vertical") lên sàn. Nhớ kỹ, dọc cho ngang, ngang cho dọc. - Tối ưu với
Expanded/Flexible: Khi đặtVerticalDividertrong mộtRowcó nhiều widget, hãy nghĩ đến việc dùngExpandedhoặcFlexiblecho các widget xung quanh để chúng tự điều chỉnh kích thước, tránh việcVerticalDividerbị đè bẹp hoặc chiếm quá nhiều không gian.
Ứng dụng thực tế: Nó ở đâu trong thế giới số?
Các em có để ý các ứng dụng như:
- File Explorer (trên desktop): Thường có một thanh dọc chia giữa danh sách thư mục bên trái và nội dung thư mục bên phải.
- Các ứng dụng quản lý dự án (Jira, Trello): Đôi khi trong giao diện xem chi tiết task, có các cột thông tin được phân tách bằng đường kẻ dọc.
- Settings của một số ứng dụng: Khi màn hình đủ rộng, có thể chia thành 2 cột: danh mục cài đặt bên trái và chi tiết cài đặt bên phải, giữa chúng có một đường phân cách.
- Các thanh công cụ (Toolbar) phức tạp: Ví dụ, trong các phần mềm thiết kế đồ họa, các nhóm công cụ thường được phân tách bằng các đường dọc nhỏ.
Đó chính là những nơi mà ý tưởng của VerticalDivider hoặc các thành phần tương tự được áp dụng để tăng cường tính tổ chức và dễ đọc của giao diện.
Thử nghiệm của Creyt và lời khuyên
Anh Creyt đã từng thử dùng Container với width mỏng và color để làm vạch ngăn cách. Nó hoạt động, nhưng VerticalDivider thì "sinh ra để làm điều đó". Nó tối ưu hơn về mặt ngữ nghĩa (semantic) và dễ dàng tùy chỉnh indent, endIndent mà không cần phải tính toán thủ công.
Nên dùng cho case nào?
- Phân chia các nhóm chức năng trong một thanh công cụ ngang (horizontal toolbar).
- Tạo ranh giới rõ ràng giữa hai vùng nội dung độc lập nhưng nằm cạnh nhau trong một
Row. Ví dụ: danh sách bộ lọc và danh sách kết quả, hoặc thông tin cá nhân và các nút hành động liên quan. - Khi muốn tạo một layout "Master-Detail" trên màn hình lớn (ví dụ tablet) với hai panel cạnh nhau.
Tóm lại, VerticalDivider là một công cụ nhỏ nhưng có võ, giúp giao diện của các em "ngăn nắp" và "có gu" hơn rất nhiều. Hãy dùng nó một cách thông minh, và UI của các em sẽ "sáng" hơn hẳn đấy! Hẹn gặp lại trong bài giảng tiếp theo nhé!
Thuộc Series: Flutter
Bài giảng này được tự động xuất bản ngẫu nhiên từ thư viện kiến thức. Đừng quên đón xem các Từ khoá Hướng Dẫn tiếp theo nhé!
