Flutter推送通知插件laams_push的使用

Flutter推送通知插件laams_push的使用

我们创建了一个基于Flutter上的Navigator 2.0的最简单易用的路由解决方案。laams_push的目标是使所有在Flutter中的导航功能变得易于使用。我们开发了一个声明式的基于URI的路由器来实现高级导航功能。laams_push的功能包括但不限于深度链接、基于用户认证状态的导航、自定义路由过渡动画等。

概览

特性

• 深度链接
• 基于用户认证状态的导航
• 自定义动画的导航过渡

开始使用

1. 在你的Flutter项目的pubspec.yaml文件中的dependencies部分添加laams_push依赖：

dependencies:
  laams_push: <latest>

然后复制并粘贴示例解决方案中的代码。我们在示例应用中使用了provider进行简单的状态管理，因此你需要将provider作为依赖项添加到项目中。

注意：laams_push本身没有任何第三方依赖。

使用方法

1. 在你的Widget树顶部添加LaamsPushApp.router而不是MaterialApp.router

LaamsPush.router只是对MaterialApp的一个封装，以使laams_push的导航设置完全无痛。此组件有五个必需的属性需要实例化。

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    final userBloc = context.watch<UserBloc>();
    return LaamsPushApp.router(
      isUserSignedIn: userBloc.isSignedIn,
      theme: ThemeData.light(),
      title: 'Laams Router Application',
      publicRoutes: const [SignInScreen.name, NotAllowedScreen.name],
      onGeneratePages: (LaamsRoute route) {
        switch (route.name) {
          case HomeScreen.name:
            return LaamsPage.fromRoute(route, const HomeScreen());
          case SignInScreen.name:
            return LaamsPage.fromRoute(route, const SignInScreen());
          case ProductsScreen.name:
            return LaamsPage.fromRoute(route, const ProductsScreen());
          case ProductDetail.name:
            final product = Product.fromJson(route.query!);
            return LaamsPage.fromRoute(route, ProductDetail(product));
          case NotAllowedScreen.name:
            return LaamsPage.fromRoute(route, NotAllowedScreen(route));
          default:
            return LaamsPage.fromRoute(route, NotFoundScreen(route));
        }
      },
    );
  }
}

• isUserSignedIn: 根据用户的登录状态显示不同的屏幕。你可以使用任何可用的状态管理解决方案来提供用户的登录状态。我们在示例项目中使用了provider，因为它易于设置。

• onGeneratePages: 将LaamsRoute映射到LaamsPage。你可以将其视为flutter中的MaterialApp内的onGenerateRoutes。根据route.name实例化你的屏幕。务必添加一个notfound路由作为默认值。

• publicRoutes: 默认情况下，所有路由都是受保护的，这意味着未登录的用户无法访问任何路由，除了公共路由。在这里列出所有你的公共路由名称。

2. 从任何部分的Widget树中使用这些方法

() => LaamsPush.push(context, '/settings');

() => LaamsPush.reset(context, '/home');

() => LaamsPush.replace(context, '/products');

() => LaamsPush.remove(context, '/settings');

() => LaamsPush.pop(context);

• LaamsPush.push: 在当前路由之上推入一个新的路由。
• LaamsPush.reset: 用新的路由重新初始化路由栈。
• LaamsPush.replace: 用新的路由替换当前路由，而不改变其余的路由栈。
• LaamsPush.remove: 如果路由在其后或在当前路由之前，则删除该路由。
• LaamsPush.pop: 弹出当前路由。

当调用上述方法时，你可以传递更多参数

例如：

LaamsPush.push(
  context,
  '/settings',
  animationDuration: 300,
  animationType: AnimationType.slideDown,
  query: <String, dynamic>{
    'productID': 123,
    'productName': 'T-Shirt',
    'imageURL': 'https://www.example.com/image.jpg'
  },
  fragment: 'second-section',
  arguments: 'productID',
  state: 'any state',
);

• context: LaamsPush使用BuildContext来找到祖先的Router委托，并调用其方法。
• name: 是LaamsRoute.name的值，在你调用上述方法之一之后被缓存并作为onGeneratePages的参数返回。你不需要知道它是如何工作的，只需要知道这是你想要显示的screen的路径或名称。
• animationDuration: 导航到新路由所需的时间（以毫秒为单位）。
• animationType: 用于从一个路由过渡到另一个路由的动画类型。例如，AnimationType.slideDown会将新路由推入堆栈，同时从上到下滑动。
• query: 这是我们推荐的数据传递解决方案。将数据作为Map<String, dynamic>传递，并在下一个屏幕上作为参数接收。查看我们的示例项目中的产品详情部分和产品列表页面。
• fragment: 这相当于Uri中的#fragment，你可以用它来导航到新屏幕的特定部分。
• arguments: 传递给RouteSettings，不安全，我们不建议使用它，因为Flutter不能缓存数据或小部件，如果你使用浏览器的箭头按钮，将会出现错误。
• state: 传递给LaamsRouteParser用于其他浏览历史缓存机制。你不必使用arguments或state。使用query和fragment，让laams_push处理其余部分。

高级用法

如果你选择不使用LaamsPushApp.router，可以使用以下类来自行设置一切：

1. LaamsPushState: 一个使用ChangeNotifier跟踪routes stack的类。
2. LaamsRouteParser：解析LaamsRoute以供OS配置。
3. LaamsRouteMapper：将LaamsRoute转换为Uri并反向转换。
4. LaamsRoute：你可以扩展它以添加更多功能，用于在不同小部件之间传递数据。它持有LaamsPage的配置。
5. LaamsPage：它扩展了Page<T>并持有路由的配置，这些配置在Router内的Navigator的路由栈中使用。
6. LaamsRouterDelegate：它将所有东西放在一起。你可以在MaterialApp.router或Router.delegate中使用它。

你不需要使用其中任何一个。如果你正在使用CupertinoApp或WidgetsApp，那么看看LaamsPushApp.router的实现方式，然后在你的应用中重新实现它，利用laams_push为你提供的所有功能。

最佳实践

1. 使用LaamsPushApp.router并让一切都为你自动工作。
2. 将你的路由名称声明为静态常量变量，放在你想要显示的小部件内部。例如，如果你有一个名为/home的小部件，可以这样命名它。

class HomePage extends StatelessWidget {
  // 路由名称:
  static const String name = '/home';
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Heme Page')),
    );
  }
}

这样，你可以在任何地方通过调用HomePage.name来使用你的路由名称。

// 当调用按钮的`onPressed`方法时:
onPressed: () => LaamsPush.push(context, HomePage.name);

// 或者在`onGeneratePages`中:
if (route.name == HomePage.name) {
  return LaamsPage.fromRoute(route, HomePage());
}