Flutter/Dart - Vertically Centre Gridview - flutter

Question

I am trying to centre a gridview in the centre of my scaffold but I am struggling to achieve this. I have tried wrapping in a Container with the alignment arguments as well as in a column and centre widgets. I have only been able to align my gridview in the centre horizontally. Can someone help? Here is my code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("My gridview"),
),
body: Center(
child: Padding(
padding: const EdgeInsets.only(left: 50, right: 50),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: MediaQuery.of(context).size.height * 0.4,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
height: double.infinity,
child: Center(
child: Text("Row Item 1"),
),
),
),
Expanded(
child: Container(
height: double.infinity,
child: Center(
child: Text("RowItem2"),
),
),
),
],
),
),
),
//CENTRE THE BELOW WIDGET IN MIDDLE OF SCREEN
Expanded(
child: Container(
child: GridView.builder(
shrinkWrap: true,
itemCount: 10,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
//The maximum horizontal width of a single child Widget
maxCrossAxisExtent: 50,
// horizontal spacing between individual child widgets
mainAxisSpacing: 10.0,
//Vertical vertical spacing between individual child widgets
crossAxisSpacing: 10.0,
),
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text(
index.toString(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),);
},
),
),
)
],
),
),
),
);
}

Answer 1

Try the following, maybe your widget is taking constraints from its parents
SizedBox(
width:MediaQuery.of(context).size.width,
child:Wrap(
alignment: WrapAlignment.start
children:[
//CENTRE THE BELOW WIDGET IN MIDDLE OF SCREEN
Expanded(
child: Container(
child: GridView.builder(
shrinkWrap: true,
itemCount: 10,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
//The maximum horizontal width of a single child Widget
maxCrossAxisExtent: 50,
// horizontal spacing between individual child widgets
mainAxisSpacing: 10.0,
//Vertical vertical spacing between individual child widgets
crossAxisSpacing: 10.0,
),
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text(
index.toString(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),);
},
),
),
)
],
),
),

Answer 2

Kindly try using a stack, As there is not pictorial representation of your expected result, I have tried according to your question statement, the code is here as follows (The colors have been changed for reference).
return Scaffold(
appBar: AppBar(
title: Text("My gridview"),
),
body: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
child: Center(
child: Text("Row Item 1"),
),
),
),
Expanded(
child: Container(
child: Center(
child: Text("RowItem2"),
),
),
),
],
),
SizedBox(
height: 30,
),
Container(
height: MediaQuery.of(context).size.height * 0.2,
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.05),
child: Expanded(
child: Container(
color: Colors.amber,
child: GridView.builder(
shrinkWrap: true,
itemCount: 100,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
//The maximum horizontal width of a single child Widget
maxCrossAxisExtent: 50,
// horizontal spacing between individual child widgets
mainAxisSpacing: 10.0,
//Vertical vertical spacing between individual child widgets
crossAxisSpacing: 10.0,
),
itemBuilder: (context, index) {
return Card(
child: Center(
child: Text(
index.toString(),
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold),
),
),
);
},
),
),
),
),
],
)
],
),
);