Flutter half Pie Chart with fl_chart

Question

I would like to add a Pie Chart to my App in Flutter which is only a semicircle / half donut or whatever you call it. It should be look like this:

But at the moment it looks like this and i don't know if there's a way to fix it:

Main:

body: Center(
      //mainAxisAlignment: MainAxisAlignment.center,
      child: Column(
        children: [
          Stack(
            children: [
              const Align(
                alignment: Alignment.topCenter,
                child: Padding(
                  padding: EdgeInsets.only(top: 5.0),
                  child: Text(
                    "Status",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 25,
                    ),
                  ),
                ),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Padding(
                  padding: const EdgeInsets.only(right: 8, top: 5),
                  child: CircleAvatar(
                    radius: 17,
                    backgroundColor: Colors.lightBlue,
                    child: IconButton(
                        tooltip:
                            "Show tooltip",
                        onPressed: () {},
                        icon: const Icon(
                          Icons.question_mark,
                          color: Colors.white,
                          size: 18,
                        )),
                  ),
                ),
              ),
            ],
          ),
          Container(
              width: 300.0,
              height: 300.0,
              //color: const Color.fromRGBO(72, 75, 80, 1),
              color: const Color.fromRGBO(72, 75, 80, 1),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  // icon, svg, image

                  (isSwitched)
                      ? Padding(
                          //padding: EdgeInsets.only(
                          // right: 8.0, left: 8.0, bottom: 75),
                          padding: EdgeInsets.all(8),
                          child: Text(
                            "Moderate",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 23,
                            ),
                          ),
                        )
                      : Padding(
                          //padding: EdgeInsets.only(
                          // right: 8.0, left: 8.0, bottom: 75),
                          padding: EdgeInsets.all(8),
                          child: Text(
                            "Excellent",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 23,
                            ),
                          ),
                        ),
                  (isSwitched) ? MyPieChartYellow() : MyPieChart(),
                ],
              )),

Pie-Chart:

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class MyPieChart extends StatelessWidget {
  const MyPieChart({super.key});

  @override
  Widget build(BuildContext context) {
    return PieChart(
        swapAnimationDuration: const Duration(milliseconds: 750),
        swapAnimationCurve: Curves.easeInQuint,
        PieChartData(centerSpaceRadius: 85.0, sections: [
          PieChartSectionData(
            value: 0,
            color: Colors.red,
            showTitle: false,
            radius: 42,
          ),
          PieChartSectionData(
            value: 0,
            color: Colors.yellow,
            showTitle: false,
            radius: 42,
          ),
          PieChartSectionData(
            value: 10,
            color: Colors.green,
            showTitle: false,
            radius: 42,
          )
        ]));
  }
}

Has anyone an idea how to create a half diagram? I couldnt find anything yet.

Answer 1

You can use Transform code for a half donut shape, Adjust the angle as needed

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;
    
    class HalfPieChart extends StatelessWidget {
      const HalfPieChart({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Transform.rotate(
          angle: -math.pi / 2,
          child: PieChart(
            PieChartData(
              startDegreeOffset: 180,
              sectionsSpace: 0,
              centerSpaceRadius: 85.0,
              sections: [
                PieChartSectionData(
                  value: 10,
                  color: Colors.green,
                  showTitle: false,
                  radius: 42,
                ),
                PieChartSectionData(
                  value: 10,
                  color: Colors.yellow,
                  showTitle: false,
                  radius: 42,
                ),
                PieChartSectionData(
                  value: 10,
                  color: Colors.red,
                  showTitle: false,
                  radius: 42,
                ),
                PieChartSectionData(
                  value: 30,
                  color: Colors.transparent,
                  showTitle: false,
                  radius: 42,
                ),
              ],
            ),
          ),
        );
      }
    }`