本文演示flutter创建 page1 和 page2 两个页面，并且页面之间跳转添加动画

页面入口

import 'package:flutter/material.dart';
void main() {
  runApp(const MaterialApp(
    home: Page1(),
  ));
}

创建 Page1

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const TextStyle textStyle = TextStyle(
      fontSize: 24,
      color: Colors.red
    );

    return Scaffold(
      appBar: AppBar(
        title: new Text("Page1", style: textStyle),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 这里的 _createRoute 在下方创建
            Navigator.of(context).push(_createRoute());
          },
          child: const Text('GoGoGO!'),
        ),
      ),
    );
  }
}

创建 router

Route _createRoute() {
  return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // 开始坐标
        const begin = Offset(1, 0);
        // 结束坐标
        const end = Offset.zero;
        // 动画曲线
        const curve = Curves.ease;
        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
        return SlideTransition(
          position: animation.drive(tween),
          child: child,
        );
      });
}

创建 Page2

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Page2"),
      ),
      body: const Center(
        child: Text('page2'),
      ),
    );
  }
}