Why "SingleChildScrollView" Doesn't work around "AspectRatio" widget on Flutter? - flutter

Question

This is my simple code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyMobileBody(),
);
}
}
class MyMobileBody extends StatelessWidget {
const MyMobileBody({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) => Scaffold(
backgroundColor: Colors.deepPurple[200],
appBar: AppBar(
title: Text('M O B I L E'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
// video section
Padding(
padding: const EdgeInsets.all(8.0),
child: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: Colors.deepPurple[400],
),
),
),
// comment section & recommended videos
Expanded(
child: ListView.builder(
itemCount: 8,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.deepPurple[300],
height: 120,
),
);
},
),
)
],
),
),
),
);
}
}
It gets the bottom overflow yellow/black error. I want to make the AspectRatio widget scrollable but using SingleChildScrollView didn't work. I also tried ConstrainedBox like below but it didn't work too:
// comment section & recommended videos
ConstrainedBox(
constraints: BoxConstraints(maxHeight: constraints.maxHeight),
child: Expanded(
child: ListView.builder(
itemCount: 8,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.deepPurple[300],
height: 120,
),
);
},
),
),
)

Answer 1

Add shrinkWrap : true to the ListView, then remove the Expanded widget that's wrapping the list view. Also add mainAxisSize : MainAxisSize.min. Then add SingleChildScrollView to the body of scaffold and the column inside it.
class MyMobileBody extends StatelessWidget {
const MyMobileBody({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) => Scaffold(
backgroundColor: Colors.deepPurple[200],
appBar: AppBar(
title: Text('M O B I L E'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize : MainAxisSize.min,//<--here
children: [
// video section
Padding(
padding: const EdgeInsets.all(8.0),
child: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: Colors.deepPurple[400],
),
),
),
// comment section & recommended videos
//<--here removed expanded
ListView.builder(
shrinkWrap:true,//<--here
itemCount: 8,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.deepPurple[300],
height: 120,
),
);
},
)
],
),
),
),
),
);
}
}