Flutter SilverList Separator / Divider between list items

Question

Using ListView.separated we can add Divider() between the list items, however, once i transitioned into the SliverList I am not able to see my divider.

delegate: SliverChildBuilderDelegate(
            // displays the index of the current item.
            (context, index) => new ListTile(
              title: Text(_sagItems[index].manufacturer, style: TextStyle(fontSize: 18),),
              subtitle: Text(_sagItems[index].model, style: TextStyle(fontSize: 16)),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailScreen(sagitem: _sagItems[index]),
                    ),
                  );
                },
              ),
              //DIVIDER NOT WORKING HERE
              Divider(color: Colors.blueGrey),
              childCount: _sagItems.length,
          ),

What is the key to adding a divider with SliverList?

Karim Elghamry · Accepted Answer · 2019-08-29T18:54:29.707

5

you can do it like this:

      delegate: SliverChildBuilderDelegate(
            (BuildContext context,int index){
              if(index.isOdd){
                return Divider(color: Colors.blueGrey);
              }
              return ListTile(
              title: Text(_sagItems[index~/2].manufacturer, style: TextStyle(fontSize: 18),),
              subtitle: Text(_sagItems[index~/2].model, style: TextStyle(fontSize: 16)),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailScreen(sagitem: _sagItems[index~/2]),
                    ),
                  );
                },
              );

              },
             childCount: (_sagItems.length * 2)-1,
          ),

edited Aug 29 '19 at 18:54

answered Aug 29 '19 at 17:35

Karim Elghamry

1,351
7
15

Thanks. This almost works for me, however, it removes my odd list items. I do see the childcount update here, but must be missing something. – jasonflaherty Aug 29 '19 at 18:42
@jasonflaherty I have edited my answer, just divide the `index` by **2**. it should work now. – Karim Elghamry Aug 29 '19 at 18:45
Interesting, i get the error: _sagItems[index/2] - The argument type 'double' can't be assigned to the parameter type 'int'. – jasonflaherty Aug 29 '19 at 18:50
Ah, it looks like with Dart, you must use truncating division like this: ~/2 https://stackoverflow.com/a/20717065/350421 – jasonflaherty Aug 29 '19 at 18:52
1

@jasonflaherty yes, that slipped under my radar. been coding alot of cpp recently. Anyways, is it working now? – Karim Elghamry Aug 29 '19 at 18:53

score 2 · Answer 2 · answered Apr 16 '20 at 11:57

I'm sure that previous answer is working fine, however i'm not a fan of additional calculations. It brings a bit more complexity to the code, and later on it's a bit more difficult to maintain.

Instead i suggest you to consider placing your ListTile inside a Column, and hide Divider only if your index is reached the last record.

delegate: SliverChildBuilderDelegate(
    // displays the index of the current item.
    (context, index) => Column(
      children: <Widget>[
        new ListTile(
          title: Text(
            _sagItems[index].manufacturer,
            style: TextStyle(fontSize: 18),
          ),
          subtitle: Text(_sagItems[index].model, style: TextStyle(fontSize: 16)),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailScreen(sagitem: _sagItems[index]),
              ),
            );
          },
        ),
        index < _sagItems.length - 1 ? Divider(color: Colors.blueGrey) : Container(),
      ],
    ),
    childCount: _sagItems.length,
  ),

Flutter SilverList Separator / Divider between list items

2 Answers2