[译] 关于 Flutter 页面路由过渡动画，你所需要知道的一切

在Flutter中，页面（route）的过渡动画可以通过PageRouteBuilder和AnimatedSwitcher来实现。以下是一个简单的示例，展示了如何为页面过渡添加渐变渐变动画：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Page 1'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
 
  Route _createRoute() {
    return PageRouteBuilder(
      transitionDuration: Duration(seconds: 1),
      pageBuilder: (context, animation, secondaryAnimation) => Page1(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      },
    );
  }
}
 
class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page 1"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

在这个示例中，我们定义了一个_createRoute()方法，该方法创建了一个带有渐变淡入淡出过渡动画的路由。当点击按钮从HomePage跳转到Page1时，将会看到页面之间的淡入淡出效果。同样的，当返回到HomePage时，也会看到类似的效果。这是一个简单的过渡动画示例，你可以根据需要调整动画的具体参数。