You can wrap your `Column` inside a `SingleChildScrollView` widget to make the whole column scrollable. The Code Should be :
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child:SingleChildScrollView(
child: Column(
children: [
Container(
margin: EdgeInsets.only(left: 24, right: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 22),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Message("Hello, Guest!", size: 32),
Icon(
CustomIcons.statistics,
color: AppColors.blue,
size: 32.0,
),
],
),
SizedBox(height: 14),
Message("What worries you now? Select or Add.", size: 14),
],
),
),
SizedBox(height: 16),
GridView.count(
primary: true,
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 40.0,
mainAxisSpacing: 40.0,
padding: const EdgeInsets.all(20.0),
children: _items,
),
],
),
),
),
);
}
}
So I tried to produce a minimum working bit of code, and ended up with a workable solution (even if all the details aren't ironed out, like the first locked column being of flexible width instead of a fixed width as desired). Hopefully this will help others trying to produce something similar. What's interesting is that the Table construct is needed here, because replacing the TableRow (wrapped by Table) with just a Row causes an overflow error. I would still be interested in understanding why that is since it seems crucial to the layout engine.
```
@override
Widget build(BuildContext context) {
return ListView(
padding: EdgeInsets.all(5.0),
children: <Widget>[
Table(
children: <TableRow>[
TableRow(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// first locked column items
],
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
// table header items
],
),
Row(
children: <Widget>[
// data cells
],
),
Row(
children: <Widget>[
// data cells
],
),
],
),
),
],
),
],
),
],
);
}
```
