iOS 12.5.7 cannot draw line gradient color
Open
Nobody has claimed this yet.
- Dominant language
- Dart
- Stars
- 7.6k
- Forks
- 2k
- Avg merge
- 9d 1h
- Merged PRs (30d)
- 2
Description
During testing on an iOS device running Version 12.5.7 (Build 16H81), we found that if the gradient is set to begin: Alignment.topCenter, end: Alignment.bottomCenter, and all spots have the same y-value, the line color cannot be drawn.
Screenshots
demo
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class LineChartSample extends StatefulWidget {
const LineChartSample({
super.key,
Color? gradientColor1,
Color? gradientColor2,
Color? gradientColor3,
}) : gradientColor1 = gradientColor1 ?? Colors.blue,
gradientColor2 = gradientColor2 ?? Colors.pink,
gradientColor3 = gradientColor3 ?? Colors.orange;
final Color gradientColor1;
final Color gradientColor2;
final Color gradientColor3;
@override
State<LineChartSample> createState() => _LineChartSampleState();
}
class _LineChartSampleState extends State<LineChartSample> {
List<FlSpot> get allSpots => const [
//works fine
// FlSpot(0, 1),
// FlSpot(1, 2),
// FlSpot(2, 1.5),
// FlSpot(3, 3),
// FlSpot(4, 3.5),
// FlSpot(5, 5),
// FlSpot(6, 8),
FlSpot(0, 5),
FlSpot(1, 5),
FlSpot(2, 5),
FlSpot(3, 5),
FlSpot(4, 5),
FlSpot(5, 5),
FlSpot(6, 5),
];
@override
Widget build(BuildContext context) {
final lineBarsData = [
LineChartBarData(
spots: allSpots,
isCurved: true,
barWidth: 4,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
widget.gradientColor1,
widget.gradientColor2,
widget.gradientColor3,
],
stops: const [0.1, 0.4, 0.9],
),
),
];
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: AspectRatio(
aspectRatio: 1,
child: LayoutBuilder(builder: (context, constraints) {
return LineChart(
LineChartData(
lineBarsData: lineBarsData,
minY: 0,
maxY: 10,
gridData: const FlGridData(show: false),
borderData: FlBorderData(
show: true,
border: Border.all(
color: Colors.grey,
),
),
),
);
}),
),
),
);
}
}
Versions
- Flutter: 3.22
- iOS:12.5.7 (Build 16H81)
- FlChart: 1.0.0
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the supplied LineChartSample with the listed Flutter, fl_chart, and iOS versions, using the all-spots-equal-y reproduction. Trace the line gradient rendering entry point and compare it with the varying-y example. Done means the gradient is visible for the reported iOS case without regressing the working example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100