flutter - 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?
Here is the output of my code:
解决方案
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));
推荐阅读
- python - python - 如何将像二十二这样的字符串转换为python中的数字?
- c++ - C++ 链接列表未解决的问题
- c++ - 我如何定义一个以结构为键的 QMap
- authentication - 在 Amplify 中使用管理员查询创建用户
- laravel - 数据库迁移后准备好的语句“pdo_stmt_00000005”不存在
- php - php中的排序数组
- html - 是否有 Web API 来检索自然属于表格行的单元格(对于单元格跨越多行的表格)?
- javascript - Node-Postgres UnhandledPromiseRejectionWarning:错误:查询必须具有文本或名称。既不提供也不支持
- linux - www-data python run sudo 命令作为另一个用户错误密码需要
- python - 无法使用 Selenium 更改 Firefox 的首选项