Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 434
inval Avatar asked Sep 02 '19 07:09

inval


People also ask

How do you add a separator line in flutter?

If you have a list of widgets, you may need to add a separator between the widgets. In Flutter, there are two widgets suitable for that purpose: Divider and VerticalDivider . Divider is used to create a horizontal line divider, while VerticalDivider is used to create a vertical line divider.

How do you add a divider to a ListView in flutter?

separated creates a fixed-length, scrollable , linear array of list “items” separated by list item “separators”. The itemBuilder callback is called whenever there are indices ≥ 0 and< itemCount . The separatorBuilder callback will be called with indices greater than or equal to zero and less than itemCount - 1 .


1 Answers

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),
        ),
      ),
    ],
  );
like image 198
Carlos Eduardo Avatar answered Sep 23 '22 10:09

Carlos Eduardo