TableCell Flutter: Sếp của từng ô dữ liệu, cân team thẳng tắp!

Yo, fam! Anh Creyt lại 'lên sóng' đây. Hôm nay mình sẽ 'bung lụa' với một 'nhân vật' có vẻ ít được nhắc tên, nhưng lại cực kỳ 'quyền lực' khi bạn muốn 'layout' mấy cái bảng biểu trông 'phê pha' trên app Flutter của mình: TableCell.

1. TableCell là gì? Để làm gì? (Giải thích kiểu Gen Z)

Này mấy đứa, tưởng tượng thế này cho anh dễ hiểu nhé. Khi mấy đứa làm cái 'bảng điểm danh' hay 'bảng phân công nhiệm vụ' của team, mỗi cái ô nhỏ nhỏ chứa tên đứa nào đó, hay nhiệm vụ gì đó, chính là một TableCell đấy.

Nói theo kiểu 'dân chơi' công nghệ, Table trong Flutter nó như một cái bảng tính Excel thu nhỏ vậy. TableRow chính là từng dòng trong cái bảng đó, và TableCell? Chính xác, nó là từng ô dữ liệu độc lập trong mỗi dòng.

Nhưng mà TableCell nó 'cool' hơn mấy cái ô bình thường ở chỗ: nó cho phép mình can thiệp sâu vào cái 'thái độ' của nội dung bên trong nó. Tức là, dù cả dòng đang muốn 'chill' ở giữa, thằng TableCell này vẫn có thể 'tuyên bố độc lập' và bảo: 'Không, tao muốn nội dung của tao phải 'đứng nghiêm' ở trên cùng cơ!' Hoặc 'tao muốn 'nằm dài' ở dưới cùng cho nó 'phá cách'.' Nghe 'ngầu' chưa?

Nói tóm lại, TableCell là một widget 'bao bọc' (wrapper) cho bất kỳ widget nào khác mà bạn muốn đặt vào một ô cụ thể trong Table. Sức mạnh của nó nằm ở việc bạn có thể điều chỉnh vị trí dọc (vertical alignment) của nội dung bên trong ô đó một cách độc lập, không bị ảnh hưởng bởi cài đặt chung của cả dòng.

2. Code Ví Dụ Minh Hoạ Rõ Ràng

