flutter UI Problem: How to show DoughnutSeries data like this?

Question

Here I want My UI like Second Image , I want to show DoughnutSeries data like below DoughnutSeries circle in second Image.

This is my syncfusion DoughnutSeries data ui code.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

import '../../../../Constants/constants.dart';

class FSSectorAllocationPage extends StatefulWidget {
  const FSSectorAllocationPage({Key? key}) : super(key: key);

  @override
  _FSSectorAllocationPageState createState() => _FSSectorAllocationPageState();
}

class _FSSectorAllocationPageState extends State<FSSectorAllocationPage> {
  final List<ChartData> chartData = [
    ChartData('Healthcare', 25.5, Color.fromRGBO(9, 0, 136, 1)),
    ChartData('Education', 38, Color.fromRGBO(147, 0, 119, 1)),
    ChartData('Power', 34, Color.fromRGBO(228, 0, 124, 1)),
    ChartData('Manufacture', 52, greyColor),
    ChartData('Agriculture', 52, greenColor),
    ChartData('Services', 52, orangeColor),
    ChartData('Others', 52, green2Color),
  ];

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
          padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
          child: SfCircularChart(
              legend: Legend(
                  isVisible: true,
                  // width: "130",
                  position: LegendPosition.bottom,
                  overflowMode: LegendItemOverflowMode.wrap,
                  legendItemBuilder: (String name, dynamic series,
                      dynamic point, int index) {
                    return Container(color: Colors.red,
                      width: double.infinity,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 20.0,right: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                Container(
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(40),
                                      color: point.color),
                                  height: 15,
                                  width: 15,
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(9.0, 8, 15, 9),
                                  child: Text(
                                    point.x.toString(),
                                    style: TextStyle(
                                        color: blackColor,
                                        fontSize: tSize13,
                                        fontWeight: FontWeight.w500),
                                    textAlign: TextAlign.left,
                                  ),
                                ),
                              ],
                            ),
                            Padding(
                              padding: const EdgeInsets.fromLTRB(9.0, 8, 15, 9),
                              child: Row(
                                children: [
                                  Text(
                                    point.y.toString(),
                                    style: TextStyle(
                                        color: blackColor,
                                        fontSize: tSize13,
                                        fontWeight: FontWeight.w500),
                                  ),
                                  Text(
                                    "%",
                                    style: TextStyle(
                                        color: blackColor,
                                        fontSize: tSize13,
                                        fontWeight: FontWeight.w500),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  }),
              series: <CircularSeries>[
                DoughnutSeries<ChartData, String>(
                    dataSource: chartData,
                    pointColorMapper: (ChartData data, _) => data.color,
                    xValueMapper: (ChartData data, _) => data.x,
                    yValueMapper: (ChartData data, _) => data.y,
                    innerRadius: '60%'),
              ],
              annotations: <CircularChartAnnotation>[
                CircularChartAnnotation(
                  widget: Container(
                      child: Text(
                    'Sectors',
                    style: TextStyle(
                        fontSize: tSize16, fontWeight: FontWeight.w500),
                  )),
                )
              ])),
    );
  }
}

class ChartData {
  ChartData(this.x, this.y, [this.color]);

  final String x;
  final double y;
  final Color? color;
}

This is my ui which I created

Here my DoughnutSeries data height is not increasing ,I am not understanding how to increase that height.

Here My Design , I want to make like this UI.

score 0 · Answer 1 · answered May 30 '22 at 14:22

I bet you are looking for something like Pie & Donut Charts,

Column(
  children: [
    SizedBox(
      width: 250, // Preferred width
      height: 250, // Preferred height
      child: FittedBox(
        fit: BoxFit.scaleDown,
        DChartPie(...),
      ),
    ),
    Expanded(
      child: ListView(
        children: [...],
      ),
    ),
  ],
),

flutter UI Problem: How to show DoughnutSeries data like this?

1 Answers1