Using both horizontal and vertical listview.builder on a page in flutter - flutter

Question

In my application, I want to show two different products on the home screen, horizontally and vertically. But I want to do this with ListView.Builder as they both come as lists. I couldn't find the right usage of this, can you help with this?
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 200.0,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 25,
itemBuilder: (BuildContext context, int index) =>
Card(
child: Center(child: Text('Horizontal List Child')),
),
),
),
ListView.builder(
itemCount: 10,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Expanded(
child: Card(
child:
Center(child: Text('Vertical List Child'))),
);
},
)
],
),
),
I can do it without using ListView.builder but I need to use ListView.builder. The height of the vertical part should be equal to the element inside.

Answer 1

You must need to define the height of any scroll view. I prefer the horizontal scroll view
SingleChildScrollView(
child: Column(
children: [
Container(
height: 150,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
...
...
...
},
),
),
ListView.builder(
itemCount: 10,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
...
...
...
},
),
],
)
)

Answer 2

Remove the SingleChildScrollView.
Add an Expanded as parent to the second ListView.
Remove the Expanded from the Card

Answer 3

Scaffold(
body: SafeArea( //in case you dont have appbar
child: CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
const SliverToBoxAdaptar(child:Container(child:ListView(...)))// horizontalList
const SliverList()// verticalSliverList
],
),
),
);
try thiss

Answer 4

Expanded makes item inside becomes full body.
just remove it and the height to make item height equals to card
return Scaffold(
appBar: AppBar(
title: Text("Sample"),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Sample 1"),
),
Container(
height: 100,
child: ListView.builder(
physics: ScrollPhysics(),
itemCount: 5,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Card(
child: Image.network("https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI",),
);
}
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Sample 2"),
),
ListView.builder(
physics: ScrollPhysics(),
itemCount: 5,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Card(
child: Image.network("https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI"),
);
}
),
],
),
),
),
);