Flutter消息展示插件 ai_awesome_message 的使用

概述

ai_awesome_message 是一个功能强大的消息展示插件，类似于 Flutter 中的 Toast 或 Snackbar。它支持在 iOS、Android、macOS 和 Web 平台上显示自定义的消息提示。

安装步骤

1. 添加依赖

在项目的 pubspec.yaml 文件中添加 ai_awesome_message 依赖：

dependencies:
  ai_awesome_message: ^version

或者通过 Git 方式添加：

dependencies:
  ai_awesome_message:
    git:
      url: https://github.com/pdliuw/ai_awesome_message.git

2. 安装库

执行以下命令来安装依赖：

$ flutter pub get

3. 导入库

在 Dart 文件中导入 ai_awesome_message：

import 'package:ai_awesome_message/ai_awesome_message.dart';

使用方法

1. 作为 Widget 使用

你可以直接将 AwesomeHelper.createAwesome 作为一个 Widget 来使用：

Container(
  child: AwesomeHelper.createAwesome(title: "标题", message: "消息内容"),
),

2. 作为 Route 使用

你也可以通过 Navigator.push 方法将消息作为一个独立的页面弹出：

Navigator.push(
  context,
  AwesomeMessageRoute(
    awesomeMessage: AwesomeHelper.createAwesome(
      title: "标题", 
      message: "消息内容",
    ),
    theme: null, // 可选参数，可以传递当前主题
    settings: RouteSettings(name: "/messageRouteName"),
  ),
);

3. 作为 Route 使用并带有 Theme

如果你想让消息页面继承当前的主题样式，可以通过 Theme.of(context) 获取当前主题并传递给 AwesomeMessageRoute：

Navigator.push(
  context,
  AwesomeMessageRoute(
    awesomeMessage: AwesomeHelper.createAwesome(
      title: "标题", 
      message: "消息内容",
    ),
    theme: Theme.of(context), // 继承当前主题
    settings: RouteSettings(name: "/messageRouteName"),
  ),
);

4. 结合 Airoute 使用

为了更方便地管理路由，推荐结合 Airoute 插件一起使用：

Airoute.push(
  route: AwesomeMessageRoute(
    awesomeMessage: AwesomeHelper.createAwesome(
      title: "标题", 
      message: "消息内容",
    ),
    theme: null,
    settings: RouteSettings(name: "/messageRouteName"),
  ),
);

// 或者使用当前主题
Airoute.push(
  route: AwesomeMessageRoute(
    awesomeMessage: AwesomeHelper.createAwesome(
      title: "标题", 
      message: "消息内容",
    ),
    theme: Theme.of(context),
    settings: RouteSettings(name: "/messageRouteName"),
  ),
);

示例 Demo

下面是一个完整的示例，展示了如何在 Flutter 应用中集成 ai_awesome_message 插件，并结合 Airoute 实现消息提示。

main.dart

import 'package:airoute/airoute.dart';
import 'package:flutter/material.dart';
import 'package:ai_awesome_message/ai_awesome_message.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Airoute.createMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showMessage() {
    Airoute.push(
      route: AwesomeMessageRoute(
        awesomeMessage: AwesomeHelper.createAwesome(
          title: "成功",
          message: "操作成功！",
        ),
        theme: Theme.of(context),
        settings: RouteSettings(name: "/messageRouteName"),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton.icon(
              onPressed: _showMessage,
              icon: Icon(Icons.notifications),
              label: Text("显示消息"),
            ),
          ],
        ),
      ),
    );
  }
}

运行效果

• 点击按钮后会弹出一个消息提示框，类似于 Toast 或 Snackbar。
• 消息框会根据当前主题自动调整样式，确保与应用的整体风格一致。

总结

ai_awesome_message 是一个非常灵活且易于使用的 Flutter 插件，适用于多种平台的消息提示需求。结合 Airoute 插件，可以进一步简化路由管理和消息提示的实现。