Repository: flutter
Issue: [Impeller] Flickering lines when drawing on Canvas with CustomPainter on iOS
Labels: platform-ios,engine,has reproducible steps,P2,e: impeller,found in release: 3.10,found in release: 3.12,team-engine,triaged-engine

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

![flicker](https://github.com/flutter/flutter/assets/2432225/d18d43df-6dcd-4225-86e2-bdac3cc1265b)

The mouse was on the screen to draw, and you can see that it does not render the first few points. Then af a second or so, it kicks in, but still gives some flickers in the second line, as you can see in the gif

![flicker3](https://github.com/flutter/flutter/assets/2432225/3426404b-a806-4b02-863f-982da809ce9f)


Second gif is of the standalone example, code below. It only seems to flicker with the first line

### Steps to reproduce

Usecase is very simple:

Create a layered painter:

And a line painters:

And wrap all this in a Widget that adds points with a listener:


```
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const SketchCanvas(),
    );
  }
}


class SketchCanvas extends StatefulWidget {

  const SketchCanvas({
    Key? key,
  }) : super(key: key);

  @override
  State<SketchCanvas> createState() => _SketchCanvasState();
}

class _SketchCanvasState extends State<SketchCanvas> {

  final List<Offset> _points = [];
  final List<List<Offset>> _otherLines = [];


  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CustomPaint(
          painter: CanvasPainter(layers: ["Layer 1", "Layer 2"], painters: [..._otherLines.map((e) => createPainter(e)), createPainter(_points)]),
        ),
        buildDrawerListener(context)
      ],
    );
  }

  LinePainter createPainter(List<Offset> points) {
    return LinePainter("Layer 1", points: points, color: Colors.black, strokeWidth: 5.0);
  }

  Widget buildDrawerListener(BuildContext context) {
    return Listener(
      onPointerDown: (e) async {
          setState(() {
            _points.clear();
            _points.add(e.localPosition);
          });
      },
      onPointerMove: (e) async {
        setState(() {
          _points.add(e.localPosition);
        });
      },
      onPointerUp: (e) async {
        _otherLines.add(List.from(_points));
      },
      child: Container(
        color: Colors.transparent,
      ),
    );
  }
}

class CanvasPainter extends CustomPainter {

  List<String> layers = [];
  List<LinePainter> painters = [];

  CanvasPainter({required this.layers, required this.painters});

  @override
  void paint(Canvas canvas, Size size) {
    paintLayers(canvas, size, layers);
  }

  void paintLayers(Canvas canvas, Size size, List<String> layers) {
    for (var _ in layers) {
      var layers = painters.toList();
      canvas.saveLayer(Rect.largest, Paint());
      for (LinePainter p in layers) {
        p.paint(canvas, size);
      }
      canvas.restore();
    }
  }

  @override
  bool shouldRepaint(CanvasPainter old) => true;
}

class LinePainter extends CustomPainter {
  final String layer;
  final List<Offset> points;
  final Color color;
  final double strokeWidth;


  LinePainter(
      this.layer, {
        required this.points,
        required this.color,
        required this.strokeWidth,
      });

  @override
  void paint(Canvas canvas, Size size) {
    _drawQuadricPoints(canvas);
  }

  Paint createPaint() {
    Paint paint = Paint();
    paint.color = color;
    paint.style = PaintingStyle.stroke;
    paint.strokeCap = StrokeCap.round;
    paint.isAntiAlias = true;
    paint.strokeWidth = strokeWidth;
    paint.strokeJoin = StrokeJoin.round;
    paint.filterQuality = FilterQuality.high;

    return paint;
  }

  void _drawQuadricPoints(Canvas canvas) {
    var points = this.points.toList();
    if (points.isNotEmpty) {
      var path = Path();
      path.moveTo(points[0].dx, points[0].dy);
      for (int i = 1; i < points.length; i++) {
        var p0 = points[i - 1];
        var p1 = points[i];
        path.quadraticBezierTo(p0.dx, p0.dy, (p0.dx + p1.dx) / 2, (p0.dy + p1.dy) / 2);
      }

      canvas.drawPath(path, createPaint());
    }
  }


  @override
  bool shouldRepaint(LinePainter oldPainter) => true;
}
```


See the newly added lines and the old lines flicker like crazy.

The example is heavily truncated btw, but this gives you the general idea.


### Expected results

I expect no flickers, it makes drawing pretty crappy.. 
Skia does not flicker btw

### Actual results

Flicker the night away. Sometimes the lines just do not show up.

### Code sample

[✓] Flutter (Channel stable, 3.10.5, on macOS 13.2 22D49 darwin-arm64, locale en-NL)
    • Flutter version 3.10.5 on channel stable at /Users/rickfleuren/Tools/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (7 days ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/rickfleuren/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/rickfleuren/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.74.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

### Screenshots or Video

<details>
<summary>Screenshots / Video demonstration</summary>

[Upload media here]

</details>
![flicker](https://github.com/flutter/flutter/assets/2432225/281153ad-8683-45f2-a770-20ad138c1453)


### Logs

<details><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details><summary>Doctor output</summary>

```console
[Paste your output here]
```

</details>