简简单单的Flutter 自定义页面跳转动画

Flutter 自定义页面跳转动画

import 'package:flutter/material.dart';

class FadeRoute extends PageRouteBuilder {
  final Widget page;
  FadeRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) { 
     
   return FadeTransition(
                opacity: animation,
                child: child,
              )
    }  
        );
}


Navigator.push( context, FadeRoute(page:child));
Navigator.pop()

页面打开 animation 0-1 变化 state forward
页面关闭 animation 1-0 变化 state reverse
可以通过animation的状态来控制开启关闭使用不同的动画，以及显示不同的控件

参考链接：https://juejin.cn/post/6844903854371241997#heading-4