PieChartData incorrect center color for one PieChartSectionData with opacity color in sections
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
**Describe the bug**
The center of the pie chart has an incorrect color when it has one PieChartSectionData in the sections parameter and the PieChartSectionData color has opacity
**To Reproduce**
````
import 'package:collection/collection.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
void main() => runApp(const FlChartPieCharts());
class FlChartPieCharts extends StatelessWidget {
const FlChartPieCharts({super.key});
static const List pieChartData1 = [1];
static const List pieChartData2 = [0.5, 0.5];
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'FL Chart Pie Charts',
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TestPieChart(pieChartData: pieChartData1),
SizedBox(height: 32),
TestPieChart(pieChartData: pieChartData2)
],
),
),
);
}
}
class TestPieChart extends StatefulWidget {
const TestPieChart({super.key, required this.pieChartData});
final List pieChartData;
@override
State createState() => _TestPieChartState();
}
class _TestPieChartState extends State {
int touchedIndex = -1;
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 2,
child: PieChart(
PieChartData(
centerSpaceColor: Colors.white,
pieTouchData: PieTouchData(
touchCallback: (FlTouchEvent event, pieTouchResponse) {
setState(() {
if (pieTouchResponse == null || pieTouchResponse.touchedSection == null) {
return;
}
touchedIndex = pieTouchResponse.touchedSection!.touchedSectionIndex;
});
},
),
sections: [
...widget.pieChartData.mapIndexed(
(index, data) => PieChartSectionData(
value: data,
radius: 32,
color: touchedIndex == index ? Colors.green : Colors.green.withOpacity(0.5),
),
),
],
),
),
);
}
}
````
**Screenshots**

**Versions**
- which version of the Flutter are you using?
3.22.3
- which version of the FlChart are you using? fl_chart:
0.68.0
Contributor guide
Research direction
Start by running the provided Flutter reproduction and inspect the PieChart, PieChartData, and PieChartSectionData entry points involved in rendering the center and section colors. Reproduce the single-section case with a translucent color, compare it with the two-section case, and verify that the center remains the configured white centerSpaceColor.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100