Skip to content

Layout on the iOS profile and release mode happens with zero max size first and then the actual max size. #149974

Closed
Closed
Layout on the iOS profile and release mode happens with zero max size first and then the actual max size.#149974
Assignees
loic-sharma
Labels
a: layoutSystemChrome and Framework's Layout Issuesfound in release: 3.22Found to occur in 3.22found in release: 3.23Found to occur in 3.23frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: solvedIssue is closed as solvedteam-iosOwned by iOS platform team

Description

@ksokolovskyi
ksokolovskyi
opened on Jun 9, 2024

Steps to reproduce

  1. Run the code sample on an iOS device in debug mode - layout happens once with the actual max size
  2. Run the code sample on an iOS device in profile/release mode - layout happens twice (with zero max size first and then the actual max size)

Expected results

Layout happens once with the actual max size.

Actual results

Layout happens twice: zero max size first and then the actual max size.

Code sample

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return Flow(
      delegate: const MyFlowDelegate(),
      children: const [],
    );
  }
}

class MyFlowDelegate extends FlowDelegate {
  const MyFlowDelegate();

  @override
  Size getSize(BoxConstraints constraints) {
    final maxSize = constraints.biggest;

    print('LAYOUT');
    print('Max width: ${maxSize.width}');
    print('Max height: ${maxSize.height}');

    return constraints.biggest;
  }

  @override
  void paintChildren(FlowPaintingContext context) {}

  @override
  bool shouldRepaint(MyFlowDelegate oldDelegate) {
    return false;
  }
}
Code sample 2 
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final maxSize = constraints.biggest;

        print('LAYOUT');
        print('Max width: ${maxSize.width}');
        print('Max height: ${maxSize.height}');

        return const SizedBox.shrink();
      },
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

iOS debug logs 
Launching lib/main.dart on Kostiantyn’s iPhone in debug mode...
Xcode build done.                                            8.0s
flutter: LAYOUT
flutter: Max width: 375.0
flutter: Max height: 812.0
iOS profile logs 
Launching lib/main.dart on Kostiantyn’s iPhone in profile mode...
Xcode build done.                                           10.6s
flutter: LAYOUT
flutter: Max width: 0.0
flutter: Max height: 0.0
flutter: LAYOUT
flutter: Max width: 375.0
flutter: Max height: 812.0
iOS release logs 
Launching lib/main.dart on Kostiantyn’s iPhone in release mode...
Xcode build done.                                           11.2s
flutter: LAYOUT
flutter: Max width: 0.0
flutter: Max height: 0.0
flutter: LAYOUT
flutter: Max width: 375.0
flutter: Max height: 812.0
Android debug logs 
Launching lib/main.dart on SM A305FN in debug mode...
✓ Built build/app/outputs/flutter-apk/app-debug.apk
Connecting to VM Service at ws://127.0.0.1:53486/QKI8BVXu2KA=/ws
I/flutter (21798): LAYOUT
I/flutter (21798): Max width: 411.42857142857144
I/flutter (21798): Max height: 843.4285714285714
Android release logs 
Launching lib/main.dart on SM A305FN in release mode...
✓ Built build/app/outputs/flutter-apk/app-release.apk (6.5MB)
I/flutter (21797): LAYOUT
I/flutter (21797): Max width: 411.42857142857144
I/flutter (21797): Max height: 843.4285714285714
macOS debug logs 
Launching lib/main.dart on macOS in debug mode...
✓ Built build/macos/Build/Products/Debug/ios_layout_bug.app
flutter: LAYOUT
flutter: Max width: 800.0
flutter: Max height: 600.0
macOS release logs 
Launching lib/main.dart on macOS in release mode...
✓ Built build/macos/Build/Products/Release/ios_layout_bug.app (44.0MB)
flutter: LAYOUT
flutter: Max width: 800.0
flutter: Max height: 600.0

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.1 23B2073 darwin-arm64, locale en-US)
    • Flutter version 3.22.2 on channel stable at /Users/ksokolovskyi/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (4 days ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/ksokolovskyi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/ksokolovskyi/Library/Android/sdk
    • Java binary at: /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 15.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2022.3)
    • 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 17.0.6+0-17.0.6b829.9-10027231)

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

