Flutter路由管理插件awesome_route的使用

Flutter路由管理插件awesome_route的使用

AwesomeRoute包是一个多功能且易于使用的Flutter导航解决方案，提供了多种页面过渡动画选项。它简化了在Flutter应用中实现动画路由的过程，使用户体验更加动态和吸引人。本文档旨在指导开发者如何将AwesomeRoute包集成到他们的应用中，并详细介绍其功能及如何有效利用其功能。

特性

AwesomeRoute提供了几个关键功能来增强您的应用导航：

  • 多种动画类型用于页面过渡
  • 可自定义的过渡持续时间、背景颜色等
  • 能够在保留或清除导航历史的情况下进行导航
  • 支持在导航前传递函数以执行额外逻辑

安装

要在项目中使用AwesomeRoute包，请将其添加到Flutter项目的pubspec.yaml文件的依赖项下：

dependencies:
  flutter:
    sdk: flutter
  awesome_route: ^最新版本

将^最新版本替换为最新的AwesomeRoute包版本。

导入

安装完成后，在希望使用它们的Flutter文件中导入所需的AwesomeRoute组件：

import 'package:awesome_route/awesome_route.dart';
import 'package:awesome_route/animate_awesome_route.dart';
import 'package:flutter/material.dart';

基本导航

AwesomeRoute提供了不同的方法来在页面之间导航，支持可定制的动画和导航堆栈处理选项。

推送页面

要导航到新页面并保持之前的导航状态不变：

AwesomeRoute.push(
  context: context,
  page: NewPageWidget(), // 目的地小部件
  child: YourCurrentWidget(), // 您正在从中导航的小部件
  animationType: AnimateAwesomeRoute.fade, // 选择动画
  duration: Duration(seconds: 1), // 动画持续时间
  borderRadius: 10.0, // 可选UI自定义
  backgroundColor: Colors.black26, // 可选UI自定义
);

动态路由

轻松映射路由名称到页面，并支持动态参数传递。通常在应用初始化期间定义路由。以下是设置路由的方法：

import 'package:awesome_route/awesome_route.dart';

class AwesomePagesRoute {
  static Future<void> routes() async {
    AwesomeRoute(pages: {
      // 在此处定义路由及其对应的页面
      '/otp': (context, arguments) => AwesomeArguments(
            arguments: arguments ?? {},
            page: ConfirmOTP(),
          ),
      '/home': (context, arguments) => AwesomeArguments(
            page: HomeScreen(),
          ),
      // 根据需要添加更多路由
    });
  }
}

注意，此类和方法可以命名为您想要的任何名称。声明类和方法后，在Flutter应用的主方法中初始化它：

void main() async {
  // 初始化所有路由
  await AwesomePagesRoute.routes();
  runApp(MyApp());
}

在应用中使用路由

使用AwesomeRoute.go方法导航到路由：

// 使用参数
ElevatedButton(
  onPressed: () {
    AwesomeRoute.go(
      context,
      '/otp',
      arguments: {
        'name': 'John Doe',
        'email': 'john@example.com'
      },
      animations: AnimateAwesomeRoute.opacity,
      duration: Duration(seconds: 1),
    );
  },
  child: Text('Verify OTP'),
)

// 不使用参数
ElevatedButton(
  onPressed: () {
    AwesomeRoute.go(
      context,
      '/otp',
    );
  },
  child: Text('Verify OTP'),
)

访问参数

class ConfirmOTP extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final arguments = AwesomeArguments.of(context)?.arguments;
    return Scaffold(
      appBar: AppBar(title: Text("OTP Confirmation")),
      body: Text('Name: ${arguments?['name']} Email: ${arguments?['email']}'),
    );
  }
}

自定义动画

指定导航时的动画类型，以保持应用的视觉连贯性。支持的动画可以在AnimateAwesomeRoute枚举中扩展。

清除导航历史

为了清除导航堆栈（例如登录或注销场景），在调用AwesomeRoute.go时将clearHist参数设置为true。

高级导航选项

AwesomeRoute还提供了具有更强大导航堆栈控制的方法，如：

pushAndClear(): 导航到新页面并从导航历史中移除刚离开的页面。
pushAndClearAll(): 导航到新页面而不保留任何先前的导航历史。
pushRoute(): 允许传递一个函数以在导航前执行额外逻辑。
每个方法都支持与`push()`相同的可定制参数，用于动画和UI自定义。

动画类型

AwesomeRoute支持多种过渡动画类型，如fade、slide、rotate、scale等。

贡献和支持

AwesomeRoute包欢迎贡献。开发者被鼓励通过报告问题、提出改进建议或提交拉取请求来参与贡献。对于支持或报告问题，您可以联系维护者邮箱：kennethusiobaifo@yahoo.com，访问AwesomeRoute网站：https://awesomeroute.usiobaifokenneth.com，或查看GitHub仓库：https://github.com/kkennymore/awesome_route。

同时检查我们的AnimateEase包：https://animateease.usiobaifokenneth.com，GitHub：https://github.com/kkennymore/animate_ease。

本文档旨在让您开始使用AwesomeRoute包。有关更多详细示例和高级用法，请参阅GitHub仓库或AwesomeRoute网站上的文档。

示例代码

