Flutter 中可自定义且易于使用的警报/弹出对话框

RFlutter 警告

RFlutter Alert 是适用于 Flutter 的超可自定义且易于使用的警报/弹出对话框。您可以轻松创建可重用的警报样式或添加任意数量的按钮。

特点

• 单行基本警告
• 动态添加按钮（任意数量）
• 预定义的美丽警告样式（成功、错误、警告、信息）
• 可重用警告样式
• 超级可定制
  • 更改动画（fromTop、fromBottom、fromRight、fromLeft、grow、shrink）
  • 设置动画时长
  • 显示/隐藏关闭按钮
  • 设置点击覆盖层消失
  • 设置标题和描述样式
  • 更改对话框边框样式

入门

您必须将该库添加为项目的依赖项。

dependencies:
 rflutter_alert: ^1.0.2

如果您愿意，也可以直接引用 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();

带样式的警告

AlertStyle

使用 AlertStyle 类进行自定义。

    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,
      ),
    );

并将您的 AlertStyle 对象分配给 Alert 的 style 字段。

    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();

GitHub

https://github.com/RatelHub/rflutter_alert