ListView.separated

  • Code

    ListView.separated is a widget in Flutter used to create a scrollable list with separators between its children. It allows you to define custom separators between items in the list.

    
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Separated ListView Example')),
            body: MyListView(),
          ),
        );
      }
    }
    
    class MyListView extends StatelessWidget {
      final List<String> items = List.generate(20, (index) => 'Item ${index + 1}');
    
      @override
      Widget build(BuildContext context) {
        return ListView.separated(
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(items[index]),
              onTap: () {
                // Handle item tap
                print('Tapped on ${items[index]}');
              },
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return Divider(
              color: Colors.grey,
              thickness: 1.0,
            );
          },
        );
      }
    }
    
    
    

    In this example, ListView.separated is used to create a list of 20 items ('Item 1', 'Item 2', ... 'Item 20'). The itemBuilder is responsible for creating each item in the list, while separatorBuilder defines the separator between the items. In this case, a simple Divider widget is used as the separator.