CODEWITHSUNDEEP
listviewflutter
jasonflaherty
jasonflaherty

Reputation: 1944

Flutter SilverList Separator / Divider between list items

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?

Upvotes: 2

Views: 2769

Answers (2)

VadimKo
VadimKo

Reputation: 210

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,
  ),

Upvotes: 2

Karim Elghamry
Karim Elghamry

Reputation: 1421

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,
          ),

Upvotes: 5

Related Questions