Skip to main content

Flutter: ListView và GridView widgets

· 4 min read

ListView và GridView là hai widget quan trọng trong Flutter để hiển thị dữ liệu dạng danh sách và lưới. Bài viết này sẽ hướng dẫn bạn cách sử dụng chúng một cách hiệu quả.

1. ListView Widget​

ListView là widget được sử dụng để hiển thị danh sách các phần tử theo chiều dọc hoặc ngang.

ListView Widget Examples

1.1. Basic ListView​

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Item 1'),
      subtitle: Text('Description 1'),
    ),
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Item 2'),
      subtitle: Text('Description 2'),
    ),
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Item 3'),
      subtitle: Text('Description 3'),
    ),
  ],
)

1.2. ListView.builder​

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.star),
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
    );
  },
)

1.3. ListView.separated​

ListView.separated(
  itemCount: items.length,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.star),
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
    );
  },
)

1.4. Horizontal ListView​

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(
      width: 160,
      margin: EdgeInsets.all(8),
      color: Colors.blue,
      child: Center(child: Text('Item 1')),
    ),
    Container(
      width: 160,
      margin: EdgeInsets.all(8),
      color: Colors.green,
      child: Center(child: Text('Item 2')),
    ),
    Container(
      width: 160,
      margin: EdgeInsets.all(8),
      color: Colors.red,
      child: Center(child: Text('Item 3')),
    ),
  ],
)

2. GridView Widget​

GridView là widget được sử dụng để hiển thị dữ liệu dạng lưới với các cột và hàng.

GridView Widget Examples

2.1. GridView.count​

GridView.count(
  crossAxisCount: 2,
  children: [
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.blue,
      child: Center(child: Text('Item 1')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.green,
      child: Center(child: Text('Item 2')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.red,
      child: Center(child: Text('Item 3')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.yellow,
      child: Center(child: Text('Item 4')),
    ),
  ],
)

2.2. GridView.builder​

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: Text(items[index].title),
      ),
    );
  },
)

2.3. GridView.extent​

GridView.extent(
  maxCrossAxisExtent: 200,
  children: [
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.blue,
      child: Center(child: Text('Item 1')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.green,
      child: Center(child: Text('Item 2')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.red,
      child: Center(child: Text('Item 3')),
    ),
    Container(
      margin: EdgeInsets.all(8),
      color: Colors.yellow,
      child: Center(child: Text('Item 4')),
    ),
  ],
)

3. Best Practices​

3.1. ListView​

  • Sử dụng ListView.builder cho danh sách dài
  • Thêm padding và spacing phù hợp
  • Xử lý scroll physics khi cần
  • Sử dụng const constructor khi có thể

3.2. GridView​

  • Chọn số cột phù hợp với kích thước màn hình
  • Thêm spacing giữa các item
  • Sử dụng GridView.builder cho danh sách dài
  • Tối ưu hóa kích thước item

3.3. Performance​

  • Sử dụng const constructor
  • Tránh rebuild không cần thiết
  • Sử dụng ListView.builder và GridView.builder
  • Tối ưu hóa widget tree

4. Ví dụ thực tế​

4.1. Danh sách sản phẩm​

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    final product = products[index];
    return Card(
      child: ListTile(
        leading: Image.network(product.imageUrl),
        title: Text(product.name),
        subtitle: Text(product.price.toString()),
        trailing: IconButton(
          icon: Icon(Icons.shopping_cart),
          onPressed: () {
            // Add to cart
          },
        ),
      ),
    );
  },
)

4.2. Lưới hình ảnh​

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 4,
    mainAxisSpacing: 4,
  ),
  itemCount: images.length,
  itemBuilder: (context, index) {
    return Image.network(
      images[index],
      fit: BoxFit.cover,
    );
  },
)

Kết luận​

ListView và GridView là những widget mạnh mẽ trong Flutter để hiển thị dữ liệu dạng danh sách và lưới. Việc hiểu rõ cách sử dụng chúng sẽ giúp bạn tạo ra giao diện người dùng hiệu quả và đẹp mắt.

Tài liệu tham khảo: