I was to layout a page that has a side menu and a top menu that don’t move. I wanted the rest of the page to be scrollable. I have wrapped my column in a singlechildscrollview but nothing happens. I still get an overflow error and cannot scroll. Could someone tell me what I did wrong?
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.red,
child: Row(
children: [
const SideMenu(),
Expanded(
child: Column(
children: [
Container(
height: 75.0,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: const [
Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Text(
'data',
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Text('data'),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Text(
'data',
),
),
],
),
),
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Test Text',
style: TextStyle(
fontSize: 155.0,
),
),
Text(
'Test Text',
style: TextStyle(
fontSize: 155.0,
),
),
],
),
)
],
),
),
],
),
),
);
}
}
2
Answers
you have to know behaviour of
SingleChildScrollView
try this
You should wrap your Expanded widget with a SingleChildScrollView instead of just the Column. Here’s the code: