ModalBottomSheet's transition animation became jumpy (not janky) in Flutter 2.0 on iOS

[Pavel-Sulimau]

Precondition: use an iOS simulator/device.

Steps to Reproduce

Please note that this is not about the animation performance, it's about the animation itself.

1. Create a default flutter app.
2. Replace the app's main content with the following piece of code:

   
   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 { @override _MyHomePageState createState() => _MyHomePageState(); }

class _MyHomePageState extends State { TextEditingController _textEditingController = TextEditingController();

@override void dispose() { _textEditingController.dispose(); super.dispose(); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Keyboard + Bottom Sheet')), body: Center( child: Padding( padding: const EdgeInsets.all(24.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Notice the bottom sheet transition animation, Flutter 1.22.6, slow animation mode'), TextField(), ], ), ), ), floatingActionButton: FloatingActionButton( onPressed: _showBottomSheet, child: Icon(Icons.add), ), ); }

void _showBottomSheet() { showModalBottomSheet( context: context, builder: (ctx) => Container(height: 400, color: Colors.red), ); } }

3. Open the soft keyboard by setting focus in the text field.
4. Open the modal bottom sheet by tapping the floating action button.
5. Tap outside the bottom sheet to close it. Notice how the closing animations differ on Flutter v2.0 vs Flutter v1.22. 

**Actual results:** In Flutter v1.22 the sheet's closing starts at the same time when the keyboard starts appearing and the animation looks good, whereas in Flutter v2.0 the sheet's closing starts after the keyboard has been opened (+ the keyboard cuts the bottom sheet now, see the slow-motion video). That's why the animation looks jumpy (not janky, this is not about the lost frames).

**Expected results:** Go back to the Flutter v1.26 behavior when the animation worked differently and that's why looked smoother.

https://user-images.githubusercontent.com/8143332/112745857-168a9c00-8fb4-11eb-8758-c423a5b3691c.mp4

https://user-images.githubusercontent.com/8143332/112745858-1be7e680-8fb4-11eb-82e0-7c765bd765a6.mp4

I also recorded the animations with slow animations mode turned on iPhone 12 Mini device:

https://user-images.githubusercontent.com/8143332/112812554-f3302180-9085-11eb-84a0-1645043c34a6.mov

https://user-images.githubusercontent.com/8143332/112812575-f75c3f00-9085-11eb-8811-8f921969697f.mov

<details>
  <summary>Logs</summary>

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

**Flutter v1.22.6:**

[✓] Flutter (Channel unknown, 1.22.6, on macOS 11.2.3 20D91 darwin-x64, locale en-BY) • Flutter version 1.22.6 at /Users/pavel_sulimau/fvm/versions/1.22.6 • Framework revision 9b2d32b605 (9 weeks ago), 2021-01-22 14:36:39 -0800 • Engine revision 2f0af37152 • Dart version 2.10.5

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) • Android SDK at /Users/pavel_sulimau/Library/Android/sdk • Platform android-30, build-tools 30.0.2 • 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-6915495) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.4) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e • CocoaPods version 1.10.1

[!] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (1 available) • iPhone 12 Pro Max (mobile) • 8F693604-AEB3-4692-A0E3-A04316E77FFD • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)

! Doctor found issues in 1 category.

**Flutter v2.0.3:**

[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale en-BY) • Flutter version 2.0.3 at /Users/pavel_sulimau/fvm/versions/stable • Framework revision 4d7946a68d (9 days ago), 2021-03-18 17:24:33 -0700 • Engine revision 3459eb2436 • Dart version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) • Android SDK at /Users/pavel_sulimau/Library/Android/sdk • Platform android-30, build-tools 30.0.2 • 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-6915495) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1) • 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-6915495)

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

[✓] Connected device (2 available) • iPhone 12 Pro Max (mobile) • 8F693604-AEB3-4692-A0E3-A04316E77FFD • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator) • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90

• No issues found!

</details>

[germanolira]

It seems normal to me

https://user-images.githubusercontent.com/25235170/112748065-c39eed80-8f8f-11eb-9dfb-a7e1cf4c6938.mp4

