Issue
I have been experimenting with flutter and GridView. Currently I have a number of containers appearing in a grid layout, however I want to add one more container below them and custom size it. I want all the existing containers to consume 60% of the screen, whereas the new container to completely cover the remaining 40%. I have experimented with Expanded Class with no luck. Any feedback / recommendations would be greatly appreciated.
Widget build(BuildContext context){
final title = ' MyFirstApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(title),
),
body: GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
childAspectRatio: 0.80,
children: <Widget> [
new InkWell(
onTap: (){
navigateToSubPage(context, Page1());
print("Container clicked");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page1.jpg'),
Text("Page1", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),),
]),
)
),
new InkWell(
onTap: (){
navigateToSubPage(context, page2());
print("Container clicked 1");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page2.jpg'),
Text("Page2", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),),
]),
),
),
new InkWell(
onTap: (){
navigateToSubPage(context, page3());
print("Container clicked 2");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page3.jpg'),
Text("Record", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),),
]),
),
),
new InkWell(
onTap: (){
navigateToSubPage(context, page4());
print("Container clicked 3");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page4.jpg'),
Text("Page4", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),)
]),
),
),
new InkWell(
onTap: (){
print("Container clicked 4");
},
child: Container(
child: Column(
children: [
Image.asset('assets/main/page5.jpg'),
Text("Page5", style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),),
]),
),
),
new InkWell(
onTap: (){
print("Container clicked 5");
},
),
],
),
),
);
}```
Solution
AFAIK, GridView is scrollable since there are times that a grid could contain a large (or infinite) number of children that wouldn’t fit in the entire screen. If this is not what you wanted to achieve, then I suggest just using rows and columns.
Also, if you will check the properties of GridView.count() by using the "Go To Definition" operation in the IDE of your choice,it will lead you to the scroll_view.dart file. mainAxisSpacing, crossAxisSpacing and childAspectRatio are the properties whose values could be customized. So I think you’ll just need to play with those properties to get your desired height and width of those containers.
Based on my understanding, what you’d like to achieve is something like this:
Widget build(BuildContext context) {
final title = ' MyFirstApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(title),
),
body: Column(
children: <Widget>[
Expanded(
flex: 60,
child: GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
childAspectRatio: 0.80,
children: <Widget>[
new InkWell(
onTap: () {
// navigateToSubPage(context, Page1());
print("Container clicked");
},
child: Container(
color: Colors.green[100],
child: Column(children: [
// Image.asset('assets/main/page1.jpg'),
Text(
"Page1",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
)),
new InkWell(
onTap: () {
// navigateToSubPage(context, page2());
print("Container clicked 1");
},
child: Container(
color: Colors.green[200],
child: Column(children: [
// Image.asset('assets/main/page2.jpg'),
Text(
"Page2",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
),
),
new InkWell(
onTap: () {
// navigateToSubPage(context, page3());
print("Container clicked 2");
},
child: Container(
color: Colors.green[300],
child: Column(children: [
// Image.asset('assets/main/page3.jpg'),
Text(
"Record",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
),
),
new InkWell(
onTap: () {
// navigateToSubPage(context, page4());
print("Container clicked 3");
},
child: Container(
color: Colors.green[400],
child: Column(children: [
// Image.asset('assets/main/page4.jpg'),
Text(
"Page4",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
)
]),
),
),
new InkWell(
onTap: () {
print("Container clicked 4");
},
child: Container(
color: Colors.green[500],
child: Column(children: [
// Image.asset('assets/main/page5.jpg'),
Text(
"Page5",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
),
),
new InkWell(
onTap: () {
print("Container clicked 5");
},
),
],
),
),
Expanded(
flex: 40,
child: GridView.count(
crossAxisCount: 1,
children: <Widget>[
new InkWell(
onTap: () {
// navigateToSubPage(context, Page1());
print("Container clicked");
},
child: Container(
color: Colors.green[600],
child: Column(children: [
// Image.asset('assets/main/page1.jpg'),
Text(
"Remaining 40%",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
]),
)),
],
),
),
],
),
),
);}
Reusing your code (commented out some parts not needed and enhanced for visual purposes), I wrapped the 2 GridView.count() into 2 separate Expanded() widget, so that I could set the flex factor to 60 and 40 respectively. On the 2nd GridView.count() I set the crossAxisCount to 1 to fill the remaining 40% of the screen.
Answered By – MαπμQμαπkγVπ.0
Answer Checked By – Marilyn (FlutterFixes Volunteer)