Flutter弹窗提示插件rflutter_alert的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter弹窗提示插件rflutter_alert的使用

RFlutter Alert 是一个高度可定制且易于使用的 Flutter 弹窗/对话框插件。您可以创建可重用的弹窗样式，或轻松地添加任意数量的按钮。

版本信息

Version

功能特性

  • 单行基础弹窗
  • 动态添加按钮（可以添加任意数量）
  • 预定义的美丽弹窗样式（成功、错误、警告、信息）
  • 可重用的弹窗样式
  • 超级可定制化：
    • 更改动画（从顶部、底部、右侧、左侧、放大、缩小）和自定义动画
      • 设置动画持续时间
      • 显示/隐藏关闭按钮
      • 设置点击遮罩层是否关闭弹窗
      • 设置标题和描述样式
      • 更改对话框边框样式

入门指南

您必须将此库作为依赖项添加到项目中：

dependencies:
 rflutter_alert: ^2.0.7

或者直接引用 Git 仓库：

dependencies:
 rflutter_alert:
   git: git://github.com/RatelHub/rflutter_alert.git

然后运行 flutter packages get

示例项目

在 example 文件夹中有一个详细的示例项目。可以直接运行并体验。以下是来自示例项目的代码片段。

基础弹窗

Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();

带有按钮的弹窗

Alert(
  context: context,
  type: AlertType.error,
  title: "RFLUTTER ALERT",
  desc: "Flutter is more awesome with RFlutter Alert.",
  buttons: [
    DialogButton(
      child: Text(
        "COOL",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      onPressed: () => Navigator.pop(context),
      width: 120,
    )
  ],
).show();

带有多个按钮的弹窗

Alert(
  context: context,
  type: AlertType.warning,
  title: "RFLUTTER ALERT",
  desc: "Flutter is more awesome with RFlutter Alert.",
  buttons: [
    DialogButton(
      child: Text(
        "FLAT",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      onPressed: () => Navigator.pop(context),
      color: Color.fromRGBO(0, 179, 134, 1.0),
    ),
    DialogButton(
      child: Text(
        "GRADIENT",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      onPressed: () => Navigator.pop(context),
      gradient: LinearGradient(colors: [
        Color.fromRGBO(116, 116, 191, 1.0),
        Color.fromRGBO(52, 138, 199, 1.0)
      ]),
    )
  ],
).show();

带样式的弹窗

var alertStyle = AlertStyle(
  animationType: AnimationType.fromTop,
  isCloseButton: false,
  isOverlayTapDismiss: false,
  descStyle: TextStyle(fontWeight: FontWeight.bold),
  descTextAlign: TextAlign.start,
  animationDuration: Duration(milliseconds: 400),
  alertBorder: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(0.0),
    side: BorderSide(
      color: Colors.grey,
    ),
  ),
  titleStyle: TextStyle(
    color: Colors.red,
  ),
  alertAlignment: Alignment.topCenter,
);

Alert(
  context: context,
  style: alertStyle,
  type: AlertType.info,
  title: "RFLUTTER ALERT",
  desc: "Flutter is more awesome with RFlutter Alert.",
  buttons: [
    DialogButton(
      child: Text(
        "COOL",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      onPressed: () => Navigator.pop(context),
      color: Color.fromRGBO(0, 179, 134, 1.0),
      radius: BorderRadius.circular(0.0),
    ),
  ],
).show();

带自定义图片的弹窗

Alert(
  context: context,
  title: "RFLUTTER ALERT",
  desc: "Flutter is better with RFlutter Alert.",
  image: Image.asset("assets/success.png"),
).show();

带自定义内容的弹窗

Alert(
    context: context,
    title: "LOGIN",
    content: Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(
            icon: Icon(Icons.account_circle),
            labelText: 'Username',
          ),
        ),
        TextField(
          obscureText: true,
          decoration: InputDecoration(
            icon: Icon(Icons.lock),
            labelText: 'Password',
          ),
        ),
      ],
    ),
    buttons: [
      DialogButton(
        onPressed: () => Navigator.pop(context),
        child: Text(
          "LOGIN",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      )
    ]).show();

完整示例Demo

以下是一个完整的 Demo 应用程序，展示了如何使用 RFlutter Alert 插件的不同功能。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:rflutter_alert/rflutter_alert.dart';

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

class RatelApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('RFlutter Alert by Ratel'),
        ),
        body: PopupDialog(),
      ),
    );
  }
}

class PopupDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text('Basic Alert'),
              onPressed: () => _onBasicAlertPressed(context),
            ),
            ElevatedButton(
              child: Text('Basic Waiting Alert'),
              onPressed: () => _onBasicWaitingAlertPressed(context),
            ),
            ElevatedButton(
              child: Text('Custom Animation Alert'),
              onPressed: () => _onCustomAnimationAlertPressed(context),
            ),
            ElevatedButton(
              child: Text('Alert with Button'),
              onPressed: () => _onAlertButtonPressed(context),
            ),
            ElevatedButton(
              child: Text('Alert with Buttons'),
              onPressed: () => _onAlertButtonsPressed(context),
            ),
            ElevatedButton(
              child: Text('Alert with Style'),
              onPressed: () => _onAlertWithStylePressed(context),
            ),
            ElevatedButton(
              child: Text('Alert with Custom Image'),
              onPressed: () => _onAlertWithCustomImagePressed(context),
            ),
            ElevatedButton(
              child: Text('Alert with Custom Content'),
              onPressed: () => _onAlertWithCustomContentPressed(context),
            ),
            ElevatedButton(
              child: Text('Alert with/without Root navigator'),
              onPressed: () => _onAlertWithRootNavigator(context),
            ),
          ],
        ),
      ),
    );
  }

// 最简单的创建 RFlutter Alert 的方式
  _onBasicAlertPressed(context) {
    Alert(
      context: context,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
    ).show();
  }

  // 代码将在弹窗关闭后继续执行
  _onBasicWaitingAlertPressed(context) async {
    await Alert(
      context: context,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
    ).show();

    // 代码将在弹窗关闭后继续执行
    debugPrint("Alert closed now.");
  }

// 自定义动画弹窗
  _onCustomAnimationAlertPressed(context) {
    Alert(
      context: context,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      alertAnimation: fadeAlertAnimation,
    ).show();
  }

  Widget fadeAlertAnimation(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return Align(
      child: FadeTransition(
        opacity: animation,
        child: child,
      ),
    );
  }

// 带单个按钮的弹窗。
  _onAlertButtonPressed(context) {
    Alert(
      context: context,
      type: AlertType.error,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      buttons: [
        DialogButton(
          child: Text(
            "COOL",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => _onCustomAnimationAlertPressed(context),
          width: 120,
        )
      ],
    ).show();
  }

// 带多个和自定义按钮的弹窗
  _onAlertButtonsPressed(context) {
    Alert(
      context: context,
      type: AlertType.warning,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      buttons: [
        DialogButton(
          child: Text(
            "FLAT",
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          onPressed: () => Navigator.pop(context),
          color: Color.fromRGBO(0, 179, 134, 1.0),
        ),
        DialogButton(
          child: Text(
            "GRADIENT",
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          onPressed: () => Navigator.pop(context),
          gradient: LinearGradient(colors: [
            Color.fromRGBO(116, 116, 191, 1.0),
            Color.fromRGBO(52, 138, 199, 1.0),
          ]),
        )
      ],
    ).show();
  }

// 高级弹窗用法
  _onAlertWithStylePressed(context) {
    // 可重用的弹窗样式
    var alertStyle = AlertStyle(
        animationType: AnimationType.fromTop,
        isCloseButton: false,
        isOverlayTapDismiss: false,
        descStyle: TextStyle(fontWeight: FontWeight.bold),
        animationDuration: Duration(milliseconds: 400),
        alertBorder: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
          side: BorderSide(
            color: Colors.grey,
          ),
        ),
        titleStyle: TextStyle(
          color: Colors.red,
        ),
        constraints: BoxConstraints.expand(width: 300),
        overlayColor: Color(0x55000000),
        alertElevation: 0,
        alertAlignment: Alignment.topCenter);

    // 使用自定义弹窗样式的对话框
    Alert(
      context: context,
      style: alertStyle,
      type: AlertType.info,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      buttons: [
        DialogButton(
          child: Text(
            "COOL",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          color: Color.fromRGBO(0, 179, 134, 1.0),
          radius: BorderRadius.circular(0.0),
        ),
      ],
    ).show();
  }

// 自定义图片的弹窗
  _onAlertWithCustomImagePressed(context) {
    Alert(
      context: context,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      image: Image.asset("assets/success.png"),
    ).show();
  }

// 自定义内容的弹窗
  _onAlertWithCustomContentPressed(context) {
    Alert(
        context: context,
        title: "LOGIN",
        content: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                icon: Icon(Icons.account_circle),
                labelText: 'Username',
              ),
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                icon: Icon(Icons.lock),
                labelText: 'Password',
              ),
            ),
          ],
        ),
        buttons: [
          DialogButton(
            onPressed: () => Navigator.pop(context),
            child: Text(
              "LOGIN",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          )
        ]).show();
  }

