Impossible to apply ClipData just for LineChartBarData instead of all elements in LineChartData

[NemuelLealPereira]

Hi guys,

Impossible to apply ClipData just for LineChartBarData instead of all elements in LineChartData

Also clipData: const FlClipData(top: true, bottom: false, left: true, right: true), never works correctly, it works like FlClipData.all()

The FlClipData(top: true, bottom: false, left: true, right: true) works like FlClipData.all(). So, It clips the LineChartBarData but also the VerticalLine.

Expected: I'd like Clip just the LineChartBarData.

Simple example code:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('fl_chart VerticalLine with Picture')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: LineChartWidget(),
        ),
      ),
    );
  }
}

class LineChartWidget extends StatefulWidget {
  @override
  _LineChartWidgetState createState() => _LineChartWidgetState();
}

class _LineChartWidgetState extends State<LineChartWidget> {
  ui.Picture? _customPicture;

  @override
  void initState() {
    super.initState();
    _generateCustomPicture();
  }

  Future<void> _generateCustomPicture() async {
    final picture = createCustomPicture();
    setState(() {
      _customPicture = picture;
    });
  }

  @override
  Widget build(BuildContext context) {
    return _customPicture == null
        ? const Center(child: CircularProgressIndicator())
        : LineChart(
            LineChartData(
              minX: 2,
              lineBarsData: [
                LineChartBarData(
                  spots: const [FlSpot(1, 2), FlSpot(3, 4), FlSpot(5, 3), FlSpot(7, 5)],
                  color: Colors.blue,
                  barWidth: 3,
                ),
              ],
              lineTouchData: const LineTouchData(enabled: false),
              // FlClipData(top: true, bottom: false, left: true, right: true)
              // doesn't work correctly. It works like FlClipData.all() It clips the LineChartBarData
              // but also the VerticalLine. I'd like Clip just the LineChartBarData
              // clipData: const FlClipData(top: true, bottom: false, left: true, right: true),
              extraLinesData: ExtraLinesData(
                verticalLines: [
                  VerticalLine(
                    x: 5,
                    color: Colors.red,
                    strokeWidth: 2,
                    sizedPicture: SizedPicture(_customPicture!, 40, 20),
                  ),
                ],
              ),
            ),
          );
  }
}

ui.Picture createCustomPicture() {
  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder);

  final paint = Paint()
    ..color = Colors.red
    ..style = PaintingStyle.fill;

  canvas.drawCircle(const Offset(20, 20), 20, paint);

  return recorder.endRecording();
}