RFlutter Alert Popup Dialogs

flutter rflutter alert

rflutter alert is super customizable and easy-to-use alert/popup dialogs for flutter. you may create reusable alert styles or add buttons as much as you want with ease.

features

• single line basic alert
• adding buttons dynamically (as much as you want)
• predefined beautiful alert styles (success, error, warning, info)
• reusable alert styles
• super customizable
  • change animation (fromtop, frombottom, fromright, fromleft, grow, shrink)
  • set animation duration
  • show/hide close button
  • set overlay tap to dismiss
  • assign title and desc styles
  • change dialog border style

getting started

you must add the library as a dependency to your project.

dependencies:
 rflutter_alert: ^1.0.2

you can also reference the git repo directly if you want:

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

you should then run flutter packages get

example project

there is a detailed example project in the example folder. you can directly run and play on it. there are code snippets from example project below.

basic alert

alert(context: context, title: "rflutter", desc: "flutter is awesome.").show();

alert with button

    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 with buttons

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

alert with style

alertstyle

use the alertstyle class to customize.

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

and assing your alertstyle object to alert’s style field.

    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 with custom image

    alert(
      context: context,
      title: "rflutter alert",
      desc: "flutter is better with rflutter alert.",
      image: image.asset("assets/success.png"),
    ).show();

alert with custom content

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

121

download the full project for this post from the following button

this source is fully free for all time

download as zip