Vertical scrolling with horizontal scrolling lists render errors - flutter

Question

Having difficulty with a Flutter layout which includes an appBar() at the top, a BottomNavigationWidget() at the bottom and content in the middle that is vertically scrollable but has horizontal list views as well. The problem is I continue to run into viewport errors that vary in their specificity, no matter what I attempt to correct or modify related to the SingleChildScrollView() that sits beneath the appBar().
Each horizontal row is built from a future that returns a list of images that comes from ContentList. Since I need to be able to make multiple requests for different images in each horizontal row, I call buildCategory("title", 0), buildCategory("new title", 1), buildCategory("another title", 2)and so on, as to pull down different images and display them with a unique title as illustrated in the image below.
I've constructed that layout like so below however you can't scroll vertically, only horizontally on each included buildCategory method despite being wrapped in a SingleChildScrollView and contained within a Column. If I deviate from this I get layout exceptions thrown.
I've included the full code I'm working with to better share/show.
Future<List<ContentDetails>> getContent(http.Client client, int filter) async {
var response = await client.get(
Uri.parse(baseUrl + '/imageendpoint/$filter'));
if (response.statusCode == 200) {
compute(parseContentDetails, response.body);
}
}
List<ContentDetails> parseContentDetails(String responseBody) {
final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
return parsed
.map<ContentDetails>((json) => ContentDetails.fromJson(json))
.toList();
}
class ContentList extends StatefulWidget {
const ContentList({Key? key, required this.photos}) : super(key: key);
final List<ContentDetails> photos;
#override
State<ContentList> createState() => _ContentListState();
}
class _ContentListState extends State<ContentList> {
#override
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: widget.photos.length,
itemBuilder: (context, index) {
return Stack(
alignment: Alignment.topCenter,
children: <Widget>[
InkWell(
onTap: () {},
child: Container(
height: 150.0,
width: 150.0,
child: Container(
image: DecorationImage(
fit: BoxFit.cover,
alignment: FractionalOffset.center,
image: widget.photos[index].image,
),
),
child: Container(
child: Padding(
padding: const EdgeInsets.only(bottom: 0),
child: Text(widget.photos[index].name)),
),
),
),
),
),
],
);
},
);
}
}
Widget appBar() {
return AppBar(
title: const Text("Welcome"),
centerTitle: true,
backgroundColor: Colors.transparent
);
}
Widget horizontalContent(int filter) {
return FutureBuilder<List<ItemDetails>>(
future: getContent(http.Client(), filter),
builder: (context, snapshot) {
if (snapshot.hasError) {
return const Center(
child: Text('Error.'),
);
} else if (snapshot.hasData) {
return ContentList(photos: snapshot.data!);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
Widget buildCategory(String title, int category) {
return Flexible(
child: ListView(
shrinkWrap: true,
children: [
Padding(
padding: const EdgeInsets.all(5.0),
child:
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
TitleWidget(
titleText: title,
titleAlign: TextAlign.right),
SmallButton(
buttonText: "Details",
onPressed: () => {},
)
]),
),
SizedBox(height: 200, child: horizontalContent(filter))
],
),
);
}
class _MainPageState extends State<MainPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
bottomNavigationBar: BottomNavigationWidget(),
body: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(0, 85, 85, 85),
Color.fromRGBO(0, 66, 66, 66),
Color.fromRGBO(0, 0, 0, 0),
],
stops: [0.0, 0.3],
),
),
child:
Image.asset("images/background.png", fit: BoxFit.cover)),
appBar(),
SingleChildScrollView(
child: Column(mainAxisSize: MainAxisSize.min, children: [
buildCategory("title", 0),
buildCategory("title", 1),
buildCategory("title", 2),
buildCategory("title", 3),
buildCategory("title", 4),
buildCategory("title", 5),
buildCategory("title", 6),
])),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[BottomNavigationWidget()],
),
],
),
);
}
}

Answer 1

On your Scaffold use appBar and
AppBar appBar() {
return AppBar(
title: const Text("Welcome"),
centerTitle: true,
backgroundColor: Colors.transparent);
}
return Scaffold(
appBar: appBar(),
// bottomNavigationBar: ,
body: ListView.builder( // top level listView
itemCount: 44,
itemBuilder: (context, index) {
return Container(
height: 200, // must provide based on your preference
child: Column(
children: [
Row(
children: [
Text("header $index"),
],
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 33,
itemBuilder: (context, index) => Container(
width: 200,
height: 100,
child: Text("hrIem"),
),
),
),
],
),
);
},
),
);

Answer 2

Try this
Scaffold(
extendBodyBehindAppBar: true,
appBar: appBar(),
bottomNavigationBar: BottomNavigationWidget(),
body: ListView(
children: [
SizedBox(
height: 300, // give your height
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
mainAxisSize: MainAxisSize.min, children: [
buildCategory("title", 0),
buildCategory("title", 1),
buildCategory("title", 2),
buildCategory("title", 3),
buildCategory("title", 4),
buildCategory("title", 5),
buildCategory("title", 6),
]
)
),
),
SizedBox(
height: 300, // give your height
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
mainAxisSize: MainAxisSize.min, children: [
buildCategory("title", 0),
buildCategory("title", 1),
buildCategory("title", 2),
buildCategory("title", 3),
buildCategory("title", 4),
buildCategory("title", 5),
buildCategory("title", 6),
]
)
),
)
]
),
)