Repository navigation
Material routes have delay on push and pop #88221
Description
When using MaterialRoute or MaterialPage on web or desktop, there's a 300ms delay when navigating back from any page. This makes Flutter apps on web and desktop very laggy:
PR #82596 removed the default animations from web and desktop, but didn't remove the animation transition delay, which is hard coded in MaterialRouteTransitionMixin. The navigator waits for the 300ms transitionDuration before popping the page. This change is in the current beta branch 2.5.0-5.1.pre.
I feel this change should be reverted until there's a solution for the delay: it's better to have an animation rather than a pause that will make developers feel something is broken. It especially feels laggy on web when using the browser's back button.
The hard-coding of the 300ms duration is really problematic; it also means the transition animation is incorrect on iOS (issue #80929). Ideally the transition duration would be provided in the transition themes.
Related issue that users are likely to run into when trying to remove this delay:
Example app code
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: PageOne()));
}
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page one'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (_) => PageTwo()),
);
},
child: const Text('Push page two'),
),
),
);
}
}
class PageTwo extends StatefulWidget {
@override
_PageTwoState createState() => _PageTwoState();
}
class _PageTwoState extends State<PageTwo> {
final _timer = NotifyingTimer();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: BackButton(
onPressed: () {
_timer.go();
Navigator.pop(context);
},
),
title: AnimatedBuilder(
animation: _timer,
builder: (_, __) => Text('${_timer.stopwatch.elapsedMilliseconds}ms'),
),
),
);
}
}
class NotifyingTimer extends ChangeNotifier {
final stopwatch = Stopwatch();
void go() {
stopwatch.start();
Timer.periodic(
const Duration(milliseconds: 1),
(_) => notifyListeners(),
);
}
}
Activity
TahaTesser commentedon Aug 16, 2021
Hi @tomgilder
Thanks for filing the issue, I can confirm it is from beta to master, labelling as proposal as the change is intended
stablebetadevmasterCheck
flutter doctor -voutputs for each channel belowflutter doctor -v
✅: No Issue ❌: Issue reproduced
tomgilder commentedon Aug 16, 2021
I'd say this is pretty clearly a bug - I don't believe keeping the delay was intentional
Goncharo commentedon Sep 9, 2021
+1 one for this, however it is worth noting that I'm seeing this on
MaterialPagepushes as well (using Nav 2.0), and definitely looks like a bug.Upgraded to 2.5.0 this morning, and spent some time diagnosing why the
MaterialPagetransitions were now seemingly different between mobile and desktop/web. As mentioned above, it seems like PR #82596 removed the default transitions, however the animation delay is still there for both pops and pushes.Agreed with @tomgilder that this PR should probably be reverted, otherwise need to have some fix in place. As of now, the default
MaterialPagebehavior looks fairly broken on web/desktop.rydmike commentedon Sep 10, 2021
Yes indeed @Goncharo the issue has sadly now regressed into release 2.5.0 stable release. since it was never addressed in the 2.5 pre-release versions earlier.
[-]Material routes have delay on pop[/-][+]Material routes have delay on push and pop[/+]rydmike commentedon Sep 10, 2021
@TahaTesser since this issue has now regressed into stable 2.5.0 the affected channels should be updated, and it now needs some attention and high prio too.
Imo this issue now needs a 2.5.1 hotfix release where it is reverted if the actual fix to implement it correctly takes too long implement and deliver. Better to have an animation that starts at once, than to wait the animation time before anything happens - I'm with @tomgilder on that.
5 remaining items
darrenaustin commentedon Sep 13, 2021
Apologies for not catching this before it went into stable. I am investigating removing the delay when there is no transition. If I can't do that quickly and safely, I will revert it.
However, if you need a work around for right now, you can put back the original behaviour by adding the previous default transitions to your app's theme:
tomgilder commentedon Sep 13, 2021
@darrenaustin thank you!
If you'd like a suggestion as to how to fix this longer term, I came up with a TransitionPage for my package that I think works quite well for users.
It defines a
PageTransitionobject withdurationandtransitionsBuilderproperties, I think something similar in Flutter would work well.chunhtai commentedon Sep 13, 2021
One idea is add transition duration to the PageTransitionsTheme, and grab that duration in
flutter/packages/flutter/lib/src/material/page.dart
Line 85 in fad5e4c
One problem with the approach is that it doesn't have context at that point, but the Route has access to navigator state, we can probably grab the context from it
HansMuller commentedon Sep 13, 2021
Reverting #82596 until we can resolve this issue to everyone's satisfaction is the right thing to do in the short-term. The "cp: 2.5" label LGTM.
maheshj01 commentedon Sep 24, 2021
Adding the Desktop and web labels, since this issue is only on those platforms.
darrenaustin commentedon Feb 24, 2022
As the change that caused this delay has been reverted, I am going to close this issue. I will open another one to track changing the default transition for desktop and web to be a zero delay transition.
github-actions commentedon Mar 10, 2022
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 -vand a minimal reproduction of the issue.