Flutter Syncfusion Chart Demo Code not working at all

Question

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
                child: SfCircularChart(
                    annotations: <CircularChartAnnotation>[
                     CircularChartAnnotation(
                       widget: Container(
                         child: PhysicalModel(
                          child: Container(),
                            shape: BoxShape.circle,
                            elevation: 10,
                            shadowColor: Colors.black,
                            color: const Color.fromRGBO(230, 230, 230, 1)))),
                            CircularChartAnnotation(
                              widget: Container(
                              child: const Text('62%',
                             style: TextStyle(
                            color: Color.fromRGBO(0, 0, 0, 0.5), fontSize: 25))))
                               ],
                    series: <CircularSeries>[
                        DoughnutSeries<ChartData, String>(
                            dataSource: chartData,
                            xValueMapper: (ChartData data, _) => data.x,
                            yValueMapper: (ChartData data, _) => data.y,
                            // Radius of doughnut
                            radius: '50%'
                        )
                    ]
                )
            )
        )
    );
}

this code is supposed to look like this:

but the CircularChartAnnotation (the first one) makes it look like this:

I added these lines to the Doughnut Series to get the rest to look similar:

     startAngle: 0,
     endAngle: 290,
     innerRadius: '50%',
     radius: '60%'

But this is invisible, since the CircularChartAnnotation hides the Chart itself

This is the look without the first CircularChartAnnotation (0th element in the annotations list):

edit:

my code (with height and width 75 which almost makes it work in a hacky way:

final List<ChartData> chartData = [
  ChartData('Test', 1, Color.fromRGBO(9, 0, 136, 1)),
];

@override
Widget build(BuildContext context) {
  return Center(
    child: Container(
      // height: 300,
      // width: 300,
      child: SfCircularChart(
        annotations: <CircularChartAnnotation>[
          CircularChartAnnotation(
            widget: Container(
              width: 75,
              height: 75,
              child: PhysicalModel(
                child: Container(),
                shape: BoxShape.circle,
                elevation: 10,
                shadowColor: Colors.black,
                color: Color.fromARGB(255, 240, 238, 238),
              ),
            ),
          ),
          CircularChartAnnotation(
            widget: Container(
              child: const Text(
                '62%',
                style: TextStyle(
                  color: Color.fromRGBO(0, 0, 0, 0.5),
                  fontSize: 25,
                ),
              ),
            ),
          ),
        ],
        series: <CircularSeries>[
          DoughnutSeries<ChartData, String>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y,
              startAngle: 0,
              endAngle: 290,
              innerRadius: '0%',
              // Radius of doughnut
              radius: '60%')
        ],
      ),
    ),
  );
}

Answer 1

Your requirement can be achieved with help of the RadialBarSeries in the SfCircularChart as per the following code snippet.

code snippet:

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

void main() {
  return runApp(_ChartApp());
}

class _ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  _MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  final List<ChartData> chartData = [
    ChartData('A', 62),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: SfCircularChart(annotations: <CircularChartAnnotation>[
      CircularChartAnnotation(
          height: '100%',
          width: '100%',    
          widget: PhysicalModel(   
              shape: BoxShape.circle,    
              elevation: 10,   
              shadowColor: Colors.black,   
              color: const Color.fromRGBO(230, 230, 230, 1),   
              child: Container())),    
      CircularChartAnnotation(   
          widget: const Text('62%',   
              style:   
                  TextStyle(color: Color.fromRGBO(0, 0, 0, 0.5), fontSize: 25)))  
    ], series: <CircularSeries>[  
      RadialBarSeries<ChartData, String>(   
          dataSource: chartData,    
          innerRadius: '50%',    
          maximumValue: 100, 
          pointColorMapper: (ChartData data, _) => Colors.blue,    
          xValueMapper: (ChartData data, _) => data.x,    
          yValueMapper: (ChartData data, _) => data.y)   
    ])));
  }
}

class ChartData {
  ChartData(this.x, this.y);
  final String x;
  final double y;
}

Screenshot:

RadialBarSeries

For more details, please refer to the following user guide.

https://help.syncfusion.com/flutter/circular-charts/chart-types/radial-bar-chart