Using ListView in SingleChildScrollView - flutter

Question

I am working on a web design where I need to create several ListViews in one page. Now, I also want that my whole page will also be scrollable like a webpage. What happening is that with SingleChildScrollView ListViews stop scrolling. I am using Expanded and tried several ways but unable to find a solution. Anybody, knows how to solve this? Thank you very much in advance.
class SchemaPage extends StatelessWidget {
final String text;
SchemaPage({Key? key, required this.text}) : super(key: key);
//If I use SingleChildScrollView here, My list views stop scrolling but If I remove ListView, it works fine.
Widget build(BuildContext context) => Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AppBar(), //Custom App Bar
SizedBox(
height: 15,),
Expanded(
flex: 2,
child: Container(
width: 264,
padding: EdgeInsets.all(36),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Scheme',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(
height: 10,
),
Text(
'Person',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(
height: 20,
),
Expanded(
flex:4,
child: Container(
child: ListView(
shrinkWrap: true,
children: [
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
],
),
),
),
SizedBox(
height: 5,
),
InkWell(
child: Text('more',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w700)),
onTap: () {},
),
SizedBox(height: 30,),
Text(
'Person',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(height: 30,),
//Here I wanted to use another ListView but I need to make page scrollable
],
),
),
),
],
),
),
);
}

Answer 1

I found the solution. With SingleChildScollView() widget, I do not need to use Expanded widget. Moreover, I need to give my ListView() fixed height by wrapping it either in Container() widget or SizedBox() widget.
class SchemaPage extends StatelessWidget {
final String text;
SchemaPage({Key? key, required this.text}) : super(key: key);
Widget build(BuildContext context) => SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 110, child: AppBar()),
Container(
padding: EdgeInsets.all(36),
child: Text(
'Schema',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.black),
),
),
Container(
padding: EdgeInsets.only(left: 36),
child: Text(
'Person',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
),
Container(
padding: EdgeInsets.only(left: 36),
width: 264,
height: 300,
child: ListView(
//physics: ClampingScrollPhysics(),
shrinkWrap: true,
children: [
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
],
),
),
SizedBox(
height: 5,
),
Container(
padding: EdgeInsets.only(left: 36),
child: InkWell(
child: Text('More',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w700)),
onTap: () {},
),
),
SizedBox(height: 30,),
Container(
padding: EdgeInsets.only(left: 36),
child: Text(
'Plans',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
),
SizedBox(height: 30,),
],
),
);
}