首页 > 解决方案 > Flutter:导航后淡入小部件

问题描述

考虑两条路线,A 和 B。从 A 导航到 B 后,如何让 B 中的小部件逐渐淡入(从不透明度 0 变为 1)?

标签: flutterflutter-animation

解决方案


看起来您正在寻找的是具有自定义转换的 PageRouteBuilder ,如下所示:

return Navigator.of(context).push(PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) {
    return HomePage();
  },
  transitionDuration: Duration(milliseconds: 500),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  }
));

推荐阅读