Flutter导航管理插件navigatiox的使用

Flutter导航管理插件Navigatiox的使用

特性

• 广泛的动画选择：您可以根据应用的设计选择合适的动画。
• 可定制：可以控制动画的持续时间、方向和起始位置。
• 轻量级：设计为易于集成到现有的Flutter应用中。

安装

要使用此包，请将其添加到您的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  navigatiox: ^0.0.4 # 请替换为您需要的最新版本

然后运行以下命令来安装该包：

flutter pub get

使用

要使用该包，请在Dart代码中导入它：

import 'package:navigatiox/navigatiox.dart';

以下是如何使用旋转动画进行页面导航的示例：

ElevatedButton(
  onPressed: () {
    CustomNavigator.push(
      RotateAnimation(
        context: context,
        nextPage: const SecondScreen(),
        duration: const Duration(milliseconds: 500),
        numberOfRotations: 1,
        clockwise: true,
      ),
    );
  },
  child: const Text('Rotate Transition'),
)

示例代码

以下是完整的示例代码，展示了如何使用不同的动画进行页面导航。

import 'package:flutter/material.dart';
import 'package:navigatiox/custom_navigator.dart';
import 'package:navigatiox/utils/animation_types.dart';
import 'package:navigatiox/utils/corner_types.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '自定义导航过渡',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 涡旋动画
            ElevatedButton(
              onPressed: () {
                CustomNavigator.push(
                  SwirlAnimation(
                    context: context,
                    nextPage: const SecondScreen(),
                    duration: const Duration(milliseconds: 500),
                    numberOfHalfRotations: 2,
                    forward: true,
                    axis: Axis.horizontal,
                  ),
                );
              },
              child: const Text('涡旋过渡'),
            ),
            // 滑动动画
            ElevatedButton(
              onPressed: () {
                CustomNavigator.push(
                  SlideAnimation(
                    context: context,
                    nextPage: const SecondScreen(),
                    duration: const Duration(milliseconds: 500),
                    direction: AxisDirection.left,
                  ),
                );
              },
              child: const Text('滑动过渡'),
            ),
            // 淡入淡出和缩放动画
            ElevatedButton(
              onPressed: () {
                CustomNavigator.push(
                  FadeScaleAnimation(
                    context: context,
                    nextPage: const SecondScreen(),
                    duration: const Duration(milliseconds: 500),
                    initialScale: 0.0,
                  ),
                );
              },
              child: const Text('淡入淡出与缩放过渡'),
            ),
            // 角落动画
            ElevatedButton(
              onPressed: () {
                CustomNavigator.push(
                  CornerAnimation(
                    context: context,
                    nextPage: const SecondScreen(),
                    duration: const Duration(milliseconds: 500),
                    corner: Corner.bottomLeft,
                  ),
                );
              },
              child: const Text('角落过渡'),
            ),
            // 旋转动画
            ElevatedButton(
              onPressed: () {
                CustomNavigator.push(
                  RotateAnimation(
                    context: context,
                    nextPage: const SecondScreen(),
                    duration: const Duration(milliseconds: 500),
                    numberOfRotations: 1,
                    clockwise: true,
                  ),
                );
              },
              child: const Text('旋转过渡'),
            ),
            // 翻转动画
            ElevatedButton(
              onPressed: () {
                CustomNavigator.push(
                  FlipAnimation(
                    context: context,
                    nextPage: const SecondScreen(),
                    duration: const Duration(milliseconds: 500),
                    axis: AxisDirection.left,
                    fadeIn: true,
                    forward: false,
                  ),
                );
              },
              child: const Text('翻转过渡'),
            ),
            // 飞入动画
            ElevatedButton(
              onPressed: () {
                CustomNavigator.push(
                  FlyInAnimation(
                    context: context,
                    nextPage: const SecondScreen(),
                    duration: const Duration(milliseconds: 500),
                    axis: AxisDirection.left,
                    inclination: AxisDirection.up,
                    fadeIn: true,
                    forward: false,
                  ),
                );
              },
              child: const Text('飞入过渡'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('第二屏')),
      body: Container(
        color: Colors.black,
        child: Center(
          child: ElevatedButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('返回'),
          ),
        ),
      ),
    );
  }
}