如何在推送路由颤动时创建淡入淡出过渡?
How to create fade transition on push route flutter?
我正在尝试为推送路线创建淡入淡出过渡,因为它创建了一个自定义路线,例如
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, );
}
}
然后通过按下按钮调用它
onPressed: () {
Navigator.push(context, CustomPageRoute(builder: (context) {
return FirstScreen();
}));
}
但这给出了一个带有滑动+淡入淡出的奇怪动画。
如何避免其中的滑动动画?
这是我的代码的输出:
您应该从 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));
我正在尝试为推送路线创建淡入淡出过渡,因为它创建了一个自定义路线,例如
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, );
}
}
然后通过按下按钮调用它
onPressed: () {
Navigator.push(context, CustomPageRoute(builder: (context) {
return FirstScreen();
}));
}
但这给出了一个带有滑动+淡入淡出的奇怪动画。 如何避免其中的滑动动画?
这是我的代码的输出:
您应该从 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));