I'm a new flutter developer and I am using fl_chart to make some dashboards.
My charts are well displayed with the web window on full screen (screen 2) , and once I try to resize my window, at a certain time, pie charts become bigger than the parent container (screen 1)
Any idea how should I solve the issue ?

Expanded(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading:
MediaQuery.of(context).size.width < 600,
leading: IconButton(
color: Color(0xff2A3F54),
icon: Icon(FontAwesomeIcons.chartLine),
onPressed: () {
//
}),
title: Text('Dashboard 2022', style: TextStyle(
color: Color(0xff2A3F54)
)),
),
body: Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
childAspectRatio: 2,
),
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.all(12.0),
child: _pages[index],
);
},
),
),
),
),
piechart.dart build method :
Widget build(BuildContext context) {
return FutureBuilder(
future: _getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Card(
color: Colors.white,
child: Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
padding:
EdgeInsets.only(left: 20.0, top: 8.0, bottom: 8.0),
child: //(this.title!= null) ?
Text(
getTitle(),
style:
TextStyle(color: Color(0xff2A3F54), fontSize: 16),
textAlign: TextAlign.left,
),
),
),
const Divider(
height: 4,
thickness: 1,
indent: 20,
endIndent: 20,
color: Color(0xffB0BEC5),
),
Expanded(
child: Row(children: <Widget>[
Expanded(
child: PieChart(
PieChartData(
startDegreeOffset: 180,
borderData: FlBorderData(
show: false,
),
sectionsSpace: 1,
centerSpaceRadius: 0,
sections: showingSections(snapshot.data)),
),
),
const SizedBox(
width: 40,
),
showingPieChartIndicator(snapshot.data),
]),
)
],
),
//),
);
} else
return Center(child: CircularProgressIndicator());
});
}