Flutter - Sliver Layout horizontal scroll inside Sliver List
Use a ListView
inside of a SliverToBoxAdapter
.
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.all(16.0),
sliver: SliverList(
delegate: SliverChildListDelegate(
[
Card(
child: Text('data'),
),
Card(
child: Text('data'),
),
Card(
child: Text('data'),
),
Card(
child: Text('data'),
),
],
),
),
),
SliverToBoxAdapter(
child: Container(
height: 100.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
width: 100.0,
child: Card(
child: Text('data'),
),
);
},
),
),
),
],
),
);
}
the other solution doesn't work for me as it gives error when I use a ListView
here is a class I wrote called HorizontalSliverList
which does the job nice and easy
here is the class you need to copy:
class HorizontalSliverList extends StatelessWidget {
final List<Widget> children;
final EdgeInsets listPadding;
final Widget divider;
const HorizontalSliverList({
Key key,
@required this.children,
this.listPadding = const EdgeInsets.all(8),
this.divider,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverToBoxAdapter(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Padding(
padding: listPadding,
child: Row(children: [
for (var i = 0; i < children.length; i++) ...[
children[i],
if (i != children.length - 1) addDivider(),
],
]),
),
),
);
}
Widget addDivider() => divider ?? Padding(padding: const EdgeInsets.symmetric(horizontal: 8));
}