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.
3
Answers
In this case fl_chart is not the right tool for the job. You can use a custom painter to draw your own chart.
Here is a possible implementation:
Note that you also can animate changes by using an animation controller. There should be guides around.
i don’t know if
fl_chart
can handle this, but it can be done withsyncfusion
package.check this example semi_doughnut_chart
You can use Transform code for a half donut shape, Adjust the angle as needed