Flutter - Sliver Layout horizontal scroll inside Sliver List - mobile

Question

I try to make horizontal scrollable list inside Sliver List (CustomScrollview - SliverList)
This is my Code:
import 'package:flutter/material.dart';
class DetailScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
DetailAppBar(),
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'),),
// Scrollable horizontal widget here
],
),
),
),
],
),
bottomNavigationBar: NavigationButton());
}
}
Can you give me example or solution to this case? i really need some help.

Answer 1

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'),
),
);
},
),
),
),
],
),
);
}

Answer 2

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