import 'package:awesome_route/animate_awesome_route.dart';
import 'package:awesome_route/awesome_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() async {
  await AwesomePagesRoute.routes();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: AwesomeRoute.pop(context), // 调用routex pop返回
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 20),
              Container(
                child: const Text("Welcome"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final arguments = AwesomeArguments.of(context)?.arguments;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("AwesomeRoute ${arguments?['pageName']} Page"),
      ),
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          child: Center(
            child: Column(
              children: [
                const SizedBox(height: 40),
                Text("Hello ${arguments?['name']}"),
                const SizedBox(height: 20),
                AwesomeRoute.pushRoute(
                  context: context,
                  route: () => AwesomeRoute.go(
                    context,
                    "/home",
                    animations: AnimateAwesomeRoute.scaleAndRotate,
                  ),
                  child: const Text("Go Back Home"),
                ),
                const SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// 声明页面类
class AwesomePagesRoute {
  static Future<void> routes() async {
    AwesomeRoute(pages: {
      // 关于页面
      "/about": (context, arguments) => AwesomeArguments(
            arguments: arguments ?? {},
            page: const About(),
          ),

      // 主页
      "/home": (context, arguments) {
        return const AwesomeArguments(
          page: HomePage(),
        );
      },
    });
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
         title: const Text("AwesomeRoute Navigation Demo"),
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 20),
              const SizedBox(height: 20),
              AwesomeRoute.pushRoute(
                context: context,
                route: () => AwesomeRoute.go(context, 
                "/about",
                animations: AnimateAwesomeRoute.rotateY,
                arguments: {"name": "Jon Doe", "pageName":"About"},
                ),
                child: const Text("About Page"),
              ),
              const SizedBox(height: 20),
              AwesomeRoute.push(
                context: context,
                page: const AwesomeRouteDetail(),
                child: const Text(
                  "Push me and still come back",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                animationType: AnimateAwesomeRoute.fade, // 可选
                duration: const Duration(seconds: 1), // 可选
                backgroundColor: Colors.black12, // 可选
                borderRadius: 10.0, // 可选
                padding: const EdgeInsets.symmetric(
                    vertical: 10.0, horizontal: 20.0), // 可选
              ),
              const SizedBox(height: 20.0),
              AwesomeRoute.pushAndClear(
                context: context,
                page: const AwesomeRouteDetail(),
                child: const Text(
                  "Push me and this page history will be removed",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                animationType:
                    AnimateAwesomeRoute.translateRightToLeft, // 可选
                duration: const Duration(seconds: 1), // 可选
                backgroundColor:
                    const Color.fromARGB(255, 23, 55, 25), // 可选
                borderRadius: 10.0, // 可选
                padding: const EdgeInsets.symmetric(
                    vertical: 10.0, horizontal: 20.0), // 可选
              ),
              const SizedBox(height: 20.0),
              AwesomeRoute.pushAndClearAll(
                context: context,
                page: const AwesomeRouteDetail(),
                child: const Text(
                  "Push me and all page history will be removed",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                animationType:
                    AnimateAwesomeRoute.opacityAndSlideFromDown, // 可选
                duration: const Duration(seconds: 1), // 可选
                backgroundColor:
                    const Color.fromARGB(66, 65, 27, 27), // 可选
                borderRadius: 10.0, // 可选
                padding: const EdgeInsets.symmetric(
                    vertical: 10.0, horizontal: 20.0), // 可选
              ),

              /// 查看文档以实现其余部分
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter路由管理插件awesome_route的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter路由管理插件awesome_route的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


awesome_route 是一个用于 Flutter 应用的路由管理插件，它提供了更灵活和强大的路由管理功能，帮助开发者更好地处理页面跳转和路由逻辑。以下是如何使用 awesome_route 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 awesome_route 依赖：

dependencies:
  flutter:
    sdk: flutter
  awesome_route: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 初始化 AwesomeRoute

在你的 main.dart 文件中，初始化 AwesomeRoute 并设置路由表：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Route Example',
      initialRoute: '/',
      onGenerateRoute: AwesomeRoute.generateRoute,
      navigatorKey: AwesomeRoute.navigatorKey,
    );
  }
}

3. 定义路由

在 AwesomeRoute 中定义你的路由表。你可以在 main.dart 或其他文件中定义路由：

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

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AwesomeRoute.pushNamed(context, '/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AwesomeRoute.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

void defineRoutes() {
  AwesomeRoute.defineRoutes({
    '/': (context) => HomePage(),
    '/details': (context) => DetailsPage(),
  });
}

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

4. 使用 AwesomeRoute 进行导航

你可以使用 AwesomeRoute 提供的方法来进行页面导航：

  • 跳转到新页面:

    AwesomeRoute.pushNamed(context, '/details');

  • 带参数跳转:

    AwesomeRoute.pushNamed(context, '/details', arguments: {'id': 123});

    在目标页面中获取参数：

    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;

  • 返回上一页:

    AwesomeRoute.pop(context);

5. 处理未知路由

你可以通过 onUnknownRoute 来处理未知路由：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Route Example',
      initialRoute: '/',
      onGenerateRoute: AwesomeRoute.generateRoute,
      navigatorKey: AwesomeRoute.navigatorKey,
      onUnknownRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) => UnknownPage(),
        );
      },
    );
  }
}

class UnknownPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Unknown Page'),
      ),
      body: Center(
        child: Text('404 - Page Not Found'),
      ),
    );
  }
}
回到顶部