Flutter自定义页面路由插件custom_page_route的使用

Flutter 自定义页面路由插件 custom_page_route 的使用

在 Flutter 中，custom_page_route 是一个用于实现自定义动画页面路由的插件。通过这个插件，你可以轻松地为页面跳转添加各种动画效果。

Getting Started（入门）

CustomPageRoute 类构造函数接受以下参数：

• child: 目标页面的组件。
• axisDirection: 动画的方向，默认为 AxisDirection.right。
• transitionDuration: 跳转时长，默认为 500 毫秒。
• reverseTransitionDuration: 返回时长，默认为 500 毫秒。

CustomPageRoute({
    required Widget child,
    AxisDirection axisDirection = AxisDirection.right,
    Duration transitionDuration = const Duration(milliseconds: 500), 
    Duration reverseTransitionDuration = const Duration(milliseconds: 500)
})

示例代码

下面是一个完整的示例，展示了如何使用 custom_page_route 插件来实现不同方向的页面跳转动画。

import 'package:custom_page_route/custom_page_route.dart';
import 'package:flutter/material.dart';

// 定义两个页面类
class Page1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page 1')),
      body: Center(child: Text('This is Page 1')),
    );
  }
}

class Page2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page 2')),
      body: Center(child: Text('This is Page 2')),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animated Page Route"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 按钮：向左滑动到 Page 1
            MaterialButton(
              color: Theme.of(context).primaryColor,
              onPressed: () {
                Navigator.push(
                  context,
                  CustomPageRoute(
                    axisDirection: AxisDirection.left,
                    child: Page1(),
                  ),
                );
              },
              child: Text("Go to Page 1"),
            ),
            const SizedBox(height: 20),
            
            // 按钮：向上滑动到 Page 2
            MaterialButton(
              color: Theme.of(context).primaryColor,
              onPressed: () {
                Navigator.push(
                  context,
                  CustomPageRoute(
                    transitionDuration: Duration(seconds: 5),
                    reverseTransitionDuration: Duration(seconds: 5),
                    axisDirection: AxisDirection.up,
                    child: Page2(),
                  ),
                );
              },
              child: Text("Go to Page 2"),
            ),
            const SizedBox(height: 20),
            
            // 按钮：向下滑动到 Page 2
            MaterialButton(
              color: Theme.of(context).primaryColor,
              onPressed: () {
                Navigator.push(
                  context,
                  CustomPageRoute(
                    transitionDuration: Duration(seconds: 5),
                    reverseTransitionDuration: Duration(seconds: 5),
                    axisDirection: AxisDirection.down,
                    child: Page2(),
                  ),
                );
              },
              child: Text("Go to Page 3"),
            ),
            const SizedBox(height: 20),
            
            // 按钮：向右滑动到 Page 2
            MaterialButton(
              color: Theme.of(context).primaryColor,
              onPressed: () {
                Navigator.push(
                  context,
                  CustomPageRoute(
                    transitionDuration: Duration(seconds: 5),
                    reverseTransitionDuration: Duration(seconds: 5),
                    axisDirection: AxisDirection.right,
                    child: Page2(),
                  ),
                );
              },
              child: Text("Go to Page 4"),
            ),
          ],
        ),
      ),
    );
  }
}