Flutter - Sliver Layout horizontal scroll inside Sliver List Flutter - Sliver Layout horizontal scroll inside Sliver List flutter flutter

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));}