https://flutter.dev/docs/perf/rendering

"If you are seeing janky (non smooth) animations, make sure that you are profiling performance with an app built in profile mode. The default Flutter build creates an app in debug mode, which is not indicative of release performance. For information, see Flutter’s build modes."

It' s probably because you are using debug mode

You can try running in profile mode flutter run --profile

[EngineerDanny]

@Pavel-Sulimau if you want the best performance then you may want to build the release version of your app. The default one is in debug mode which doesn't provide the best of performance. If you still have performance issues with the release mode, then you can profile the performance of your app with flutter run --profile command.

[Pavel-Sulimau]

It seems normal to me

default_flutter.mp4

https://flutter.dev/docs/perf/rendering

"If you are seeing janky (non smooth) animations, make sure that you are profiling performance with an app built in profile mode. The default Flutter build creates an app in debug mode, which is not indicative of release performance. For information, see Flutter’s build modes."

It' s probably because you are using debug mode

You can try running in profile mode flutter run --profile

@germanolira, could you please try it out on an iOS simulator/device?

@germanolira, @EngineerDanny, it seems that I might've been not explicit enough, so I should emphasize that this is not about the animation performance, this is about the way it is animated now. I noticed the described change of animation behavior when I migrated one of my apps to Flutter 2.0 and was testing the app in release mode.

Please pay closer attention to the way how the bottom sheet is transitioned away when the keyboard is appearing. I also added additional videos where you can see the difference in the slow motion. Let me know if it is more clear now.

[darshankawar]

@Pavel-Sulimau Tried your code sample on iPhone 6s (14.4.1) using latest stable and see below:

https://user-images.githubusercontent.com/67046386/112826737-030e2c80-90ab-11eb-82db-e0f176239274.MP4

flutter doctor -v

``` [✓] Flutter (Channel stable, 2.0.3, on Mac OS X 10.15.4 19E2269 darwin-x64, locale en-GB) • Flutter version 2.0.3 at /Users/dhs/documents/Fluttersdk/flutter • Framework revision 4d7946a68d (10 days ago), 2021-03-18 17:24:33 -0700 • Engine revision 3459eb2436 • Dart version 2.12.2 [!] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 ! CocoaPods 1.9.3 out of date (1.10.0 is recommended). CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.54.3) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.20.0 [✓] Connected device (3 available) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90 ! Doctor found issues in 1 category. ```

I did notice the jump when keyboard pops up first time, but in following tries, the behavior seems to be smooth.

[Pavel-Sulimau]

@darshankawar, thanks for your input!

1. Could you please also record the same video but with flutter v 1.22.6 on your side (just for comparison)?
2. Do you notice the difference in the animation behavior in Flutter v1 vs Flutter v2 (in the videos provided to the issue)?

P.S. I'm not saying that the current animation is unbearable, I'm saying it was different and it was better from my my point of view :)

[darshankawar]

@Pavel-Sulimau I can't directly go back to 1.22.6 using flutter downgrade and if I've to do so, need to download that version explicitly and alter config :-), but I'll see what I can do.

[Pavel-Sulimau]

@Pavel-Sulimau I can't directly go back to 1.22.6 using flutter downgrade and if I've to do so, need to download that version explicitly and alter config :-), but I'll see what I can do.

I can recommend using FVM to be able to quickly switch between different flutter versions.

[darshankawar]

flutter doctor -v

``` [✓] Flutter (Channel master, 2.1.0-13.0.pre.319, on Mac OS X 10.15.4 19E2269 darwin-x64, locale en-GB) • Flutter version 2.1.0-13.0.pre.319 at /Users/dhs/documents/Fluttersdk/flutter • Framework revision 430626d0f3 (48 minutes ago), 2021-03-29 21:44:03 -0700 • Engine revision 4c6abc1e06 • Dart version 2.13.0 (build 2.13.0-172.0.dev) [!] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 ! CocoaPods 1.9.3 out of date (1.10.0 is recommended). CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.54.3) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.20.0 [✓] Connected device (3 available) • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90 ! Doctor found issues in 1 category. ```