Flutter页面路由动画插件page_route_animator的使用

Page Route Animator Package

Flutter page route transition package, with 62 different page transitions.

Examples

Example 1	Example 2	Example 3

Getting Started

在pubspec.yaml文件中添加以下依赖：

dependencies:
  page_route_transition: ^1.0.4

Usage

要使用此包，您需要通过以下命令导入它：

import 'package:page_route_animator/page_route_animator.dart';

Code Example

以下是使用page_route_animator插件的一个完整示例：

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

void main(List<String> args) => runApp(const MyApp());

/// This widget is the root of your app.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Page Route Animator Code Example',
      theme: ThemeData(primarySwatch: Colors.purple),
      home: const HomeScreen(),
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/second-screen':
            return PageRouteAnimator(
              child: const SecondScreen(),
              routeAnimation: RouteAnimation.topToBottom,
              settings: settings,
              curve: Curves.linear,
              duration: const Duration(milliseconds: 500),
              reverseDuration: const Duration(milliseconds: 500),
            );
          default:
            return null;
        }
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  '/second-screen',
                  arguments: 'I am going',
                );
              },
              child: getText('Top To Bottom - onGenerateRoute'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  PageRouteAnimator(
                    child: const SecondScreen(),
                    routeAnimation: RouteAnimation.bottomToTop,
                    settings: const RouteSettings(arguments: 'I am going'),
                    curve: Curves.slowMiddle,
                    duration: const Duration(milliseconds: 500),
                    reverseDuration: const Duration(milliseconds: 500),
                  ),
                );
              },
              child: getText('Bottom To Top'),
            ),
            // More buttons for other animations...
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String? argument = ModalRoute.of(context)?.settings.arguments as String?;
    return Scaffold(
      backgroundColor: Colors.yellow,
      appBar: AppBar(
        title: const Text('SecondScreen'),
      ),
      body: Center(
        child: Text(
          argument ?? 'No Data',
          style: const TextStyle(
            fontSize: 48.0,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

// Helper Widget
Widget getText(String text) {
  return Align(
    alignment: Alignment.centerLeft,
    child: Text(text),
  );
}

Types Of Transitions

• topToBottom
• bottomToTop
• leftToRight
• rightToLeft
• fade
• rotate
• scale
• size
• sizeFromTop
• sizeFromBottom
• fadeAndRotate
• fadeAndScale
• rotateAndScale
• fadeRotateAndScale
• topLeftToBottomRight
• topRightToBottomLeft
• bottomLeftToTopRight
• bottomRightToTopLeft
• … (and many more)

Curves

了解更多关于曲线的信息，请参阅官方文档：curves.

License

BSD 3-Clause

以上是page_route_animator插件的详细使用说明和一个完整的示例代码。希望这能帮助你更好地理解和使用这个插件。如果你有任何问题或需要进一步的帮助，请随时提问！