Flutter Quick Alert Dialog
alert dialog in flutter

Hi Guy’s Welcome to Proto Coders Point. In this flutter tutorial let’s learn how to show alert dialog in flutter the quickest way by using QuickAlert dialog package.

Flutter quickalert

In flutter, If you are willing to show a Alert dialog then quickalert package is the best library to use. It’s an animated alert dialog using which we can show dialop popup alert like success alert, error alert, warning alert, confirm alert dialog box with just few lines of code.

Getting Started with Installation of flutter package

1. Add Dependencies

In your flutter project, Open pubspec.yaml file & under dependencies section add quickalert flutter package.

Flutter QuickAlert: Easiest Way to ...
Flutter QuickAlert: Easiest Way to Show Alert Dialog in Flutter App
dependencies:
  flutter:
    sdk: flutter
  quickalert:   // add this line

Now hit pub get button or run flutter pub get command to download the flutter package as external library.

2. To use it Import quickalert.dart

import 'package:quickalert/quickalert.dart';

3. Syntax to Show Alert Dialog using quickalert

To display alert all you need to do is call QuickAlert.show() widget & define a alert type property to it.

Syntax

QuickAlert.show(
          context: context,
          type: QuickAlertType.success,
          text: 'Transaction Completed Successfully!',
          autoCloseDuration: const Duration(seconds: 2),
  );

When a button is clicked or any event or action occurs from user end, you need to just call above code.

Type of Flutter Alert Dialog

Success Alert

QuickAlert.show(
   context: context,
   type: QuickAlertType.success,
   text: 'Form Submitted Successfully!',
);

Confirm Alert

QuickAlert.show(
   context: context,
   type: QuickAlertType.confirm,
   text: 'Sure you want to logout?',
   confirmBtnText: 'Yes',
   cancelBtnText: 'No',
   confirmBtnColor: Colors.green,
  );

Error Alert

QuickAlert.show(
   context: context,
   type: QuickAlertType.error,
   title: 'Oops...',
   text: 'Error While Uploading the File, Please Retry ',
);

Warning Alert

QuickAlert.show(
   context: context,
   type: QuickAlertType.warning,
   title: 'Warning!',
   text: 'You are misusing the protocal',
  );

Info Alert

 QuickAlert.show(
   context: context,
   type: QuickAlertType.info,
   title: 'New Offer',
   text: 'Get Discount of 50% , On showing of Rs 5000',
  );

Loading Alert

QuickAlert.show(
   context: context,
   type: QuickAlertType.loading,
   title: 'Loading...',
   text: 'Please wait',
  );

Complete Source Code – QuickAlert Example

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // success Alert
    final successAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.success,
          text: 'Form Submitted Successfully!',
        );
      },
      title: 'Success',
      text: 'Transaction Completed Successfully!',
      leadingIcon: Icon(
        Icons.check_circle,
        color: Colors.green,
      ),
    );

    // error Alert
    final errorAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.error,
          title: 'Oops...',
          text: 'Error While Uploading the File, Please Retry ',
        );
      },
      title: 'Error',
      text: 'Sorry, something went wrong',
      leadingIcon: Icon(
        Icons.error,
        color: Colors.red,
      ),
    );
    // warning Alert
    final warningAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.warning,
          title: 'Warning!',
          text: 'You are misusing the protocal',
        );
      },
      title: 'Warning',
      text: 'You just broke protocol',
      leadingIcon: Icon(
        Icons.warning,
        color: Colors.red,
      ),
    );

    // info Alert
    final infoAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.info,
          title: 'New Offer',
          text: 'Get Discount of 50% , On showing of Rs 5000',
        );
      },
      title: 'Info',
      text: 'Learn More..!',
      leadingIcon: Icon(
        Icons.info,
        color: Colors.grey,
      ),
    );

    // confirm Alert
    final confirmAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.confirm,
          text: 'Sure you want to logout?',
          confirmBtnText: 'Yes',
          cancelBtnText: 'No',
          confirmBtnColor: Colors.green,
        );
      },
      title: 'Confirm',
      text: 'Do you want to logout',
      leadingIcon: Icon(
        Icons.logout,
        color: Colors.orange,
      ),
    );

    // loading
    final loadingAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.loading,
          title: 'Loading...',
          text: 'Please wait',
        );
      },
      title: 'Loading',
      text: 'Please Wait',
      leadingIcon: Icon(
        Icons.downloading,
        color: Colors.greenAccent,
      ),
    );

    return Scaffold(
      backgroundColor: Colors.black54,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            successAlert,
            SizedBox(
              height: 20,
            ),
            errorAlert,
            SizedBox(
              height: 20,
            ),
            warningAlert,
            SizedBox(
              height: 20,
            ),
            infoAlert,
            SizedBox(
              height: 20,
            ),
            confirmAlert,
            SizedBox(
              height: 20,
            ),
            loadingAlert,
            ElevatedButton(
                onPressed: () {
                  QuickAlert.show(
                      context: context,
                      type: QuickAlertType.success,
                      title: "The Action was Successful",
                      text: "Subscribe to Proto Coders Point",
                      textColor: Colors.red,
                      autoCloseDuration: Duration(seconds: 2));
                },
                child: Text("Show Success"))
          ],
        ),
      ),
    );
  }
}

// flutter custom card button
Card buildButton({
  required onTap,
  required title,
  required text,
  required leadingIcon,
}) {
  return Card(
    shape: const StadiumBorder(),
    margin: const EdgeInsets.symmetric(
      horizontal: 20,
    ),
    clipBehavior: Clip.antiAlias,
    elevation: 1,
    child: ListTile(
      onTap: onTap,
      leading: leadingIcon,
      title: Text(title ?? ""),
      subtitle: Text(text ?? ""),
      trailing: const Icon(
        Icons.keyboard_arrow_right_rounded,
      ),
    ),
  );
}

Recommended Articles

Flutter Alert Dialog using RFlutter_alert package

Android Custom dialog box

Android Alert Box with list of menu options

Flutter rating dialog – redirect user to app store