Activity

  1. darshankawar
    added
    in triagePresently being triaged by the triage team
    on Jun 10, 2024

  2. darshankawar commented on Jun 10, 2024

    @darshankawar
    darshankawar
    on Jun 10, 2024
    Member

    Thanks for the report. I was able to replicate the reported behavior only on iOS.

    stable, master flutter doctor -v 
    [!] Flutter (Channel stable, 3.22.2, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.22.2 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (33 hours ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • 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 98.0.4758.80

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

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.23.0-13.0.pre.149, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.23.0-13.0.pre.149 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ae47edab7a (68 minutes ago), 2024-06-07 01:34:14 -0400
    • Engine revision 087feab992
    • Dart version 3.5.0 (build 3.5.0-234.0.dev)
    • DevTools version 2.36.0
    • 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 30.0.3)
    • Android SDK at /Users/dhs/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 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

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

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

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

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

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

! Doctor found issues in 1 category.
      
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • 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 98.0.4758.80

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

! Doctor found issues in 1 category.
  3. darshankawar
    added
    platform-iosiOS applications specifically
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    team-iosOwned by iOS platform team
    found in release: 3.22Found to occur in 3.22
    found in release: 3.23Found to occur in 3.23
    frameworkflutter/packages/flutter repository. See also f: labels.
    a: layoutSystemChrome and Framework's Layout Issues
    and removed
    in triagePresently being triaged by the triage team
    on Jun 10, 2024

  4. loic-sharma commented on Jun 13, 2024

    @loic-sharma
    loic-sharma
    on Jun 13, 2024
    Member

    Hello, thank you for creating this issue! This is a performance optimization that's working as intended. This is platform-specific, which is why you'll see different behaviors on different platforms. Desktop platforms also have this "zero size" first frame.

    That first frame with an empty size allows Flutter and your app to initialize themselves before we know the size of the view. This makes the second frame (which is the first frame driven by a vsync) as fast as possible.

    Please let us know if you have any other questions or concerns!

  5. loic-sharma
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Jun 13, 2024

  6. ksokolovskyi commented on Jun 16, 2024

    @ksokolovskyi
    ksokolovskyi
    on Jun 16, 2024
    ContributorAuthor

    @loic-sharma thanks a lot for your response and explanation!
    I was not able to find this info in the Flutter docs and decided that this might be something not expected.
    Do we have this performance optimization described in the docs?

  7. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Jun 16, 2024
  8. loic-sharma
    self-assigned this
    on Jun 18, 2024

  9. loic-sharma commented on Jun 18, 2024

    @loic-sharma
    loic-sharma
    on Jun 18, 2024
    Member

    @ksokolovskyi Hey there, here are some interesting docs you might find useful:

    1. flutter/packages/flutter/lib/src/scheduler/binding.dart

      Lines 994 to 1016 in b98d485

      /// ## Design discussion
      ///
      /// The Flutter engine prompts the framework to generate frames when it
      /// receives a request from the operating system (known for historical reasons
      /// as a vsync). However, this may not happen for several milliseconds after
      /// the app starts (or after a hot reload). To make use of the time between
      /// when the widget tree is first configured and when the engine requests an
      /// update, the framework schedules a _warm-up frame_.
      ///
      /// A warm-up frame may never actually render (as the engine did not request
      /// it and therefore does not have a valid context in which to paint), but it
      /// will cause the framework to go through the steps of building, laying out,
      /// and painting, which can together take several milliseconds. Thus, when the
      /// engine requests a real frame, much of the work will already have been
      /// completed, and the framework can generate the frame with minimal
      /// additional effort.
      ///
      /// Warm-up frames are scheduled by [runApp] on startup, and by
      /// [RendererBinding.performReassemble] during a hot reload.
      ///
      /// Warm-up frames are also scheduled when the framework is unblocked by a
      /// call to [RendererBinding.allowFirstFrame] (corresponding to a call to
      /// [RendererBinding.deferFirstFrame] that blocked the rendering).

    2. https://api.flutter.dev/flutter/dart-ui/PlatformDispatcher/scheduleWarmUpFrame.html

    3. https://api.flutter.dev/flutter/dart-ui/FlutterView/physicalSize.html

      At startup, the size of the view may not be known before Dart code runs. If this value is observed early in the application lifecycle, it may report Size.zero.

    I've also sent a pull request to further clarify this situation: #150464

    Please let us know if you have more questions!

  10. ksokolovskyi commented on Jun 21, 2024

    @ksokolovskyi
    ksokolovskyi
    on Jun 21, 2024
    ContributorAuthor

    Hi @loic-sharma, thanks a lot for the links you shared and for the PR!

  11. ksokolovskyi
    closed this as completedon Jun 21, 2024
  12. darshankawar
    added
    r: solvedIssue is closed as solved
    on Jun 25, 2024
  13. auto-submit
    added a commit that references this issue on Jun 25, 2024

    Add more warm up frame docs (#150464)

    8334a31

  14. github-actions commented on Jul 9, 2024

    @github-actions
    github-actionsbot
    on Jul 9, 2024 – with GitHub Actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  15. github-actions
    locked as resolved and limited conversation to collaborators on Jul 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

a: layoutSystemChrome and Framework's Layout Issuesfound in release: 3.22Found to occur in 3.22found in release: 3.23Found to occur in 3.23frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: solvedIssue is closed as solvedteam-iosOwned by iOS platform team

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions