Repository: flutter
Issue: Bottom sheet jank using BackdropFilter with ImageFilter.blur 
Labels: platform-ios,engine,c: performance,c: rendering,perf: speed,P2,team-ios,triaged-ios

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a performance problem, then fill out the template below.
     Please read our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Details

<!--
1.  Please tell us exactly how to reproduce the problem you are running into.

2.  Please attach a small application (ideally just one main.dart file) that
     reproduces the problem. You could use https://gist.github.com/ for this.

3.  Switch flutter to master channel and run this app on a physical device
     using profile mode with Skia tracing enabled, as follows:
       flutter channel master
       flutter run --profile --trace-skia

     The bleeding edge master channel is encouraged here because Flutter is
     constantly fixing bugs and improving its performance. Your problem in an
     older Flutter version may have already been solved in the master channel.

4.  Record a video of the performance issue using another phone so we
     can have an intuitive understanding of what happened. Don’t use
     "adb screenrecord", as that affects the performance of the profile run.

5.  Open Observatory and save a timeline trace of the performance issue
     so we know which functions might be causing it. See "How to Collect
     and Read Timeline Traces" on this blog post:
       https://medium.com/flutter/profiling-flutter-applications-using-the-timeline-a1a434964af3#a499
     Make sure the performance overlay is turned OFF when recording the
     trace as that may affect the performance of the profile run.
     (Pressing ‘P’ on the command line toggles the overlay.)
-->

Even though ticket: #76180 highlights the jank issue very well. I read that @Hixie would like to see other examples of jank that are easy to replicate. This is one such example.

If anything is missing from the below please let me know and I'll try to add more detail.

**Reproduce the problem**
1. Create a blank flutter app 
2. Add a button to open a bottom sheet
3. Add a blur `BackdropFilter` to the bottom sheet
4. Click the button to open the bottom sheet

**Code example**


<details>
<summary>code sample</summary>

```dart
import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter Jank")),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          showModalBottomSheet(
            context: context,
            backgroundColor: Colors.transparent,
            builder: (_) => BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
              child: Container(
                color: Colors.white,
                height: MediaQuery.of(context).size.height / 3,
              ),
            ),
          );
        },
        label: Text("Jank you very much!"),
      ),
      body: SizedBox.expand(
        child: Container(
          child: Image.network(
            "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
          ),
        ),
      ),
    );
  }
}
```
</details>



**Videos**

### iPhone 12

https://user-images.githubusercontent.com/5285498/111362483-c0019180-8686-11eb-9883-5cb4ca56bce5.MP4

### iPhone SE

https://user-images.githubusercontent.com/5285498/111362504-c6900900-8686-11eb-9b5b-6867b951c8e6.MP4

Notice in both videos the first 2 attempts to open the bottom sheet experience jank.

**Notes**
1. The image (Google logo) is not required to replicate the issue. It only helps highlight the missed animation frames when fading in the blurred backdrop.
2. The issue exists without the `BackdropFilter` but is only visible on the first attempt to open the bottom sheet. Also, it is harder to see on higher-end devices such as an iPhone 12. I only included the `BackdropFilter` to better illustrate the issue.
3. The issue is also visible on Android after the first install. However, to a lesser extent.

**Trace**

I am slightly unsure if this trace is correct but I followed the medium post.

[dart-timeline-2021-3-16_full.zip](https://github.com/flutter/flutter/files/6151623/dart-timeline-2021-3-16_full.zip)

Note: only the first attempt at opening the bottom sheet had noticeable jank when this trace was taken.

<!--
     Please tell us which target platform(s) the problem occurs (Android / iOS / Web / macOS / Linux / Windows)
     Which target OS version, for Web, browser, is the test system running?
     Does the problem occur on emulator/simulator as well as on physical devices?
-->

**Target Platform:** iOS
**Target OS version/browser:** iOS 14
**Devices:** iPhone SE, iPhone 12

## Logs

<details>
<summary>Logs</summary>

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->


```
`flutter analyze`:
No issues found!
```

<!-- Finally, paste the output of running `flutter doctor -v` here, with your device plugged in. -->

```
[✓] Flutter (Channel stable, 2.0.2, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 2.0.2 at /Users/roycockram/Developer/flutter
    • Framework revision 8962f6dc68 (5 days ago), 2021-03-11 13:22:20 -0800
    • Engine revision 5d8bf811b3
    • Dart version 2.12.1

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/roycockram/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • 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 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1
```

</details>

Lastly, I'd like to say thanks to the Flutter team. The Flutter framework is excellent. It is a joy to work with and I've been able to implement everything I have designed on paper, with the exception of animation issues like these.