[ios] [swift mix flutter] flutter widgets shake when controller's frame changed

[lastback]

entirment

mac os 13.2 xcode version 14.2

problem

my project is ios swift project, when i add flutter to it, when then controller'frame changed, the flutter all widgets shakes like the video.

flutter doctor -v

[✓] Flutter (Channel 3.7.9-modified, 3.7.10-0.0.pre.1, on macOS 13.2 22D49 darwin-arm64, locale zh-Hans-CN) • Flutter version 3.7.10-0.0.pre.1 on channel 3.7.9-modified at /Users/likai/Documents/github/flutter • Upstream repository git@github.com:lastback/flutter.git • FLUTTER_GIT_URL = git@github.com:lastback/flutter.git • Framework revision 95ed6ac748 (4 days ago), 2023-04-03 10:08:06 +0800 • Engine revision ec975089ac • Dart version 2.19.6 • DevTools version 2.20.1 • Pub download mirror https://pub.flutter-io.cn • Flutter download mirror https://storage.flutter-io.cn

[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) • Android SDK at /Users/likai/Library/Android/sdk ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

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

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

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

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

[✓] Proxy Configuration • HTTP_PROXY is set • NO_PROXY is localhost,::1,127.0.0.1,LOCALHOST • NO_PROXY contains localhost • NO_PROXY contains 127.0.0.1 • NO_PROXY contains ::1

[✓] Connected device (3 available) • iPad (10th generation) (mobile) • EE0F2695-DEF0-4204-91C1-F43F1E5C00C5 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.2 22D49 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.146 ! Error: Failed to prepare the device for development. Please unlock and reconnect the device. (code 806)

[✓] HTTP Host Availability • All required HTTP hosts are available

Steps to Reproduce

1.download the swift project & run it. 2.click the white button, look at the picture's change(left orange panel is native swift, and the right panel is flutter)

https://user-images.githubusercontent.com/4507915/230582423-b996bda1-d5e5-4767-bbff-7c819e346ecb.mp4

project.zip

[lastback]

when the change use animation also shake

[huycozy]

Hi @lastback I download and run your sample project but got this error when executing pod install.

[!] Invalid `Podfile` file: cannot load such file -- /Users/likai/Documents/flutter/packages/flutter_tools/bin/podhelper.

Can you update to use relative paths instead?

[lastback]

Hi @lastback I download and run your sample project but got this error when executing pod install.

[!] Invalid `Podfile` file: cannot load such file -- /Users/likai/Documents/flutter/packages/flutter_tools/bin/podhelper.

Can you update to use relative paths instead?

hello @huycozy , thank you for you reply, you can cd the "my_flutter" folder, and do "flutter clean" clean the cache of my project

[lastback]

@huycozy i did the "flutter clean" and reupload the project.zip

[huycozy]

Thanks for your response, but it seems I can't see the issue when replaying this several times.

Demo

https://user-images.githubusercontent.com/104349824/230824973-9888480d-50c8-46c1-b257-5b48fe24d081.MP4

Can you please describe this in more detail and the expected result as well?

[lastback]

@huycozy Hi bro, pls use the ipad simulator(my app use in ipad) and all the widgets like my video shake. or look at your video start from the 0:04 sec and the "debug" tag shakes in the top right corner not smoothly. this is the simple demo, in my app all the ui widgets shake like my video.

https://user-images.githubusercontent.com/4507915/230841660-7cd1a042-21fc-4611-8123-de6030337258.mp4

[lastback]

several weeks ago, i first met this problem, and i changed the resize in all flutter scenes, so it would be smoothly. but this time, i can not change anymore(swift mix flutter).

[lastback]

not only in ipad simulator, but in real ipad device also shake

[huycozy]

several weeks ago, i first met this problem, and i changed the resize in all flutter scenes, so it would be smoothly. but this time, i can not change anymore(swift mix flutter).

Did you upgrade the Flutter SDK recently? Do you remember the old version on which the issue doesn't happen? (so that I can retry on that version and verify this issue)

Also, is that a Flutter app? (the app is shown in the demo video above). It looks like a native app:)

[lastback]

@huycozy hi, my app is a native(swift) app mix flutter. so the frame changed is FlutterViewController in swift. the sdk is forked from 3.7.9 stabled. our company start to use swift mix flutter since 3.7.3 and all those versions have this problem.

[lastback]

@huycozy bad news, i tried flutter v3.3.0 & v2.5.0, the same shake in the native & flutter mix mode.

[lastback]

v3.9.0-21.0.pre the same shake

[huycozy]

Thanks for checking on many Flutter versions. But be honest, I don't see it clearly with the demo in the sample code. I also try replicating the case with a GridView of items (as in your above video) but also don't see the issue.

https://user-images.githubusercontent.com/104349824/231156259-5877c4d8-8862-48e8-946e-c52ff89f5e23.mov

Could you please update the sample code so that the issue is more visible? And it would be appreciated if you could also try creating a Native version with Swift to compare with Flutter.

