Skip to content

[PageTransitionsBuilder] ZoomPageTransition causing widget rebuild three times #58345

Closed
Closed
[PageTransitionsBuilder] ZoomPageTransition causing widget rebuild three times#58345
Assignees
shihaohong
Labels
P2Important issues not at the top of the work listf: routesNavigator, Router, and related APIs.found in release: 1.19Found to occur in 1.19frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packages

Description

@AlexV525
AlexV525
opened on May 31, 2020

There's a reproducible demo, try it with https://dartpad.cn/fb30323847b7e0aee6c61bdbecacd060 . It happens on all platforms.

Steps to Reproduce

  1. Create a PageRouteBuilder with _ZoomPageTransition.
  2. Add log to build method inside new page.
  3. Log printed 3 times total.

Expected results: Build only once.

Actual results: Widget built 3 times.

Logs 
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.363
I/flutter ( 7614): State's hashCode: 48367006
I/flutter ( 7614): build: 2020-05-31 12:33:48.365
I/flutter ( 7614): built times: 0
I/flutter ( 7614): built times: 1
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.414
I/flutter ( 7614): State's hashCode: 48367006
I/flutter ( 7614): build: 2020-05-31 12:33:48.422
I/flutter ( 7614): built times: 1
I/flutter ( 7614): built times: 2
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.454
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.467
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.480
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.494
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.507
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.521
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.534
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.548
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.564
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.588
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.602
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.615
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.628
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.643
I/flutter ( 7614): build transition: 2020-05-31 12:33:48.660
I/flutter ( 7614): State's hashCode: 48367006
I/flutter ( 7614): build: 2020-05-31 12:33:48.664
I/flutter ( 7614): built times: 2
I/flutter ( 7614): built times: 3

flutter doctor

[√] Flutter (Channel stable, v1.17.2, on Microsoft Windows [Version 10.0.18363.836], locale zh-CN)

Activity

  1. AlexV525 commented on May 31, 2020

    @AlexV525
    AlexV525
    on May 31, 2020
    MemberAuthor

    /cc @shihaohong which the transition builder was introduced by #41935 .

  2. AlexV525
    changed the title [-][PageTransitionsBuilder] ZoomPageTransition causing State create three times[/-] [+][PageTransitionsBuilder] ZoomPageTransition causing widget rebuild three times[/+] on May 31, 2020

  3. TahaTesser commented on Jun 1, 2020

    @TahaTesser
    TahaTesser
    on Jun 1, 2020
    Contributor
    flutter doctor -v 
    [✓] Flutter (Channel dev, 1.19.0-1.0.pre, on Mac OS X 10.15.5 19F96, locale en-GB)
    • Flutter version 1.19.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 456d80b9dd (3 weeks ago), 2020-05-11 11:45:03 -0400
    • Engine revision d96f962ca2
    • Dart version 2.9.0 (build 2.9.0-7.0.dev 092ed38a87)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • 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)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] 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 version 45.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (4 available)
    • SM M305F   • 32003c30dc19668f • android-arm64  • Android 10 (API 29)
    • macOS      • macOS            • darwin-x64     • Mac OS X 10.15.5 19F96
    • Web Server • web-server       • web-javascript • Flutter Tools
    • Chrome     • chrome           • web-javascript • Google Chrome 83.0.4103.61

