Flutter富文本弹窗插件rich_alert的使用

rich_alert

rich_alert 是一个用于 Flutter 应用程序的富文本弹窗包。它可以帮助你在 Flutter 应用中渲染一个非传统的弹窗对话框 😃。

支持

此插件支持在 Android 和 iOS 构建中使用。

添加到你的 Flutter 项目

在 pubspec.yaml 文件中添加 rich_alert 作为依赖项：

dependencies:
  rich_alert: ^0.1.32

然后运行以下命令以更新依赖项：

flutter pub get

使用插件

在 Dart 文件中导入库：

import 'package:rich_alert/rich_alert.dart';

示例

以下是一个简单的示例，展示如何使用 rich_alert 插件创建一个带有标题、子标题和警告类型的弹窗：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return RichAlertDialog( // 使用自定义弹窗
      alertTitle: richTitle("警告标题"), // 设置弹窗标题
      alertSubtitle: richSubtitle("子标题"), // 设置弹窗子标题
      alertType: RichAlertType.WARNING, // 设置弹窗类型为警告
    );
  }
);

完整的示例代码如下：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 富文本弹窗示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Rich Alert Dialog'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '点击按钮测试富文本弹窗',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          /// 使用 rich_alert 插件创建弹窗
          showDialog(
              context: context,
              builder: (BuildContext context) {
                return RichAlertDialog(
                  alertTitle: richTitle("警告标题"), // 设置弹窗标题
                  alertSubtitle: richSubtitle("这是一个子标题"), // 设置弹窗子标题
                  alertType: RichAlertType.WARNING, // 设置弹窗类型为警告
                  actions: <Widget>[ // 添加操作按钮
                    TextButton(
                      onPressed: () {
                        Navigator.pop(context); // 关闭弹窗
                      },
                      child: Text("确定"),
                    ),
                  ],
                );
              });
        },
      ), // 这个逗号使自动格式化更美观
    );
  }
}