Unexpected Ink Splash with Material3 when navigating #119897
Comments
|
Hi @mk-dev-1 Can you also please share a screen recording? I'm not really sure what you mean by "Unexpected highlighting". |
TahaTesser
added
the
waiting for customer response
|
I can only see the behavior with Please find below two screen recordings for comparison: with.material3.webmwithout.material3.webm |
github-actions
bot
removed
the
waiting for customer response
danagbemava-nc
changed the title
|
I can reproduce the issue only on I tested with This bug did not reproduce on flutter 3.3.10 but Material 3 in that version of flutter was pretty minimal so I can't definitively say that this is a regression. Labeling for further investigation. recordings
code sampleimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
super.key,
});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
primarySwatch: Colors.blue,
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({
super.key,
});
@override
Widget build(BuildContext context) {
const hs = SizedBox(height: 20);
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: () => navigate(context),
child: const Padding(
padding: EdgeInsets.all(16),
child: Text("Tap Me - InkWell"),
),
),
hs,
TextButton(
onPressed: () => navigate(context),
child: const Text("Tap Me - TextButton"),
),
hs,
ElevatedButton(
onPressed: () => navigate(context),
child: const Text("Tap Me - ElevatedButton"),
),
hs,
ListTile(
onTap: () => navigate(context),
title: const Text('Tap Me - ListTile'),
)
],
),
),
);
}
void navigate(BuildContext context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SecondPage(),
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar());
}
}flutter doctor -v |
danagbemava-nc
added
platform-android
|
Upgrade to beta channel Add the code below to your theme ThemeData(
useMaterial3: true,
pageTransitionsTheme: const PageTransitionsTheme(
builders: <TargetPlatform, PageTransitionsBuilder>{
TargetPlatform.android: ZoomPageTransitionsBuilder(
allowEnterRouteSnapshotting: false,
),
},
),
),Code sampleimport 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark(useMaterial3: true).copyWith(
primaryColor: Colors.blue,
pageTransitionsTheme: const PageTransitionsTheme(
builders: <TargetPlatform, PageTransitionsBuilder>{
TargetPlatform.android: ZoomPageTransitionsBuilder(
allowEnterRouteSnapshotting: false,
),
},
),
),
home: const HomeScreen(),
),
);
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: Column(
children: <Widget>[
ListTile(
title: const Text('ListTile'),
subtitle: const Text('Tap me!'),
onTap: () => _onTap(context),
),
ElevatedButton(
onPressed: () => _onTap(context),
child: const Text('ElevatedButton'),
),
FilledButton(
onPressed: () => _onTap(context),
child: const Text('FilledButton'),
),
OutlinedButton(
onPressed: () => _onTap(context),
child: const Text('OutlinedButton'),
),
TextButton(
onPressed: () => _onTap(context),
child: const Text('TextButton'),
),
],
),
);
}
void _onTap(BuildContext context) {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const NewScreen()),
);
}
}
class NewScreen extends StatelessWidget {
const NewScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Screen 2'),
),
body: Center(
child: TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('Go back'),
),
),
);
}
}Or change page transition builder to customSomething like this class FadePageTransitionsBuilder extends PageTransitionsBuilder {
@override
Widget buildTransitions<T>(
PageRoute<T> route,
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return FadeTransition(
opacity: animation,
child: child,
);
}
}ThemeData(
useMaterial3: true,
pageTransitionsTheme: const PageTransitionsTheme(
builders: <TargetPlatform, PageTransitionsBuilder>{
TargetPlatform.android: FadePageTransitionsBuilder(),
},
),
),flutter --version |
|
As @VadimMalykhin pointed Based on the docs, it seems to be working as intended as animations snapshotted during the transition and this can be disabled in the cc: @AlexV525 Do you agree? |
|
cc @Time1ess who invented the parameter. |
|
For Android, ZoomPageTransitionsBuilder is used by default for page transition. Say we are navigating from page A to page B, the implementation of this transition builder snapshots both page A and page B and use the snapshots during the page transition animation, this is for better performance and new, CMIW @jonahwilliams. The intention of my PR for adding the |
|
I am getting the same issue of Ink Splash of InkWell while navigating back to a page. Code SampleBut when i set Is there any ceveat of setting allowEnterRouteSnapshotting to false. Pls look into this issue. See video
Screenrecording_20230512_154327.mp4
Screenrecording_20230512_154514.mp4
Screenrecording_20230512_164502.mp4 |
|
cc: @bleroux |
|
Since #100812 zoom page transition is the default on Android. A flag was introduced to opt-out and use the previous behavior on a per route basis, #118086 introduces a global flag to disable the snapshotting for entering transitions. I also filed some documentation updates in #121701 to make this more visible. I plan to file a website issue to make this visible in the following page: https://docs.flutter.dev/release/breaking-changes/page-transition-replaced-by-ZoomPageTransitionBuilder Maybe there are some other places where we can mention this? All ideas are welcome. |
|
Unassigning myself as I'm not sure if and where more documentation can be added. |
reidbaker
added
triaged-android
flutter-triage-bot
bot
removed
the
triaged-android
|
The |
Piinks
added
team-design
|
For triage clarity - any issue falling under material design should be given a |
Piinks
added
triaged-framework
|
Closing this issue since several related PRs landed. Especially #121701 which adds an example to deactivate snapshotting globally. Since #100812 zoom page transition is the default on Android. A flag was introduced to deactivate snapshotting on a per route basis, Several PRs introduced global flags to deactivate snapshotting : |
|
Same issue here but it happen even with useMaterial3 false |
|
I got this behavior in my app and it's not obvious what's going on and IMO most people won't find on a google search what's going on and how to fix it. Documentation and flags doesn't seem to be the a reasonable solution IMHO, things should just work in the expected way, and Can we have the animations not animate, but their timers/tickers continue to advance in time, so when we go back the animations will have finished? I believe this solves the performance issue and the Another suggestion (which I honestly don't know if it's feasible) is to implement the zoom transition as a shader instead. I don't know if it's possible, but it could have a better performance, allowing us to not need to disable animations. |
|
In my experience the current default behaviour more often than not results in noticeable side-effects which hurts the native feel. Setting Regarding the performance of the transition itself, it's worth noting that as of Android 13 there's a new transition for native apps. When this change is brought to Flutter it could have a different performance impact than the zoom transition. It looks like this new transition is currently being tracked under #116526. screen-20231001-170121.mp4Interestingly the native transition seems to involve some form of snapshotting for blending the screens together, as can be seen in this screenshot where the scrollbar from the exiting screen and the photo on the entering screen are stretched (on a screen with an animation playing, eg an ink sparkle, the stretched portion is not animated): Screenshot
|
|
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 |
Steps to Reproduce
flutter runon the code sampleListTileto navigate to the second screenGo backto return to the start screenExpected results:
Standard navigation back to start screen with
ListTilenot being highlighted.Actual results:
ListTile remains highlighted for a brief moment and returns to the expected state afterwards.
Code sample
Logs
The text was updated successfully, but these errors were encountered: