Animations won't redraw until the navigation transition finishes when navigating to a new page #145894

ArinFaraj · 2024-03-28T13:11:27Z

Steps to reproduce

Create a page with an animation that starts automatically
Create a button that navigates to the page with the animation
Press the button, and see that the animation is not refreshing the widgets until the page transition has finished

Expected results

The animations should be refreshing and redrawing the page while the page is transitioning in.

Actual results

The page seems to be frozen on the initial frame until the page transition finishes, then starts redrawing based on the running animation.

The animation controller seems to be working in the background with no issues because when the page starts redrawing with the animation, it's already a few milliseconds into the animation.

Only Android devices are affected by this issue, which also affects older Flutter versions and older Android versions, like Android 10. The only thing that has changed since I did not have this problem is the Android SDK, therefore, it may be connected to the issue.

Code sample

import 'package:flutter/material.dart';

void main() => runApp(
      const MaterialApp(
        home: HomePage(),
      ),
    );

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late final controller = AnimationController(
    duration: const Duration(seconds: 7),
    vsync: this,
  )..forward();

  void _openNewPage() {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const HomePage(),
      ),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RotationTransition(
          turns: controller,
          child: const Text(
            'hello',
            style: TextStyle(fontSize: 90),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _openNewPage,
        tooltip: 'Open New Page',
        child: const Icon(Icons.open_with),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Expected:

Video2.mp4

Dartpad (web)

Actual:

Video.mp4

Android Emulator

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[!] Flutter (Channel stable, 3.19.4, on Microsoft Windows [Version 10.0.22631.3374], locale en-US)
    • Flutter version 3.19.4 on channel stable at C:\Users\pc\scoop\apps\fvm\current\default
    ! Warning: `flutter` on your path resolves to C:\Users\pc\scoop\persist\fvm\versions\stable\bin\flutter, which is not
      inside your current Flutter SDK checkout at C:\Users\pc\scoop\apps\fvm\current\default. Consider adding
      C:\Users\pc\scoop\apps\fvm\current\default\bin to the front of your path.
    ! Warning: `dart` on your path resolves to C:\Users\pc\scoop\persist\fvm\versions\stable\bin\dart, which is not inside
      your current Flutter SDK checkout at C:\Users\pc\scoop\apps\fvm\current\default. Consider adding
      C:\Users\pc\scoop\apps\fvm\current\default\bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (8 days ago), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.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.

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\pc\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.4)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.9.34714.143
    • Windows 10 SDK version 10.0.22621.0

[✓] Android Studio (version 2023.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.9+0--11185874)

[✓] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 14 (API 34) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.22631.3374]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 123.0.6312.59
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 122.0.2365.92

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

! Doctor found issues in 1 category.

Edit:

add more details on where it happens in the actual results section

huycozy · 2024-03-29T08:09:21Z

Thanks for the report. I also checked this on macOS and iOS app and saw it achieved the same result as Web app (expected). It seems to only appear on Android app target platform.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.5, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 300451adae (25 hours ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.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 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • Pixel 7 (mobile) • 2B171FDH20084L • android-arm64  • Android 14 (API 34)
    • macOS (desktop)  • macos          • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome         • web-javascript • Google Chrome 123.0.6312.86

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

• No issues found!

[!] Flutter (Channel master, 3.21.0-17.0.pre.24, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.21.0-17.0.pre.24 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 1a2f34ab5b (63 minutes ago), 2024-03-28 19:39:17 -0700
    • Engine revision 68aa9ba386
    • Dart version 3.4.0 (build 3.4.0-282.0.dev)
    • DevTools version 2.34.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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.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 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • Pixel 7 (mobile) • 2B171FDH20084L • android-arm64  • Android 14 (API 34)
    • macOS (desktop)  • macos          • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome         • web-javascript • Google Chrome 123.0.6312.86

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

! Doctor found issues in 1 category.

ArinFaraj · 2024-03-29T08:40:46Z

Yes i forgot to mention that it only happens on Android. Windows is fine as well.

gmackall · 2024-04-11T18:12:33Z

From android triage: Our initial reaction is that this is as designed, because transitions between pages should use a HeroAnimation. That said, the fact that Android behaves differently than web and iOS certainly indicates something is different.

Framework team, do you have any classes or code pointers where we might see what we are doing wrong?

goderbauer · 2024-04-12T23:20:08Z

This is a performance optiomazation implemented for Android's ZoomPageTransition: Before the transition the route is snapshotted and during the transition only this snapshot is shown (hence all animations in the route are paused). For additional information on this see

The first link also includes a code sample demonstrating how snapshotting for route transitions can be turned off. When doing so, be aware that this might hurt performance.

Since this is working as intended, I am going to close this issue.

ArinFaraj changed the title ~~Animations won't refresh until the navigation transition finishes when navigating to a new page~~ Animations won't redraw until the navigation transition finishes when navigating to a new page Mar 28, 2024

huycozy added the in triage Presently being triaged by the triage team label Mar 29, 2024

gmackall added fyi-framework For the attention of Framework team P3 Issues that are less important to the Flutter project triaged-android Triaged by Android platform team labels Apr 11, 2024

goderbauer closed this as completed Apr 12, 2024

huycozy added the r: invalid Issue is closed as not valid label Apr 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Animations won't redraw until the navigation transition finishes when navigating to a new page #145894

Animations won't redraw until the navigation transition finishes when navigating to a new page #145894

ArinFaraj commented Mar 28, 2024 •

edited

huycozy commented Mar 29, 2024

ArinFaraj commented Mar 29, 2024

gmackall commented Apr 11, 2024

goderbauer commented Apr 12, 2024

Animations won't redraw until the navigation transition finishes when navigating to a new page #145894

Animations won't redraw until the navigation transition finishes when navigating to a new page #145894

Comments

ArinFaraj commented Mar 28, 2024 • edited

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented Mar 29, 2024

ArinFaraj commented Mar 29, 2024

gmackall commented Apr 11, 2024

goderbauer commented Apr 12, 2024

ArinFaraj commented Mar 28, 2024 •

edited