Add a GridView to the end of listview - flutter

Question

i am new to flutter , i am trying to add a GridView to the end of my listview,my goal is in the end of the screen i find the gridview , but i have errors :
The relevant error-causing widget was:
GridView file:///C:/Users/Fares/AndroidStudioProjects/tl_fantasy/lib/tl/tl.dart:211:33
When the exception was thrown, this was the stack:
#0 RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1356:15)
#1 RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1417:6)
#2 RenderObject.layout (package:flutter/src/rendering/object.dart:1756:9)
#3 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
#4 RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
this error show up only when i add in the end of the file the container of gridview
hero my code :
import 'package:flutter/material.dart';
class TL extends StatelessWidget{
List<String> images = [
"https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",
"https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",
"https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",
"https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png"
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.purple, Colors.blue])
),
child: ListView(
children: [
SizedBox(
height: 20,
),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Text(
"Tunisian League",
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w900, color: Colors.white),
),
),
SizedBox(
height: 30,
),
Container(
margin: EdgeInsets.fromLTRB(15, 0, 15, 0),
child: Column(
children: [
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 1,
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 1,
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 10,
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 1,
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 1,
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 10,
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 1,
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 1,
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
child: Align(
child: Text("Click Here", style: TextStyle(fontSize: 17),textAlign: TextAlign.right, ),
alignment: Alignment.centerLeft,
),
onPressed: (){},
color: Colors.grey.shade300,
textColor: Colors.black,
padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
splashColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
),
),
SizedBox(
height: 30,
)
],
),
),
Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
itemCount: images.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0
),
itemBuilder: (BuildContext context, int index){
return Image.network(images[index]);
},
)
)
],
),
)
);
}
}
I hope that i can find a solution for that problem

Answer 1

Add the 'shrinkWrap' property to the GridView.
Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
shrinkWrap: true,
itemCount: images.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0
),
itemBuilder: (BuildContext context, int index){
return Image.network(images[index]);
},
)
)
For more details on why the 'shrinkWrap' property is needed, you can refer to this : What does the shrink wrap property do in flutter?

Answer 2

All you have to do is add shrinkWrap to your Gridview as follows :
Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
shrinkWrap: true,
itemCount: images.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0
),
itemBuilder: (BuildContext context, int index) {
return Image.network(images[index]);;
},
)
)