Responsive GridView fullScreen flutter - flutter

Question

I would like to have my gridview to take the whole screen, but i can't find a way to do this.
I already check multiple blog like :
https://medium.com/nusanet/flutter-gridview-bad48c1f216c
But this doesn't seem to work in my case.
Even when i'm using MediaQuery Data to get the screen width and height to adapt the childAspectRation.
Here my gridview :
GridView.count(
childAspectRatio: (widthScreen / heightScreen),
shrinkWrap: true,
crossAxisCount: 2,
physics: NeverScrollableScrollPhysics(),
crossAxisSpacing: 15,
mainAxisSpacing: 10,
padding: const EdgeInsets.all(5),
children: <Widget>[
CardItem(
imageUrl: 'assets/images/apprendreajouer.jpg',
title: 'Apprendre à jouer',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Cours",
pageKey: 1,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/exercices.jpeg',
title: 'Exercice',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Exercices",
pageKey: 2,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/partition.jpg',
title: 'Partition',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Partition",
pageKey: 3,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/dictionnaire.jpeg',
title: 'Mon dictionnaire',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Dictionnaire d'accords",
pageKey: 4,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/examen.jpeg',
title: 'Examen',
),
CardItem(
imageUrl: 'assets/images/apropos.jpg',
title: 'A propos',
),
],
),
Here below an image of what i want :
Update of what i get using #Thierry source code :
Any help would be great.

Answer 1

You have some discrepancies in your code.
You cannot define:
6 children for your GridView
childAspectRatio of widthScreen / heightScreen
crossAxisCount: 2
You can keep your childAspectRatio and crossAxisCount if you reduce the number of children to 4.
If you want 6 children on 3 Rows, then change the childAspectRatio to MediaQuery.of(context).size.aspectRatio * 3 / 2.
If you want 6 children on 2 Rows, then increase crossAxisCount to 3, and change the childAspectRatio to MediaQuery.of(context).size.aspectRatio * 2 / 3.
Note: You can continue like that. if you want m Rows of n children, the childAspectRatio should be m/n.
Full source code (6 children on 3 Rows)
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('GridView Demo')),
body: LayoutBuilder(
builder: (context, constraints) => GridView.count(
childAspectRatio: constraints.biggest.aspectRatio * 3 / 2,
shrinkWrap: true,
crossAxisCount: 2,
physics: NeverScrollableScrollPhysics(),
children: List.generate(
6,
(index) => Padding(
padding: const EdgeInsets.all(4.0),
child: CardItem(
imageUrl: 'assets/images/abstract$index.jpg',
title: 'Abstract $index',
),
),
).toList(),
),
),
);
}
}
class CardItem extends StatelessWidget {
final String imageUrl;
final String title;
final VoidCallback function;
const CardItem({Key key, this.imageUrl, this.title, this.function})
: super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: function,
child: Card(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(imageUrl),
fit: BoxFit.cover,
alignment: Alignment.topCenter,
),
),
child: Text(title),
),
),
);
}
}