Flutter - 英雄动画不适用于选项卡导航器

Dis*_*era 5 animation flutter flutter-layout flutter-animation

我是颤振新手,我正在使用英雄小部件为浮动按钮制作动画。

我有底部导航,我必须使用选项卡导航器打开页面。但英雄动画不起作用。

我使用了所有可能的解决方案,但英雄动画仍然不适用于页面路由。

这是我的代码片段。

FloatingActionButton(
          onPressed: () {
            _selectTab(TabItem.Floating);
          },
          child: Icon(Icons.add),
          heroTag: "tag",
        ),
Run Code Online (Sandbox Code Playgroud)

这是点击 fab 按钮打开新页面

 void _selectTab(TabItem tabItem) {
    if (tabItem == currentTab) {
      // pop to first route
      _navigatorKeys[tabItem].currentState.popUntil((route) => route.isFirst);
    } else {
      setState(() => currentTab = tabItem);
    }
  }
Run Code Online (Sandbox Code Playgroud)

在导航器中

 @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));
        });
  }
Run Code Online (Sandbox Code Playgroud)

路线

 if (widget.tabItem == TabItem.Floating) {
          return ActFloatingScreen(
            title: 'Floating Tab',
            onPush: (materialIndex) =>
                _push(context, materialIndex: materialIndex),
          );
        }
Run Code Online (Sandbox Code Playgroud)

 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)));
  }
Run Code Online (Sandbox Code Playgroud)

最后是我想要的课程,我想用英雄动画来打开

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,
                  )),
            ),
          ],
        ),
      ),
    );
Run Code Online (Sandbox Code Playgroud)