Search code examples
flutterdartflutter-sliver

Separator/Divider in SliverList flutter


How can we implement Separator/Divider in SliverList. ListView.separated is handy way to create separators in list but i do not see any docs or examples about SliverList


Solution

  • Similar as ListView.separated

      import 'dart:math' as math;
    
      List<String> values = List();
      for (int i = 1; i <= 50; i++) {
        values.add(i.toString());
      }
    
      return CustomScrollView(
        semanticChildCount: values.length,
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                final int itemIndex = index ~/ 2;
                if (index.isEven) {
                  return Padding(
                      child: Text(values[itemIndex]),
                      padding: EdgeInsets.all(16));
                }
                return Divider(height: 0, color: Colors.grey);
              },
              semanticIndexCallback: (Widget widget, int localIndex) {
                if (localIndex.isEven) {
                  return localIndex ~/ 2;
                }
                return null;
              },
              childCount: math.max(0, values.length * 2 - 1),
            ),
          ),
        ],
      );