• No issues found!
  4. TahaTesser
    added
    p: material_uimaterial_ui package in flutter/packages
    f: routesNavigator, Router, and related APIs.
    found in release: 1.19Found to occur in 1.19
    frameworkflutter/packages/flutter repository. See also f: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    P2Important issues not at the top of the work list
    on Jun 1, 2020

  5. shihaohong commented on Jun 1, 2020

    @shihaohong
    shihaohong
    on Jun 1, 2020
    Contributor

    Hi @AlexVincent525, what sort of issues does this behavior cause for your application?

  6. AlexV525 commented on Jun 1, 2020

    @AlexV525
    AlexV525
    on Jun 1, 2020
    MemberAuthor

    After a short investigation, I found this case would cause the rebuild.

    flutter/packages/flutter/lib/src/material/page_transitions_theme.dart

    Line 267 in 1d395c5

    if (widget.animation.status == AnimationStatus.forward || _transitionWasInterrupted) {

    If comment it out the build situation looks fine, still don't know what happened. The sequence of the Container, SlideTransition, FadeTransition has no affect on this.

  7. shihaohong
    self-assigned this
    on Jun 1, 2020

  8. AlexV525 commented on Jun 1, 2020

    @AlexV525
    AlexV525
    on Jun 1, 2020
    MemberAuthor

    Hi @AlexVincent525, what sort of issues does this behavior cause for your application?

    Hi, I just wondering why it would cause three times of build?

    Some developer may run into some performance issue with build method, as they don't usually optimize their build method.

  9. shihaohong commented on Jun 1, 2020

    @shihaohong
    shihaohong
    on Jun 1, 2020
    Contributor

    @AlexVincent525 The rebuild is occurring because the widget tree is changing shape due to the changes in transition. Notice that the widget tree could be modified based on whether the animation is moving forwards, backwards, or was interrupted:

    forward / interrupted:
Container -> FadeTransition -> ScaleTransition -> child

reverse:
ScaleTransition -> FadeTransition -> child

other:
child (no intermediate transition widgets)

    The reshaping of the widget tree in this manner triggers a new build of the page.

  10. AlexV525 commented on Jun 1, 2020

    @AlexV525
    AlexV525
    on Jun 1, 2020
    MemberAuthor

    So I guess the reason why the shape changed twice (as I debugged) is because the condition widget.animation.status == AnimationStatus.forward and _transitionWasInterrupted using OR (||) makes the widget tree update? Here they cause the last two builds.

    Can it be improved somehow?

  11. 8 remaining items

  12. shihaohong commented on Jun 3, 2020

    @shihaohong
    shihaohong
    on Jun 3, 2020
    Contributor

    Interesting -- It probably has something to do with the timings of the animation of both the scrim appearance, as well as the scale/fade transitions themselves, when the DualTransitionBuilder was introduced.

    Have you tried debugging DualTransitionBuilder or the transition itself to see what might be causing this issue? The ZoomPageTransition was designed earlier than the animations package transitions, so there might be some compatibility issues that need to be resolved.

  13. AlexV525 commented on Jun 4, 2020

    @AlexV525
    AlexV525
    on Jun 4, 2020
    MemberAuthor

    I think it might related to compatibility when there're two DualTransitionBuilder using at the same time. Haven't got enough time into it, I'll try to make it looks normal in these days.

  14. AlexV525 commented on Jun 4, 2020

    @AlexV525
    AlexV525
    on Jun 4, 2020
    MemberAuthor

    That's definitely related to reverseBuilder. Still debugging with the builder.

  15. AlexV525 commented on Jun 4, 2020

    @AlexV525
    AlexV525
    on Jun 4, 2020
    MemberAuthor

    But that's very simillar with FadeThroughTransition in the animations package. See if it can provides some ideas tomorrow.

  16. AlexV525 commented on Jun 4, 2020

    @AlexV525
    AlexV525
    on Jun 4, 2020
    MemberAuthor

    Facing a related issue: #39938 . When implement the _reverseEndScreenScaleTransition it runs the animation reversely, rather than fade out fast.

    flutter/packages/flutter/lib/src/material/page_transitions_theme.dart

    Lines 167 to 178 in 1d395c5

    static final List<TweenSequenceItem<double>> fastOutExtraSlowInTweenSequenceItems = <TweenSequenceItem<double>>[
    TweenSequenceItem<double>(
    tween: Tween<double>(begin: 0.0, end: 0.4)
    .chain(CurveTween(curve: const Cubic(0.05, 0.0, 0.133333, 0.06))),
    weight: 0.166666,
    ),
    TweenSequenceItem<double>(
    tween: Tween<double>(begin: 0.4, end: 1.0)
    .chain(CurveTween(curve: const Cubic(0.208333, 0.82, 0.25, 1.0))),
    weight: 1.0 - 0.166666,
    ),
    ];

  17. AlexV525 commented on Jun 17, 2020

    @AlexV525
    AlexV525
    on Jun 17, 2020
    MemberAuthor

    Closing this because the PR has merged.

  18. AlexV525
    closed this as completedon Jun 17, 2020

  19. AlexV525 commented on Jun 23, 2020

    @AlexV525
    AlexV525
    on Jun 23, 2020
    MemberAuthor

    Re-open because the PR has been reverted in #59992 .

    Any clues in your investigation? @shihaohong

  20. AlexV525
    reopened this on Jun 23, 2020

  21. shihaohong commented on Jun 24, 2020

    @shihaohong
    shihaohong
    on Jun 24, 2020
    Contributor

    From the investigation, it seems like it might be a problem with the test itself, but we are still trying to figure out if it's a problem with the test or the implementation of the PR

  22. AlexV525
    closed this as completedon Jun 25, 2020

  23. AlexV525 commented on Jun 25, 2020

    @AlexV525
    AlexV525
    on Jun 25, 2020
    MemberAuthor

    Oh the one last thing I forgot is that I saw someone updates the AUTHORS file during the PR, does it required something to be in there? Should I update it too? I just found out that I already merged two PRs into flutter. :P

  24. shihaohong commented on Jun 25, 2020

    @shihaohong
    shihaohong
    on Jun 25, 2020
    Contributor

    @AlexVincent525 It's not required, but it allows you to claim credit that you contributed to the Flutter repo! Feel free to add your credentials on there if you'd like to be acknowledged on there :)

  25. github-actions commented on Aug 19, 2021

    @github-actions
    github-actionsbot
    on Aug 19, 2021

    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.

  26. github-actions
    locked as resolved and limited conversation to collaborators on Aug 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listf: routesNavigator, Router, and related APIs.found in release: 1.19Found to occur in 1.19frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packages

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions