如何在推动路线颤动上创建淡入淡出过渡? [英] How to create fade transition on push route flutter?

问题描述

我正在尝试为推入路线创建一个淡入淡出过渡，为此创建了一个自定义路线，例如

I am trying to create a fade transition for pushing routes, for that created a custom route like

class CustomPageRoute<T> extends MaterialPageRoute<T> {
  CustomPageRoute({WidgetBuilder builder, RouteSettings settings})
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(opacity:animation, child: child,  );
  }
}

并通过按钮调用它，例如

And calling it from a button press like

onPressed: () {
   Navigator.push(context, CustomPageRoute(builder: (context) {
       return FirstScreen();
   }));
}

但是，这给出了带有滑动+淡入淡出的怪异动画. 如何避免这种滑动动画?

But this give a weird animation with sliding + fade. How to avoid the sliding animation in this?

这是我的代码的输出:

推荐答案

您应该从PageRoute而不是MaterialPageRoute

    class CustomPageRoute<T> extends PageRoute<T> {
      CustomPageRoute(this.child);
      @override
      // TODO: implement barrierColor
      Color get barrierColor => Colors.black;

      @override
      String get barrierLabel => null;

      final Widget child;

      @override
      Widget buildPage(BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      }

      @override
      bool get maintainState => true;

      @override
      Duration get transitionDuration => Duration(milliseconds: 500);
    }

用法:

          final page = YourNewPage();
          Navigator.of(context).push(CustomPageRoute(page));

这篇关于如何在推动路线颤动上创建淡入淡出过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！