Alert Dialog Box in Flutter App development
Alert Dialog Box in Flutter App development

Hi Guys, Welcome to ‘Proto Coders Point’ in this Post we will learn how to Create a  Alert Dialog in Flutter app development using RFlutter_Alert Library Package.

What is Alert Dialog box?

Alert Dialog Box is basically a Box pop up which display some kind of Message or any action.It is normally used to ask the app user whether he want to continue to next process or discontinue.

Introduction to RFlutter Alert

RFlutter Alert is super customizable and easy to use alert/popup dialog for flutter app development. You may create reusuable alert styles or add buttons.

DEMO GIF

Flutter Alert Dialog
Flutter Alert Dialog

 

Feature of RFlutter Alert

  • Can be implement 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

Use RFlutter Alert package as a library

Step1:

Add this to your package’s pubspec.yaml file:

dependencies:
  rflutter_alert: ^1.0.3

Step 2 :

Now in your main.dart Dart code, you can use this code to import RFlutter_alert packages:

import 'package:rflutter_alert/rflutter_alert.dart';

Now you are done with importing the RFlutter Alert Library package into your Flutter Application.

Implementation of Flutter Alert dialog box

There are many ways to show a alert dialog box, but in the post will we see 4 customized way to implement Flutter Alert dialog box pop up.

1. easiest way to create RFlutter Alert

The easiest way for creating RFlutter Alert.

This is a snippet code, Complete code for this project will be at the bottom.

Alert(
            context: context,
            title: "RFLUTTER ALERT",
            desc: "Proto Coders Point, Flutter alert dialog box is more awesome with RFlutter Alert.")
        .show();

The easiest way to display a alert dialog box in flutter is that just to display a title with some text in it and a description with some information of message.

easiest way to create RFlutter Alert
easiest way to create RFlutter Alert

This default alert dialog will come up a default cancel button with it to just close the dialog box.

2. Alert with a button in RFlutter Alert

Alert(
      context: context,
      type: AlertType.error,
      title: "RFLUTTER ALERT",
      desc: "Here we are creating a button inside alert box.",
      buttons: [
        DialogButton(
          child: Text(
            "Button",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          width: 120,
        )
      ],
    ).show();
Alert with a button in RFlutter Alert
Alert with a button in RFlutter Alert

Here we are creating a button inside the alert dialog box, the button can be given some action to be performed when onclicked/onPressed.

type: AlertType.error : this will show a cross image.

3. Alert dialog with 2 Button in RFlutter Alert

Alert(
      context: context,
      type: AlertType.warning,
      title: "RFLUTTER ALERT",
      desc: "Alert Dialog with 2 Buttons.",
      buttons: [
        DialogButton(
          child: Text(
            "OK",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          color: Color.fromRGBO(0, 179, 134, 1.0),
        ),
        DialogButton(
          child: Text(
            "Cancel",
            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 Dialog with 2 Buttons, Here i have created a dialog with 2 button in it. One button is to accept the alert and second button is to decline the alert message.

Alert dialog with 2 Button in RFlutter Alert
Alert dialog with 2 Button in RFlutter Alert

Then, i have also customized the button with gradient color feature.

3. Alert dialog with Login Content in RFlutter Alert

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();
Alert dialog with Login Content in RFlutter Alert
Alert dialog with Login Content in RFlutter Alert

Here i have 2 TextField with a Login Button, so that we can show a login required alert dialog box

Complete Flutter Alert Dialog source code

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>[
            RaisedButton(
              child: Text('Basic Alert'),
              onPressed: () => _onBasicAlertPressed(context),
              color: Colors.blue,
              textColor: Colors.white,
            ),
            RaisedButton(
              child: Text('Alert with Button'),
              onPressed: () => _onAlertButtonPressed(context),
              color: Colors.green,
              textColor: Colors.white,
            ),
            RaisedButton(
              child: Text('Alert with Buttons'),
              onPressed: () => _onAlertButtonsPressed(context),
              color: Colors.red,
              textColor: Colors.white,
            ),
            RaisedButton(
              child: Text('Alert with Custom Content'),
              onPressed: () => _onAlertWithCustomContentPressed(context),
              color: Colors.yellow,
              textColor: Colors.black,
            ),
          ],
        ),
      ),
    );
  }

// The easiest way for creating RFlutter Alert
  _onBasicAlertPressed(context) {
    Alert(
            context: context,
            title: "RFLUTTER ALERT",
            desc: "Flutter is more awesome with RFlutter Alert.")
        .show();
  }

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

// Alert with multiple and custom buttons
  _onAlertButtonsPressed(context) {
    Alert(
      context: context,
      type: AlertType.warning,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      buttons: [
        DialogButton(
          child: Text(
            "Button_1",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          color: Color.fromRGBO(0, 179, 134, 1.0),
        ),
        DialogButton(
          child: Text(
            "Button_2",
            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 custom content
  _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();
  }
}