[huycozy]

Also, can you try this on Profile or Release mode as well? (May be related: https://github.com/flutter/flutter/issues/79593)

[lastback]

hi, @huycozy thank you for your patience！ i found the difference between your video and mine, so, you can also check my new project and new video.

1. the widgets in all your videos are full fill the flutter controller's width, so the shake is not very clear. 2.look at the center image and the button in the right bottom corner in the new video, the correct resize effect may be not shake like bounce? as fact, not every time will shake, but is high frequency. 3.our app in test is archive release mode and real ipad device, the shake also exists. 4.pls check the new project in ipad simulator and rotate it horizontal mode .

https://user-images.githubusercontent.com/4507915/231333073-ee4752ff-191b-4950-9848-daf99845c2cf.mp4

the project code of the video upon project.zip

[lastback]

Also, can you try this on Profile or Release mode as well? (May be related: #79593)

i read #79593 before, but not work for me and #79593 is flash, my app not flash, and the temp solution mentioned in #79593 may crashed? so i'm not sure is the same problem.

[huycozy]

Thanks for your updated sample code. I'm not sure this is a bug, but maybe a proposal to make FlutterViewController look smoother when resizing. Labeling the issue for more insights.

Adding the demo video which also comparing with iOS Photos native app. Photos app's animation looks smoother.

https://user-images.githubusercontent.com/104349824/231363860-523ff89b-add0-41ba-915e-678d23427efd.mov

flutter doctor -v (stable and master)

```bash [✓] Flutter (Channel stable, 3.7.10, on macOS 13.0.1 22A400 darwin-x64, locale en-VN) • Flutter version 3.7.10 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 4b12645012 (2 days ago), 2023-04-03 17:46:48 -0700 • Engine revision ec975089ac • Dart version 2.19.6 • DevTools version 2.20.1 [✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 32.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301) [✓] IntelliJ IDEA Community Edition (version 2022.1.1) • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app • 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 [✓] VS Code (version 1.77.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.60.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.146 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ``` ```bash [!] Flutter (Channel master, 3.10.0-3.0.pre.55, on macOS 13.0.1 22A400 darwin-x64, locale en-VN) • Flutter version 3.10.0-3.0.pre.55 on channel master at /Users/huynq/Documents/GitHub/flutter_master ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision ba8d100597 (54 minutes ago), 2023-04-11 22:33:19 -0400 • Engine revision 11d3300254 • Dart version 3.0.0 (build 3.0.0-431.0.dev) • DevTools version 2.23.1 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 32.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301) [✓] IntelliJ IDEA Community Edition (version 2022.1.1) • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app • 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 [✓] VS Code (version 1.77.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.62.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.49 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```

[lastback]

@huycozy yes, as an bussiness app(Add-to-app mode), this resizing effect must not be comfortable, now maybe what I can only do next is wait for the future optimization.

[cyanglaz]

@hellohuanlin Could this have a similar solution to https://github.com/flutter/flutter/issues/16322?

[hellohuanlin]

This feels like related to the framework side - it looks like the images are resized with a delay of 1-2 frames

[cyanglaz]

I feel like the header text is also stretched for a split second, not just the images. Very hard to tell.

[hellohuanlin]

I feel like the header text is also stretched for a split second, not just the images. Very hard to tell.

True, the header text is indeed stretched, so likely the whole screen issue, not just the images.

[hellohuanlin]

One thing we can try is, if the transitionDuration is 0, we can delay the change by a few milliseconds. Since the flutter UI and window resizing are in different threads, I don't think there's a perfect solution - we have to tweak it by experiment and see the result.

[hellohuanlin]

One thing we can try is, if the transitionDuration is 0, we can delay the change by a few milliseconds. Since the flutter UI and window resizing are in different threads, I don't think there's a perfect solution - we have to tweak it by experiment and see the result.

I tried this workaround but it didn't look good. I don't think any of the similar solutions to the distortion rotation issue (e.g. snapshot trick, delayed swap, or size interpolation) works for this, since this time the window resizing happens instantly. A real solution may require some big change in both engine and the framework, to make each individual widget more smooth during resizing.

[peteroid]

Hi folks, I have met a similar problem. After experiments, I have a counter-intuitive way to "hotfix" this. You guys can check if this is applicable to your scenario.

The concept is to make the app dropping frames so that the resizing shake will not be seen. 50ms is about 3 frames under 60FPS.

dropFrames(50); // <-- this will block the main thread for 50ms (use with cautious!)

void dropFrames(int ms) {
  final stopwatch = Stopwatch()..start();
  while (stopwatch.elapsedMilliseconds < ms) {
    fib(1000); // 50ms will require running here about 30K-50K times
  }
}

// Just a random algorithm for heavy calculation. Memory space is O(1).
int fib(int n) {
  if (n == 0) return 0;
  int a = 0, b = 1;
  for (int i = 2; i <= n; i++) {
    int temp = a + b;
    a = b;
    b = temp;
  }
  return b;
}