Flutter - Hero animation is not working with tab navigator

社会主义新天地 提交于 2020-05-28 04:57:42

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!