imaNNeo / imaNNeo/fl_chart

iOS 12.5.7 cannot draw line gradient color

Open
#1,970 0 comments 0 reactions 0 assignees View on GitHub

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
Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.