Skip to content

CustomPainter with LinearGradient shader and blur MaskFilter show clipping error with 3.24.3 #155930

@AlessandroMulloni

Description

@AlessandroMulloni

Steps to reproduce

I am making extensive usage of custom painters in an app. A recent update from 3.22.1 to 3.24.3 broke many of my shaders.

I created below a minimal widget to reproduce the issue.

It seems that custom painters in a sliver-based scroll view are clipped by a certain amount of pixels. The amount of clipping seems proportional to the pixels of the top app bar visible on screen.

Expected results

This was the previous behaviour with Flutter 3.22.1

RPReplay_Final1727699469.MP4

Actual results

This is the current behaviour with 3.24.3

RPReplay_Final1727699693.MP4

Code sample

Code sample
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          const SliverAppBar(
            title: Text('Blur + Gradient Test'),
          ),
        ],
        body: CustomScrollView(
          physics: const BouncingScrollPhysics(decelerationRate: ScrollDecelerationRate.fast),
          slivers: List.filled(
            5,
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.all(32.0),
                child: AspectRatio(
                  aspectRatio: 2,
                  child: CustomPaint(painter: _BlurTestPainter()),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _BlurTestPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTWH(0, 0, size.width, size.height);

    final shader = const LinearGradient(
      colors: [Colors.red, Colors.blue],
    ).createShader(rect);

    var paint = Paint()
      ..shader = shader
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 10.0)
      ..strokeWidth = 20
      ..style = PaintingStyle.stroke;

    canvas.drawOval(rect, paint);
  }

  @override
  bool shouldRepaint(covariant _BlurTestPainter o) => true;
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.3, on macOS 14.5 23F79 darwin-arm64, locale en-AT)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.93.1)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work listc: regressionIt was better in the past than it is nowc: renderingUI glitches reported at the engine/skia or impeller rendering levele: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.24Found to occur in 3.24found in release: 3.26Found to occur in 3.26has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions