CODEWITHSUNDEEP
flutterdartflutter-layout
Raine Dale Holgado
Raine Dale Holgado

Reputation: 3460

Flutter - How to add first top and last bottom list with divider() on ListView.separated()

I added a divider on my list but i also want to have a divider line on the top part and last end part on the list. Because the divider line are only in the middle of each list.

ListView.separated(
 itemCount: user.personList.length,
 separatorBuilder: (context, index) => Divider(),
 itemBuilder: (context, index){
   return ListTile(
    title: Text(user.personList[index].id)
  )
 }
)

Upvotes: 4

Views: 3504

Answers (1)

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27177

You can add divider on top and bottom in following way.

you have to increase length by 2 and on 0 and length-1 return container, which will give make divider more clearly. if you want dedicated divider then you can also use divider widget.

ListView.separated(
      itemCount: user.personList.length + 2,
      separatorBuilder: (context, index) => Divider(),
      itemBuilder: (context, index) {
        if (index == 0 || index == user.personList.length + 1) {
          return Divider(
            color: Colors.black,
            thickness: 2,
          );
        }
        return ListTile(title: Text((index - 1).toString())); // note: you have to access element by -1;
      },
    ),

Upvotes: 4

Related Questions