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

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.

Answer 1

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: [...],
),
),
],
),