Flutter路由管理插件routerino的使用

Routerino简介

Routerino 是一个为Flutter应用程序提供简洁路由管理的包。它提供了BuildContext的扩展方法来简化页面推送和弹出操作，无需冗长的声明式模式或额外的生成工具。Routerino支持类型安全的结果处理，并与Sentry集成以方便错误追踪。

核心理念

• NO 到冗长的声明式路由模式（如go_router）
• NO 到需要构建器的解决方案
• YES 到类型安全
• YES 到Sentry集成

动机

传统方式下，推送新路由需要大量样板代码，并且命名重复。而通过Routerino，你可以用更简洁的方式实现相同功能：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => LoginPage(),
    settings: RouteSettings(name: 'LoginPage'), // 冗余！
  ),
);

变为：

context.push(() => LoginPage());

使用方法

基本用法

以下是几种常见的路由操作示例：

• 推送新页面：context.push(() => MyPage());
• 立即推送无动画：context.pushImmediately(() => MyPage());
• 推送并移除所有其他页面：context.pushRoot(() => MyPage());
• 推送并替换当前页面：context.pushReplacement(() => MyPage());
• 推送底部弹窗：context.pushBottomSheet(() => MySheet());
• 弹出最近的页面：context.pop();
• 弹出直到指定页面：context.popUntil(LoginPage);
• 弹出到根页面：context.popUntilRoot();
• 移除特定路由：context.removeRoute(MyPage);
• 推送并等待结果（类型安全）：final result = await context.pushWithResult<int, PickNumberPage>(() => PickNumberPage());

设置初始路由

建议在应用中添加RouterinoHome作为主页，避免未命名的初始路由问题：

MaterialApp(
  title: 'Flutter Example',
  home: RouterinoHome(
    builder: () => MyHomePage(),
  ),
);

全局上下文访问

当没有BuildContext时，可以通过全局导航键来推送路由：

MaterialApp(
  navigatorKey: Routerino.navigatorKey,
  home: RouterinoHome(
    builder: () => MyHomePage(),
  ),
);

// 在任何地方调用
Routerino.context.push(() => MyPage());

自定义过渡效果

可以为整个应用或单个路由设置不同的过渡效果：

Routerino.transition = RouterinoTransition.fade; // 全局设置
context.push(() => LoginPage(), transition: RouterinoTransition.noTransition); // 单个路由设置

类型安全的结果返回

对于需要返回结果的页面，可以通过继承PopsWithResult<T>类来确保类型安全：

class PickNumberPage extends StatelessWidget with PopsWithResult<int> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => popWithResult(context, 123),
          child: Text('Pick Number'),
        ),
      ),
    );
  }
}

Sentry集成

为了使每个路由都能在Sentry中显示其名称，可以在MaterialApp中添加观察者：

MaterialApp(
  navigatorObservers: [SentryNavigatorObserver()],
  home: const InitPage(),
);

示例项目

以下是一个完整的示例程序，演示了如何使用Routerino进行基本的路由管理：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example',
      navigatorKey: Routerino.navigatorKey,
      navigatorObservers: [RouterinoObserver()],
      home: RouterinoHome(builder: () => HomePage()),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => context.push(() => LoginPage()),
              child: Text('Go to Login'),
            ),
            ElevatedButton(
              onPressed: () async {
                final result = await context.pushWithResult<int, PickNumberPage>(() => PickNumberPage());
                print('Selected number: $result');
              },
              child: Text('Pick a Number'),
            ),
          ],
        ),
      ),
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('This is the login page.'),
            ElevatedButton(
              onPressed: () => context.popUntil(HomePage),
              child: Text('Back to Home'),
            ),
          ],
        ),
      ),
    );
  }
}

class PickNumberPage extends StatelessWidget with PopsWithResult<int> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pick a Number')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => popWithResult(context, 1),
              child: Text('Pick 1'),
            ),
            ElevatedButton(
              onPressed: () => popWithResult(context, 2),
              child: Text('Pick 2'),
            ),
          ],
        ),
      ),
    );
  }
}

此示例展示了如何使用Routerino简化页面间的导航以及如何处理带有结果的页面跳转。希望这些信息能帮助你更好地理解和使用这个强大的路由管理工具！