Flutter提示对话框插件tip_dialog的使用

tip_dialog 是一个用于Flutter应用程序的简单且功能强大的提示对话框插件。本文将详细介绍如何在Flutter应用中使用该插件，并提供完整的示例代码。

1. 依赖它

首先，在您的 pubspec.yaml 文件中添加 tip_dialog 插件的依赖：

dependencies:
  tip_dialog: ^4.0.0

确保使用3.0.0或更高版本，因为早期版本存在严重的性能问题。

2. 安装它

您可以通过命令行安装包：

$ flutter packages get

3. 导入它

在Dart代码中导入插件：

import 'package:tip_dialog/tip_dialog.dart';

4. 使用

可用属性

以下是一些可用的属性：

• child: 需要显示的小部件。
• duration: 自动消失时间，默认为3秒。
• maskAlpha: 遮罩层透明度，默认为0.3。
• outsideTouchable: 是否允许点击遮罩层关闭，默认为false。
• onOutsideTouch: 点击遮罩层时的回调函数。

全局使用

以下是全局使用 TipDialogContainer 的示例：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TipDialog Demo',
      theme: ThemeData(),
      home: Stack(
        children: <Widget>[
          MyHomePage(title: 'TipDialog Demo Home Page'),
          TipDialogContainer(
            duration: const Duration(seconds: 2),
            outsideTouchable: true,
            onOutsideTouch: (Widget tipDialog) {
              if (tipDialog is TipDialog && tipDialog.type == TipDialogType.LOADING) {
                TipDialogHelper.dismiss();
              }
            },
          ),
        ],
      ),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Widget _buildItem(String name, VoidCallback callback) {
    return GestureDetector(
      onTap: callback,
      child: ListTile(
        title: Text(name),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        elevation: 0.5,
      ),
      body: ListView(children: <Widget>[
        _buildItem("Loading Type Tip Dialog", () async {
          TipDialogHelper.loading("Loading");
          await Future.delayed(Duration(seconds: 5));
          TipDialogHelper.dismiss();
        }),
        Divider(),
        _buildItem("Success Type Tip Dialog", () async {
          TipDialogHelper.success("Loaded Successfully");
        }),
        Divider(),
        _buildItem("Fail Type Tip Dialog", () async {
          TipDialogHelper.fail("Load Failed");
        }),
        Divider(),
        _buildItem("Info Type Tip Dialog", () async {
          TipDialogHelper.info("Do Not Repeat");
        }),
        Divider(),
        _buildItem("Only Icon Tip Dialog", () async {
          TipDialogHelper.show(TipDialog(
            type: TipDialogType.SUCCESS,
          ));
        }),
        Divider(),
        _buildItem("Only text Tip Dialog", () async {
          TipDialogHelper.show(TipDialog(
            type: TipDialogType.NOTHING,
            tip: "Do Not Repeat",
          ));
        }),
        Divider(),
        _buildItem("Custom Icon Tip Dialog", () async {
          TipDialogHelper.show(TipDialog.customIcon(
            icon: Icon(
              Icons.file_download,
              color: Colors.white,
              size: 30.0,
              textDirection: TextDirection.ltr,
            ),
            tip: "Download",
          ));
        }),
        Divider(),
        _buildItem("Custom Body Tip Dialog", () async {
          TipDialogHelper.show(TipDialog.builder(
            bodyBuilder: (context) {
              return Container(
                width: 120.0,
                height: 90.0,
                alignment: Alignment.center,
                child: Text(
                  "Custom",
                  style: TextStyle(color: Colors.white),
                  textDirection: TextDirection.ltr,
                ),
              );
            },
            color: Colors.blue.withAlpha(150),
          ));
        }),
        Divider(),
      ]),
    );
  }
}

5. 默认对话框类型

默认支持以下类型的对话框：

enum TipDialogType { NOTHING, LOADING, SUCCESS, FAIL, INFO }

• NOTHING: 无图标。
• LOADING: 加载图标。
• SUCCESS: 成功图标。
• FAIL: 失败图标。
• INFO: 信息图标。

6. TipDialogHelper 方法

以下是一些常用的方法：

void show(Widget tipDialog, {bool isAutoDismiss: true});
void dismiss();
void info(String tip);
void fail(String errMsg);
void success(String success);
void loading(String loadingTip);

7. 变更日志

详细的变更日志可以在插件的GitHub仓库中找到。

通过以上步骤和示例代码，您可以轻松地在Flutter应用中集成和使用 tip_dialog 插件来展示各种类型的提示对话框。希望这些信息对您有所帮助！