[Impeller] incorrect Z order in drawRawPoints.

[GGlinsek]

Steps to reproduce

run the code on android or ios.

the issue seems to be if the float32List has too many numbers. Drawing linePoints without the numbers between the 2 comments results in the expected outcome. Drawing only linePoints1 and linePoints2 also works correctly

this bug seems to occur only on 3.27.0. when downgrading to 3.24.4 the bug does not occur.

Expected results

all lines should be drawn under the FloatingActionButton like in the picture below.

Actual results

some of the lines are drawn over the FloatingActionButton. This happens when drawRawPoints needs to draw a line with a lot of points. Also based on when this line is drawn different lines get drawn above the button.

Code sample

Code sample

import 'dart:ui';

import 'package:flutter/foundation.dart';
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',
      home: Scaffold(
        appBar: AppBar(
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SizedBox(
            height: constraints.maxHeight,
            width: constraints.maxWidth,
            child: CustomPaint(
              isComplex: true,
              painter: LinePainter(
              ),
            ),
          );
        }),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.black,
          elevation: 4,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(16.0)),
          ),
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class LinePainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 5;

    final linePoints = Float32List.fromList([7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      // if you comment out the numbers between these two comments it will work as expected
      // start
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      // end
      4258.3555,
      656.5495,]);

    final linePoints2 = Float32List.fromList([350,0,350,1000]);

    final linePoints1 =Float32List.fromList([1,1,800,1400]);

    canvas.drawRawPoints(PointMode.lines, linePoints, paint);
    canvas.drawRawPoints(PointMode.lines, linePoints1, paint);
    canvas.drawRawPoints(PointMode.lines, linePoints2, paint);

  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

Screenshots or Video

Screenshots / Video demonstration

https://github.com/user-attachments/assets/f9ff045f-6491-41e7-84c9-ec45d5051c99

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Flutter doctor:

[✓] Flutter (Channel stable, 3.27.0, on macOS 15.2 24C101 darwin-arm64, locale en-US)
    • Flutter version 3.27.0 on channel stable at /Users/anon/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8495dee1fd (6 days ago), 2024-12-10 14:23:39 -0800
    • Engine revision 83bacfc525
    • Dart version 3.6.0
    • DevTools version 2.40.2

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/anon/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.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 21.0.3+-79915917-b509.11)

[✓] Android Studio (version 2024.2)
    • Android Studio at /Users/anon/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 21.0.3+-79915917-b509.11)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.3.1)
    • IntelliJ at /Users/anon/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 83.0.4
    • Dart plugin version 243.23177

[✓] VS Code (version 1.95.1)
    • VS Code at /Users/anon/Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.96.0

[✓] VS Code (version 1.93.1)
    • VS Code at /Users/anon/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.96.0

[✓] Connected device (4 available)
    • SM G973F (mobile)               • RF8M33HXXMT                              • android-arm64  • Android 12 (API 31)
    • 8da2817b7221035e63e7971be7465790d4703470 • ios            • iOS 16.7.10 20H350
    • macOS (desktop)                 • macos                                    • darwin-arm64   • macOS 15.2 24C101 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                    • darwin         • macOS 15.2 24C101 darwin-arm64
    • Chrome (web)                    • chrome                                   • web-javascript • Google Chrome 129.0.6668.71

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[cachapa]

Possibly related, some of my users have also reported bad z-order drawing:

This is a normal BottomSheet overlaid on top of a custom chart widget. The widget is drawing a bunch of lines and text, but weirdly only the dots break the Z order.

The dots are drawn using canvas.drawPoints:

      canvas.drawPoints(PointMode.points, offsets, _outerPaint);
      canvas.drawPoints(PointMode.points, offsets, _centerPaint);

Disabling impeller on Android solved the issue.

[GGlinsek]

the issue appears on iphone as well so if disabling impeller helped then impeller is probably the issue. If I remember correctly android moved to impeller on the latest upgrade.

[jonahwilliams]

Okay good news, I cannot repro this at ToT - which likely means it was fixed sometime between when the release was cut and now. We just have to bisect a bit to figure out if it can be cherry picked.

[GGlinsek]

I am still able to recreate it in our main app and chart example app that we created. On the example that I posted the issue seems resolved. It is likely that the list has a higher threshold for the data it can sucessfully draw. I can not post the code for either but will try to create a new example.

[GGlinsek]

also if you look closely at the first screenshot you can see that the first few points don't seem to overlap the ModalSheet. Only after the first few points it starts to draw over

[GGlinsek]

I was able to recreate the issue in the example by adding more points to the list

import 'dart:ui';

import 'package:flutter/foundation.dart';
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',
      home: Scaffold(
        appBar: AppBar(
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SizedBox(
            height: constraints.maxHeight,
            width: constraints.maxWidth,
            child: CustomPaint(
              isComplex: true,
              painter: LinePainter(
              ),
            ),
          );
        }),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.black,
          elevation: 4,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(16.0)),
          ),
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class LinePainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 5;

    final linePoints = Float32List.fromList([7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      4258.3555,
      656.5495,
      7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      4258.3555,
      656.5495,
      7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      4258.3555,
      656.5495,
      7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      4258.3555,
      656.5495,
      300, 0
    ]);

    final linePoints2 = Float32List.fromList([300,0,300,1000]);

    final linePoints1 =Float32List.fromList([1,1,800,1500]);

    canvas.drawRawPoints(PointMode.lines, linePoints, paint);
    canvas.drawRawPoints(PointMode.lines, linePoints1, paint);
    canvas.drawRawPoints(PointMode.lines, linePoints2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

[jonahwilliams]

This still looks like its working for me on master channel? I'm aware this isn't working on the stable channel and I'm looking into a cherry pick.

[cachapa]

I was able to test some combinations:

• Stable on Android, with impeller: buggy
• Stable on Android, impeller disabled: OK
• Stable on iOS, with impeller: buggy
• Master on Android, with impeller: OK

Unfortunately I'm not able to test the master channel on iOS but given that it seems to have been a general impeller bug and it's fixed on Android, I'm assuming it's the same for all platforms.

EDIT: I just noticed that there there was a hotfix on stable to 3.27.1, it does not fix the issue on Android impeller.

[jonahwilliams]

The fix for this was flutter/engine#56494 , looking into making a cherry pick.