ListView trong Flutter

1. ListView cơ bản

Hiển thị danh sách items có thể scroll:


ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

2. ListView.builder

Lazy loading - chỉ build items khi cần hiển thị:


ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

💡 Luôn dùng ListView.builder cho danh sách dài!

3. ListView.separated

Có divider giữa các items:


ListView.separated(
  itemCount: 20,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

4. Scroll Direction


ListView(
  scrollDirection: Axis.horizontal,  // Scroll ngang
  children: [
    Container(width: 100, color: Colors.red),
    Container(width: 100, color: Colors.green),
    Container(width: 100, color: Colors.blue),
  ],
)

5. Padding


ListView.builder(
  padding: EdgeInsets.all(16),
  itemCount: 10,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

6. shrinkWrap

Cho ListView co theo nội dung (thay vì expand):


Column(
  children: [
    Text('Header'),
    ListView.builder(
      shrinkWrap: true,  // Co theo nội dung
      physics: NeverScrollableScrollPhysics(),  // Disable scroll riêng
      itemCount: 5,
      itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
    ),
    Text('Footer'),
  ],
)

⚠️ shrinkWrap tốn performance, dùng hạn chế!

7. ScrollController

Điều khiển scroll programmatically:


class MyList extends StatefulWidget {
  @override
  State<MyList> createState() => _MyListState();
}
 
class _MyListState extends State<MyList> {
  final _controller = ScrollController();
 
  void _scrollToTop() {
    _controller.animateTo(
      0,
      duration: Duration(milliseconds: 500),
      curve: Curves.easeOut,
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            controller: _controller,
            itemCount: 100,
            itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
          ),
        ),
        ElevatedButton(onPressed: _scrollToTop, child: Text('Scroll to top')),
      ],
    );
  }
}

8. Pull to Refresh


RefreshIndicator(
  onRefresh: () async {
    // Fetch new data
    await Future.delayed(Duration(seconds: 1));
  },
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
)

9. Infinite Scroll


class InfiniteList extends StatefulWidget {
  @override
  State<InfiniteList> createState() => _InfiniteListState();
}
 
class _InfiniteListState extends State<InfiniteList> {
  final List<int> _items = List.generate(20, (i) => i);
  bool _isLoading = false;
 
  void _loadMore() async {
    if (_isLoading) return;
    setState(() => _isLoading = true);
    
    await Future.delayed(Duration(seconds: 1));
    
    setState(() {
      _items.addAll(List.generate(10, (i) => _items.length + i));
      _isLoading = false;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _items.length + 1,  // +1 for loading indicator
      itemBuilder: (context, index) {
        if (index == _items.length) {
          _loadMore();
          return Center(child: CircularProgressIndicator());
        }
        return ListTile(title: Text('Item ${_items[index]}'));
      },
    );
  }
}

10. Ví dụ thực tế

Chat List


ListView.builder(
  reverse: true,  // Scroll từ dưới lên
  itemCount: messages.length,
  itemBuilder: (context, index) {
    final message = messages[index];
    return Align(
      alignment: message.isMe ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: message.isMe ? Colors.blue : Colors.grey[300],
          borderRadius: BorderRadius.circular(12),
        ),
        child: Text(message.text),
      ),
    );
  },
)

Settings Page


ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('Account'),
      trailing: Icon(Icons.chevron_right),
      onTap: () {},
    ),
    Divider(),
    ListTile(
      leading: Icon(Icons.notifications),
      title: Text('Notifications'),
      trailing: Switch(value: true, onChanged: (v) {}),
    ),
    Divider(),
    ListTile(
      leading: Icon(Icons.dark_mode),
      title: Text('Dark Mode'),
      trailing: Switch(value: false, onChanged: (v) {}),
    ),
  ],
)

📝 Tóm tắt

Constructor	Khi nào dùng
`ListView()`	Ít items, static
`ListView.builder()`	Nhiều items, dynamic
`ListView.separated()`	Cần divider

Property	Mục đích
`itemCount`	Số lượng items
`scrollDirection`	Hướng scroll
`shrinkWrap`	Co theo nội dung
`physics`	Behavior scroll
`controller`	Điều khiển scroll
`reverse`	Đảo ngược thứ tự