Để mấy đứa dễ hình dung, anh Creyt sẽ 'phù phép' một cái bảng đơn giản, có mấy ô 'ngang ngược' muốn 'đứng riêng một kiểu' cho xem:

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: 'TableCell Demo by Creyt',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('TableCell - Cân chỉnh từng ô'),
          backgroundColor: Colors.deepPurple,
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Table(
              border: TableBorder.all(color: Colors.grey.shade400, width: 1.0),
              columnWidths: const <int, TableColumnWidth>{
                0: IntrinsicColumnWidth(), // Cột 0 tự động co giãn theo nội dung
                1: FlexColumnWidth(),      // Cột 1 chiếm phần còn lại
                2: FixedColumnWidth(100.0), // Cột 2 cố định 100px
              },
              children: <TableRow>[
                // Dòng tiêu đề
                TableRow(
                  decoration: BoxDecoration(color: Colors.deepPurple.shade100),
                  children: <Widget>[
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('STT', style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ),
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('Nội dung Chính', style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ),
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('Trạng thái', style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ),
                  ],
                ),
                // Dòng dữ liệu 1: Mọi thứ căn giữa (mặc định của TableRow)
                TableRow(
                  children: <Widget>[
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('1'),
                      ),
                    ),
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('Đây là một đoạn nội dung khá dài trong ô, xem nó căn chỉnh thế nào nhé!'),
                      ),
                    ),
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(Icons.check_circle, color: Colors.green),
                      ),
                    ),
                  ],
                ),
                // Dòng dữ liệu 2: Ô thứ 2 'ngang ngược' căn trên
                TableRow(
                  children: <Widget>[
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('2'),
                      ),
                    ),
                    TableCell(
                      verticalAlignment: TableCellVerticalAlignment.top, // <-- Đây này!
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          'Nội dung này muốn 'đứng nghiêm' ở trên cùng. Dù cả dòng có cao đến mấy, nó vẫn 'chót vót' trên cao. Đây là lúc TableCell thực sự tỏa sáng đó mấy đứa!',
                          style: TextStyle(fontStyle: FontStyle.italic),
                        ),
                      ),
                    ),
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(Icons.warning, color: Colors.orange),
                      ),
                    ),
                  ],
                ),
                // Dòng dữ liệu 3: Ô thứ 2 'lười biếng' căn dưới
                TableRow(
                  children: <Widget>[
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('3'),
                      ),
                    ),
                    TableCell(
                      verticalAlignment: TableCellVerticalAlignment.bottom, // <-- Và đây nữa!
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          'Còn nội dung này thì 'ngủ nướng' ở dưới đáy ô. Mấy đứa thấy sự khác biệt chưa? Chỉ một ô thôi mà có thể 'tự quyết định số phận' của mình.',
                          style: TextStyle(color: Colors.blueGrey),
                        ),
                      ),
                    ),
                    TableCell(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(Icons.error, color: Colors.red),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Trong ví dụ trên, mấy đứa sẽ thấy rõ sự khác biệt ở TableRow thứ hai và thứ ba. Dù các ô khác trong dòng vẫn theo 'quy tắc chung' của TableRow (mặc định là middle hoặc theo defaultVerticalAlignment của Table), thì cái TableCell ở cột thứ hai lại 'ngang ngược' tự điều chỉnh verticalAlignment của mình thành top hoặc bottom.

Gợi Ý Đọc Tiếp

OpacityTransition Flutter: Tàng Hình & Hiện Hình UI mượt mà cùng Creyt

5 Lượt xem

3. Mẹo (Best Practices) để ghi nhớ hoặc dùng thực tế

• Khi nào dùng TableCell? Dùng khi bạn cần điều khiển vị trí dọc của nội dung trong MỘT Ô CỤ THỂ, mà không muốn ảnh hưởng đến các ô khác trong cùng một hàng. Nếu bạn muốn cả hàng cùng 'ngẩng mặt' lên trên hay 'cắm mặt' xuống dưới, thì dùng verticalAlignment của TableRow sẽ gọn gàng hơn.
• TableCell không phải là 'thùng rác': Đừng vứt mỗi Text hay Icon trần trụi vào TableCell. Hãy bọc nó trong Padding hoặc Container để tạo khoảng cách, đường viền cho đẹp mắt, tránh bị 'dính chùm' vào nhau trông rất 'kém sang'.
• Kết hợp với TableColumnWidth: Để cái bảng của bạn không bị 'méo mó', hãy dùng columnWidths trong Table để định rõ kích thước các cột. IntrinsicColumnWidth (tự co giãn theo nội dung), FixedColumnWidth (cố định), FlexColumnWidth (linh hoạt) là những 'bạn thân' của TableCell đấy.
• Ít dùng, nhưng chất lượng: Trong nhiều trường hợp, bạn có thể dùng Row và Column để tạo layout dạng lưới. Nhưng khi bạn thực sự cần một cấu trúc bảng biểu với các ô có thể 'tự chủ' về căn chỉnh dọc, thì Table và TableCell là lựa chọn 'đỉnh của chóp'.

4. Ứng dụng thực tế các app/website đã ứng dụng

Thực ra, TableCell (hoặc các khái niệm tương tự trong các framework khác) được dùng rất nhiều ở những nơi cần hiển thị dữ liệu dạng bảng. Mấy đứa có thể thấy nó ở:

• Các ứng dụng tài chính/chứng khoán: Hiển thị giá cổ phiếu, danh mục đầu tư với các cột dữ liệu số, biểu đồ mini, icon tăng/giảm, và đôi khi cần căn chỉnh đặc biệt cho từng loại dữ liệu.
• App quản lý dự án/Task manager: Bảng phân công công việc, tiến độ dự án, nơi mỗi ô có thể chứa tên người, trạng thái (dropdown), deadline, và cần căn chỉnh khác nhau cho mỗi loại input.
• Các trang so sánh sản phẩm (e-commerce): Khi bạn thấy một bảng so sánh các tính năng của điện thoại, laptop, mỗi ô có thể chứa text, icon check/cross, hình ảnh nhỏ, và việc căn chỉnh từng ô giúp bảng trông gọn gàng, dễ đọc hơn.
• Bất kỳ app nào có 'Dashboard' hiển thị thống kê: Thường có các bảng nhỏ gọn, hiển thị số liệu, biểu đồ mini. TableCell giúp kiểm soát tốt hơn các thành phần này.

5. Thử nghiệm đã từng và hướng dẫn nên dùng cho case nào

Anh Creyt đã từng 'vật lộn' với việc tạo bảng trong Flutter khá nhiều. Ban đầu, anh cũng hay dùng Row lồng Column (hoặc ngược lại) để tạo lưới, và nó hoạt động tốt cho các layout đơn giản. Nhưng khi gặp phải trường hợp một dòng có nhiều loại nội dung khác nhau (ví dụ: một ô là text ngắn, một ô là ảnh cao, một ô là nút bấm), và mình muốn cái text ngắn đó phải 'đứng thẳng hàng' lên trên cùng của ô, trong khi các ô khác cứ 'nhởn nhơ' ở giữa, thì Row lồng Column bắt đầu 'khóc thét'.

Đó là lúc Table và TableCell 'ra tay cứu độ'. TableCell với thuộc tính verticalAlignment của nó chính là 'vũ khí bí mật' để giải quyết vấn đề đó một cách thanh lịch. Nó giúp cái bảng của bạn trông 'chuyên nghiệp' hơn, không còn cảnh nội dung 'lộn xộn' trong các ô có chiều cao không đồng đều.

Lời khuyên của anh Creyt:

• Dùng Table và TableCell khi: Bạn có dữ liệu thực sự mang tính 'bảng' (tabular data) và cần sự kiểm soát chặt chẽ về cách các ô và nội dung bên trong được căn chỉnh dọc, đặc biệt khi các ô trong cùng một hàng có chiều cao khác nhau.
• Tránh dùng Table và TableCell khi: Bạn chỉ muốn tạo một layout dạng lưới đơn giản mà không có ý định hiển thị dữ liệu theo hàng/cột cụ thể, hoặc không cần điều khiển căn chỉnh dọc quá chi tiết cho từng ô. Khi đó, GridView, Row lồng Column, hay Wrap có thể là lựa chọn tốt hơn.

Nhớ nhé mấy đứa, mỗi công cụ sinh ra đều có 'sứ mệnh' riêng. Hiểu rõ 'sứ mệnh' của TableCell sẽ giúp mấy đứa 'code' Flutter 'ngon lành' hơn rất nhiều đó! Cứ 'quẩy' đi, có gì thắc mắc cứ 'hú' anh Creyt nhé!