Skip to content

[Impeller] Blur performance issue. #132735

@mtrfnvwork

Description

@mtrfnvwork

Details

Target Platform: iOS
Target OS version/browser: 16.6
Devices: iPhone 11 Pro Max

Logs

flutter doctor -v
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.5 22G74 darwin-x64, locale ru-RU)
    • Flutter version 3.10.6 on channel stable at /Users/..../flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f468f3366c (5 weeks ago), 2023-07-12 15:19:05 -0700
    • Engine revision cdbeda788a
    • Dart version 3.0.6
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/.../Library/Android/sdk
    • Platform android-33, build-tools 33.0.2
    • Java binary at: /Users/.../Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/.../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.6b829.9-10027231)

[✓] VS Code (version 1.81.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.70.0

[✓] Connected device (3 available)
    • iPhone 11 Pro Max (mobile) • 00008030-001E71D01104802E • ios            • iOS 16.6 20G75
    • macOS (desktop)            • macos                     • darwin-x64     • macOS 13.5 22G74 darwin-x64
    • Chrome (web)               • chrome                    • web-javascript • Google Chrome 115.0.5790.170

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

• No issues found!
source code
import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';

final _random = Random();

void main() => runApp(const BackdropFilterDemo());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          children: [
            ListView.separated(
              separatorBuilder: (_, __) => const SizedBox(height: 8),
              itemBuilder: (context, index) => BlurEffect(
                child: Container(
                  height: 50,
                  color: Colors.primaries[_random.nextInt(17)].shade300,
                  child: Center(
                    child: Text(index.toString()),
                  ),
                ),
              ),
              itemCount: 200,
            ),
            Positioned.fill(
              bottom: null,
              child: BlurEffect(
                child: Padding(
                  padding: EdgeInsets.only(
                    top: MediaQuery.of(context).viewPadding.top,
                  ),
                  child: const SizedBox(height: 45),
                ),
              ),
            ),
            Positioned.fill(
              top: null,
              child: BlurEffect(
                child: Padding(
                  padding: EdgeInsets.only(
                    top: MediaQuery.of(context).viewPadding.bottom,
                  ),
                  child: const SizedBox(height: 50),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class BlurEffect extends StatelessWidget {
  final Widget child;

  const BlurEffect({
    required this.child,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: 28,
          sigmaY: 28,
          tileMode: TileMode.mirror,
        ),
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.black.withOpacity(.65)),
          child: child,
        ),
      ),
    );
  }
}

I'm trying to use the blur effect in the app. But I noticed that it greatly reduces the performance of the application. At the same time, performance drops more when there are several widgets on the screen that have a blur effect. In more detail, the performance reduction is shown in the video

RPReplay_Final1692262396.MP4

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listcustomer: crowdAffects or could affect many people, though not necessarily a specific customer.e: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.13Found to occur in 3.13found in release: 3.14Found to occur in 3.14has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions