Hiển thị danh sách với ListView trong Flutter

👋 Chào mừng trở lại với hành trình khám phá Flutter!

Tiếp nối chuỗi bài viết về các widget cơ bản nhưng vô cùng mạnh mẽ trong Flutter, hôm nay chúng ta sẽ cùng nhau đi sâu vào một thành phần không thể thiếu trong hầu hết mọi ứng dụng: ListView.

Bạn đã bao giờ lướt qua danh sách bạn bè trên mạng xã hội, xem danh sách sản phẩm trong một ứng dụng mua sắm, hay đọc danh sách các bài hát yêu thích của mình chưa? Tất cả những giao diện đó đều được xây dựng dựa trên ý tưởng của một danh sách có thể cuộn được.

Trong Flutter, ListView chính là chìa khóa để tạo ra những trải nghiệm cuộn mượt mà và hiệu quả cho người dùng khi hiển thị một tập hợp dữ liệu. Dù bạn đang làm việc với một vài item tĩnh hay hàng ngàn dữ liệu động từ API, ListView đều cung cấp các công cụ mạnh mẽ để đáp ứng nhu cầu của bạn.

Vậy, ListView là gì? Nó hoạt động như thế nào? Và có những cách nào để chúng ta sử dụng nó một cách hiệu quả trong Flutter? Hãy cùng nhau khám phá trong bài viết hôm nay nhé!

🧠 Mục tiêu bài học hôm nay

Trong bài hôm nay chúng ta sẽ cùng làm quen với cách hiển thị danh sách dữ liệu trong Flutter bằng ListView, một trong những widget quan trọng nhất để làm ứng dụng có nhiều nội dung.

📦 ListView là gì?

Trong Flutter, ListView là một widget mạnh mẽ giúp hiển thị danh sách các item có thể cuộn theo chiều dọc (hoặc ngang nếu bạn cấu hình thuộc tính scrollDirection). Nó tương tự như thẻ <ul> hay danh sách trong HTML, nhưng được tối ưu hóa cho hiệu suất và khả năng tương tác trên thiết bị di động.

🚀 Các cách tạo ListView

1. ListView() – danh sách tĩnh

Sử dụng khi bạn có một số lượng nhỏ các item đã biết trước và không thay đổi. Tất cả các item sẽ được tạo ra cùng một lúc.

ListView( children: [ ListTile(title: Text('Mục 1')), ListTile(title: Text('Mục 2')), ListTile(title: Text('Mục 3')), ],
)

2. ListView.builder() – danh sách động

Đây là cách thường được sử dụng nhất, đặc biệt khi làm việc với danh sách lớn hoặc dữ liệu động. ListView.builder() chỉ tạo ra các item khi chúng sắp được hiển thị trên màn hình, giúp tối ưu hóa hiệu suất và giảm mức tiêu thụ bộ nhớ.

ListView.builder( itemCount: 10, itemBuilder: (context, index) { return ListTile( title: Text('Luân thích số $index'), leading: Icon(Icons.star), trailing: Icon(Icons.arrow_forward_ios), onTap: () { print('Bạn đã chọn mục $index'); }, ); },
)

3. ListView.separated() – có khoảng cách giữa các mục

Tương tự như ListView.builder(), nhưng cho phép bạn chèn một widget phân cách (ví dụ: Divider() để tạo đường kẻ ngang) giữa mỗi item. Rất hữu ích để tạo giao diện danh sách rõ ràng và dễ đọc.

ListView.separated( itemCount: 10, separatorBuilder: (context, index) => Divider(), itemBuilder: (context, index) { return ListTile(title: Text('Mục $index')); },
)

Ví dụ đầy đủ

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DanhSachYeuThich(), ); }
} class DanhSachYeuThich extends StatelessWidget { final List<String> danhSach = [ 'Học Flutter', 'Xem phim', 'Nghe nhạc', 'Chạy bộ', 'Viết blog', ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Danh sách của Luân')), body: ListView.builder( itemCount: danhSach.length, itemBuilder: (context, index) { return ListTile( title: Text(danhSach[index]), leading: Icon(Icons.favorite), trailing: Icon(Icons.chevron_right), onTap: () { print('Luân chọn: ${danhSach[index]}'); }, ); }, ), ); }
}

Một số lỗi phổ biến

• Danh sách bị tràn: Nếu bạn đặt ListView trong một widget có chiều cao không xác định như Column, hãy nhớ bọc nó trong Expanded hoặc SizedBox.
• Danh sách không cuộn được: Kiểm tra xem bạn có đang dùng SingleChildScrollView lồng bên ngoài không – có thể gây lỗi.
• Hiệu suất kém với danh sách lớn (ListView()): Đối với danh sách có nhiều item, hãy ưu tiên sử dụng ListView.builder() để chỉ tạo các widget cần thiết, giúp ứng dụng chạy mượt mà hơn.

Lời kết

Trong bài học hôm nay, chúng ta đã khám phá ba cách cơ bản để hiển thị danh sách cuộn trong Flutter với widget ListView: ListView() cho danh sách tĩnh, ListView.builder() cho danh sách động và hiệu suất cao, và ListView.separated() khi bạn muốn thêm các widget phân cách giữa các item. Việc lựa chọn phương pháp nào sẽ phụ thuộc vào tính chất dữ liệu và yêu cầu hiệu suất của ứng dụng.

Trong các bài viết tiếp theo, chúng ta có thể sẽ tìm hiểu về cách hiển thị dữ liệu theo dạng lưới với GridView hoặc đi sâu hơn vào việc tùy chỉnh và tối ưu hóa hiệu suất hiển thị danh sách. Hãy cùng đón chờ những chủ đề thú vị tiếp theo nhé! 😎

Cảm ơn mọi người đã dành thời gian theo dõi bài viết này! Nếu có bất kỳ câu hỏi hay chia sẻ nào, đừng ngần ngại bình luận bên dưới.

Hẹn gặp lại! 😊