Flutter自定义路由PageRouteBuilder

Posted 2021-10-24 ckang

自定义路由翻转，渐变，左右滑动

方法如下：

1. 首先继承 PageRouteBuilder ，重写方法
2. 将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()));