Flutter自定义路由PageRouteBuilder
自定义路由翻转,渐变,左右滑动
方法如下:
- 首先继承 PageRouteBuilder ,重写方法
- 将MaterialPageRoute改为showSearch
import 'package:flutter/material.dart'; class animation_route extends PageRouteBuilder { final Widget widget; animation_route(this.widget) : super( transitionDuration: const Duration(milliseconds: 500), //设置动画时长500毫秒 pageBuilder: ( BuildContext context, Animation<double> animation1, Animation<double> animation2){ return widget; }, transitionsBuilder: ( BuildContext context, Animation<double> animation1, Animation<double> animation2, Widget child ){ //渐变过渡 // return FadeTransition(//渐变过渡 0.0-1.0 // opacity: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( // parent: animation1, //动画样式 // curve: Curves.fastOutSlowIn, //动画曲线 // )), // child: child, // ); //翻转缩放 // return RotationTransition( // turns: Tween(begin: 0.0, end: 1.0). // animate( // CurvedAnimation( // parent: animation1, // curve: Curves.fastOutSlowIn, // ) // ), // child: ScaleTransition( // scale: Tween(begin: 0.0, end: 1.0). // animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)), // child: child, // ), // ); //左右滑动 return SlideTransition( position: Tween<Offset>( begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0) ) .animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)), child: child, ); } ); }
使用方法
Navigator.push(context, MaterialPageRoute(builder: (context){ return test(); })); 改为Navigator.push(context, animation_route(test()));