问题
I am new to flutter and I am using hero widget to make animation for floating button.
I have bottom navigation and I have to open page with tab navigator. But hero animation is not working.
I use every possible solution but still hero animation not working for page route.
Here is my code snippet.
FloatingActionButton(
onPressed: () {
_selectTab(TabItem.Floating);
},
child: Icon(Icons.add),
heroTag: "tag",
),
This is click for fab button to open new page
void _selectTab(TabItem tabItem) {
if (tabItem == currentTab) {
// pop to first route
_navigatorKeys[tabItem].currentState.popUntil((route) => route.isFirst);
} else {
setState(() => currentTab = tabItem);
}
}
In navigator
@override
Widget build(BuildContext context) {
var routeBuilders = _routeBuilders(context);
return Navigator(
observers: [
HeroController(),
],
key: widget.navigatorKey,
initialRoute: TabNavigatorRoutes.root,
onGenerateRoute: (routeSettings) {
return PageRouteBuilder(
transitionDuration: Duration(seconds: 1),
pageBuilder: (_, __, ___) =>
routeBuilders[routeSettings.name](context));
});
}
Route
if (widget.tabItem == TabItem.Floating) {
return ActFloatingScreen(
title: 'Floating Tab',
onPush: (materialIndex) =>
_push(context, materialIndex: materialIndex),
);
}
push
void _push(BuildContext context, {int materialIndex: 500}) {
var routeBuilders = _routeBuilders(context, materialIndex: materialIndex);
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(seconds: 1),
pageBuilder: (_, __, ___) =>
routeBuilders[TabNavigatorRoutes.detail](context)));
}
and finally my desired class which I want to open with hero animation
return Scaffold(
backgroundColor: Colors.white,
body: Hero(
tag: "tag",
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
color: Colors.green,
height: 200,
),
PositionedDirectional(
start: 0,
end: 0,
top: 150,
child: Center(
child: Icon(
Icons.add,
size: 100,
)),
),
],
),
),
);
来源:https://stackoverflow.com/questions/61500713/flutter-hero-animation-is-not-working-with-tab-navigator