flutter
Improve zooming animation when pushing to a new route
Steps to reproduce
it's basically trying to get this issue, which was closed, re-opened: https://github.com/flutter/flutter/issues/115995
i dont see any other android non-flutter apps having those kind of jarring transitions. so i dont believe that "is expected behavior" besides, it looks horrible
Expected results
a pleasant transition when navigating between MaterialPageRoutes
Actual results
the transition when navigating between MaterialPageRoutes is jarring and unappealing. almost looks like a graphical glitch
Code sample
see the original report. also it can be clearly seen in the skeleton application template of flutter create
Screenshots or Video
see the original report
Logs
No response
Flutter Doctor output
Doctor output
[√] Flutter (Channel beta, 3.22.0-0.1.pre, on Microsoft Windows [Version 10.0.22631.3296], locale en-US)
• Flutter version 3.22.0-0.1.pre on channel beta at X:\.sdk\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 29babcb32a (3 days ago), 2024-04-03 17:17:04 -0500
• Engine revision 97550907b7
• Dart version 3.4.0 (build 3.4.0-282.1.beta)
• DevTools version 2.34.2
[√] 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 X:\.sdk\android
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = X:\.sdk\android
• 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.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[X] Visual Studio - develop Windows apps
X Visual Studio not installed; this is necessary to develop Windows apps.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] 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)
[√] VS Code (version 1.88.0)
• VS Code at C:\Users\matte\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.86.0
[√] Connected device (3 available)
• KB2003 (mobile) • 9a1ac6f9 • android-arm64 • Android 14 (API 34)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.3296]
• Edge (web) • edge • web-javascript • Microsoft Edge 123.0.2420.81
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 2 categories.
@wildsylvan This seems to be the default behavior on Android as I see the similar black "background" when pushing to new activity on Android native:
Demo
https://github.com/flutter/flutter/assets/104349824/49f1a0b9-8f37-4060-88e1-5e097fa3fd5a
i dont see any other android non-flutter apps having those kind of jarring transitions.
Could you share an example?
like for example: google phone, google messages, google contacts, google photos. the transitions during the navigations are smooth not jarring. im sure material design 3 wouldn't recommend a transition like the one you shown in the video (which looks like a bug even tho it isn't).
here's a vid of the bad transitions in the skeleton flutter template (it's hard to fully appreciate them in video but on the screen they look horrible): https://github.com/flutter/flutter/assets/19886441/0d400809-6d0b-422e-8637-1aa8bb634909
I looked at M3 specs and found this, the barrierColor looks similar to Flutter.
https://m3.material.io/styles/motion/transitions/transition-patterns#16ba9505-e33a-47e6-862d-d341b9a361fd
| Flutter | M3 specs |
|---|---|
Flutter sample code
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
void main() {
timeDilation = 5;
runApp(
const MyApp(),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: ScreenA(),
);
}
}
class ScreenA extends StatelessWidget {
const ScreenA({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => const ScreenB(),
),
);
},
child: const Text('Go to ScreenB'),
),
],
),
),
);
}
}
class ScreenB extends StatelessWidget {
const ScreenB({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Back to ScreenA'),
),
],
),
),
);
}
}
So I think it's working as expected. If you still believe it's incorrect, please share M3 specs you are referring to.
I and my colleagues have also reviewed this but still couldn't see the difference you're observing. The demo with M3 specs above includes animation (hero) while Flutter's only zoom page transition, but they both show barrier color.
To clarify the issue, please be more specific about the bug you are reporting (barrierColor or transition animation?). Giving a specific native example with the same parameters (animation type, color, etc) would also be helpful.
ok i think it's a compound issue. i anyalyzed several google apps (android 14): phone, messages, gmail, contacts, photos, keep notes, drive, calendar, files, wallet.
the transition animations are not like the zooming one in flutter. they're much more detailed. like in notes if you tap on a note it expands to fill the screen (and behind it there's a medium scrim to cover the previous page). but the animation is deliberate and it's really clear what's happening. the scrim is not a flash of black that instanly disappears.
gmail probably has the most similar transition to flutter (when opening an email from the email list). but still doesn't look as bad as flutter. and on the back gesture, you can clearly see the full screen email going back to a list item.
i must say many of the apps listed above are not using zooming transitions animations on navigation as well.
anyway i think either the zooming animations should be reworked (they're defintely too fast, for one) to make it look less like your gpu is dying and more in-line with the material apps google is producing or they should be swapped altogether for something like the phone or file app is using (i.e. slide in), which is much more pleasant in my opinion.
To compare this, I do the following setup:
- Keep Notes: I have slowed down animation with Developer Options by going to three scale settings (Window, Transition and Animator scales) and changing all to 5x
- Flutter app: a demo of MaterialPageRoute on page transition with setting
timeDilation = 10.
| Keep Notes | Flutter |
|---|---|
Sample code Flutter
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
void main() {
timeDilation = 10;
runApp(
const MyApp(),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: ScreenA(),
);
}
}
class ScreenA extends StatelessWidget {
const ScreenA({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => const ScreenB(),
),
);
},
child: const Text('Go to ScreenB'),
),
ListTile(
leading: const Hero(
tag: 'hero-rectangle',
child: BoxWidget(size: Size(50.0, 50.0)),
),
onTap: () => _gotoDetailsPage(context),
title: const Text(
'Tap on the icon to view hero animation transition.',
),
),
],
),
),
);
}
void _gotoDetailsPage(BuildContext context) {
Navigator.of(context).push(MaterialPageRoute<void>(
builder: (BuildContext context) => Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: const Center(
child: Hero(
tag: 'hero-rectangle',
child: BoxWidget(size: Size(200.0, 200.0)),
),
),
),
));
}
}
class BoxWidget extends StatelessWidget {
const BoxWidget({super.key, required this.size});
final Size size;
@override
Widget build(BuildContext context) {
return Container(
width: size.width,
height: size.height,
color: Colors.blue,
);
}
}
class ScreenB extends StatelessWidget {
const ScreenB({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Back to ScreenA'),
),
],
),
),
);
}
}
It can be seen that the animation of the note detail page will slow down a bit and have inertia when opening, looking smoother. I will mark this as a proposal to have other's input.