flutter charts: Resize charts when resize the browser screen

Viewed 229

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 ? Dashboard after resizing the screen Dashboard on full screen

    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());
    });

}

0 Answers
Related