Unable to scroll on page using listview inside gridview - flutter

Question

I'm trying to develop a dashboard page, with 4 gridviews in a row and 2 gridviews in another row(image below). I'm trying to make the page scrollable and make it look like the image shown below:
I have developed the layout on flutter with code below:
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class Reporting extends StatefulWidget {
#override
_Reporting createState() => _Reporting();
}
class _Reporting extends State<Reporting> {
SfCartesianChart _getAnimationLineChart() {
return SfCartesianChart(
plotAreaBorderWidth: 0,
primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)),
primaryYAxis: NumericAxis(
majorTickLines: MajorTickLines(color: Colors.transparent),
axisLine: AxisLine(width: 0),
minimum: 0,
maximum: 100),
);
}
#override
Widget build(BuildContext context) {
;
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.grey.shade100,
),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CustomAppBar(),
Expanded(
child: Column(
children: <Widget>[
ListView(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
GridView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 6 / 3.5,
crossAxisCount: MediaQuery.of(context)
.size
.width >=
1300
? 4
: MediaQuery.of(context).size.width >= 700
? 2
: 1),
children: [
Card(
margin: EdgeInsets.all(20.0),
//margin: EdgeInsets.fromLTRB(80, 60, 80, 60),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Number Of Bugs",
style: TextStyle(
color: Colors.black, fontSize: 30.0),
),
Text(
"Critical, High, Info",
style: TextStyle(
color: Colors.green[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 30.0),
),
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
],
),
GridView(
shrinkWrap: true,
padding: EdgeInsets.only(
//top: 20.0,
left: 90.0,
right: 100.0),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 3 / 2,
crossAxisCount: MediaQuery.of(context)
.size
.width >=
1300
? 2
: MediaQuery.of(context).size.width >=
700
? 2
: 1),
children: <Widget>[
Card(
//margin: EdgeInsets.all(20.0),
//margin: EdgeInsets.fromLTRB(80, 60, 80, 60),
elevation: 3.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//mychart2Items("Conversion","0.9M","+19% of target"),
_getAnimationLineChart(),
],
),
),
Card(
//margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 30.0),
),
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
])
],
),
],
),
),
],
),
),
),
);
}
}
I'm getting an error and it is overflowing. Things that I have tried to make it scrollable are used SingleChildScrollView, added shrinkwrap, added scrollAxisDirection. But nothing seems to work. Can someone guild me on how to solve this problem.
A RenderFlex overflowed by 408 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/akramkhan/Documents/cshweb/cshwebapp/lib/pages/Reporting.dart:43:24
════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

I tried your code and you could remove a couple of widgets and start with this:
return Scaffold(
body: SingleChildScrollView(
child: Column(children: <Widget>[
GridView(),
GridView(),
]),
),
);
then you can disable scrolls on the grid views and add more things you need.
Hope this helps. Let me pls know if this solves your issue