Scroll horizontally in ListView builder within a Future builder - Flutter - flutter

Question

I am trying to create a horizontally scrollable list of cards but it breaks each. I am just not sure where I am going wrong. I tried adding Expandable in several places and I still get errors.
I am hoping this is resolvable or do I need to separate each element within the Container/Column (2nd one).
It is definitely some sort of sizing I am missing but just not able to pinpoint where.
body: SafeArea(
child: Column(
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(...),
Padding(...),
Padding(...),
SizedBox(...),
Padding(...),
SizedBox(...),
Padding(...),
SizedBox(...),
Container(
height: 200,
color: Colors.blue[200],
child: ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
scrollDirection: Axis.vertical,
children: [
FutureBuilder(
future: getAudioList(),
builder: (context, data) {
if (data.hasError) {
return Center(child: Text("${data.error}"));
} else if (data.hasData) {
var items = data.data as List<MyOtherFunc>;
var categories;
//Split into categories
if (items != null) {
categories = groupBy(
items, (MyOtherFunc ma) => ma.category);
Map<String, List<MindfulAudio>> catMap =
categories;
return new ListView.builder(
padding:
const EdgeInsets.fromLTRB(8, 0, 8, 0),
itemCount: catMap.length,
physics:
const AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (context, index) {
String key = catMap.keys.elementAt(index);
return Card(
child: ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
MyFunc(
catMap[key], key),
),
);
},
leading: Icon(icons[index],
size: 25, color: colour[index]),
title: new Text("$key"),
trailing: new IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
MyFunc(
catMap[key], key),
),
);
},
icon: Icon(
FontAwesomeIcons.chevronRight,
color: PINK,
)),
),
);
},
);
}
return Center(
child: CircularProgressIndicator(),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
],
),
),
],
),
),
],
),
),

Answer 1

Try this layout
SizedBox(
height: MediaQuery.of(context).size.height,
width : MediaQuery.of(context).size.width,
child: SingleChildScrollView (
child: Column(
children: [
//Other widgets which will scroll vertically in the column
SingleChildScrollView (
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
//Items you wish to scroll horizontally
]
)
),
//Some more widgets if you wish to add below the horizontal scroll
]
)
)
)