// 不使用根导航器的弹窗
  _onAlertWithRootNavigator(BuildContext context) {
    Navigator.of(context).push(
      PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) =>
            CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(icon: Icon(Icons.account_circle)),
              BottomNavigationBarItem(icon: Icon(Icons.search))
            ],
          ),
          tabBuilder: (BuildContext context, int index) {
            return CupertinoTabView(
              builder: (BuildContext context) {
                return CupertinoPageScaffold(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "We are inside a CupertinoTabView, which has it's own navigator.",
                        style: TextStyle(inherit: false, color: Colors.black),
                        textAlign: TextAlign.center,
                      ),
                      ElevatedButton(
                        child: Text('Alert without Root navigator'),
                        onPressed: () => Alert(
                            context: context,
                            title:
                                "pop() use root navigator ?\n\n* False will pop Alert and stay in CupertinoTabView\n* True will pop Alert and CupertinoTabView",
                            useRootNavigator: false,
                            buttons: [
                              DialogButton(
                                onPressed: () => Navigator.of(context).pop(),
                                child: Text(
                                  "false",
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 20),
                                ),
                              ),
                              DialogButton(
                                onPressed: () =>
                                    Navigator.of(context, rootNavigator: true)
                                        .pop(),
                                child: Text(
                                  "true",
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 20),
                                ),
                              )
                            ]).show(),
                      ),
                      ElevatedButton(
                        child: Text('Alert with Root navigator'),
                        onPressed: () => Alert(
                            context: context,
                            title:
                                "pop() use root navigator ?\n\n* False will pop CupertinoTabView and raise error in the background !\n* True will pop Alert",
                            useRootNavigator: true,
                            buttons: [
                              DialogButton(
                                onPressed: () => Navigator.of(context).pop(),
                                child: Text(
                                  "false",
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 20),
                                ),
                              ),
                              DialogButton(
                                onPressed: () =>
                                    Navigator.of(context, rootNavigator: true)
                                        .pop(),
                                child: Text(
                                  "true",
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 20),
                                ),
                              )
                            ]).show(),
                      ),
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

希望这个详细的指南能帮助你更好地理解和使用 RFlutter Alert 插件！如果你有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter弹窗提示插件rflutter_alert的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter弹窗提示插件rflutter_alert的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 rflutter_alert 插件在 Flutter 中创建弹窗提示的示例代码。rflutter_alert 是一个功能强大的 Flutter 插件，用于创建各种类型的弹窗提示，包括警告框、确认框和信息框等。

首先，确保在你的 pubspec.yaml 文件中添加 rflutter_alert 依赖：

dependencies:
  flutter:
    sdk: flutter
  rflutter_alert: ^2.0.4  # 请检查最新版本号并更新

然后运行 flutter pub get 来获取依赖。

接下来是一个简单的示例代码，展示如何使用 rflutter_alert 创建一个基本的警告弹窗：

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

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

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

class MyHomePage extends StatelessWidget {
  final Alert alert = Alert(
    context: null, // we will inject context later
    type: AlertType.warning,
    title: "Warning",
    desc: "Are you sure you want to proceed?",
    buttons: [
      DialogButton(
        child: Text(
          "Cancel",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        onPressed: () => Navigator.pop(context, false),
        color: Colors.red,
      ),
      DialogButton(
        child: Text(
          "OK",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        onPressed: () => Navigator.pop(context, true),
        color: Colors.green,
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    alert.context = context; // Inject context here

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            bool? result = await alert.show();
            if (result == true) {
              // User clicked "OK"
              print("User clicked OK");
            } else if (result == false) {
              // User clicked "Cancel" or closed the dialog
              print("User clicked Cancel or closed the dialog");
            }
          },
          child: Text('Show Alert'),
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：在 pubspec.yaml 中添加 rflutter_alert 依赖。
  2. 创建 Alert 实例：在 MyHomePage 类中，我们创建了一个 Alert 实例，并配置了它的类型、标题、描述和按钮。
  3. 注入 Context：在 build 方法中，我们将 context 注入到 Alert 实例中。注意，这里我们在 build 方法中进行注入，因为只有在 build 方法中 context 才是有效的。
  4. 显示弹窗：在按钮的 onPressed 回调中，我们使用 await alert.show() 来显示弹窗，并等待用户点击某个按钮。根据用户的选择（点击 “OK” 或 “Cancel”），我们可以执行相应的逻辑。

这个示例展示了如何使用 rflutter_alert 创建一个简单的警告弹窗。你可以根据需要调整弹窗的类型、标题、描述和按钮配置，以满足你的应用需求。

回到顶部