Separator/Divider in SliverList flutter
I have better solution. Wrap your widget into Column
then give a conditional for build Divider
. The Divider
Widget will appears except on the last index. Example:
CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(_, int index) {
return Column(
children: <Widget>[
// Put your widget here
YourWidget(),
// This divider will not appears on last index
if(index != (item.length - 1))
const Divider(),
],
);
},
childCount: item.length,
),
),
],
),
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),
),
),
],
);
Although this question is very old, I will add my answer for future readers.
You simply wrap your widget with a Container
and then you give the container a bottom border. Here is an example:
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.grey.shade300, width: 0.5))),
child: YourWidget(),
),
Simple ways,
Using SliverFillRemaining
return CustomScrollView(
slivers: <Widget>[
SliverFillRemaining(
child: ListView.separated(
itemCount:value.length,
//shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
//padding: EdgeInsets.all(0),
separatorBuilder: (BuildContext context, int index){
return Divider();
},
itemBuilder: (BuildContext context, int index) {
//widget return
})
),
Using SliverList
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Column(
children: <Widget>[
SizedBox(height: 5),
//your main widget is here
SizedBox(height: 5),
Divider(height: 1)
],
);
},
childCount: model.length,
),
)