How to Create Custom Flutter Alert dialog box popup with Example Code

Design a custom Flutter Alert Box in your application with custom properties to create Full-width, Rounded Alert popup to notify users in the app.

Flutter Alert and Popup Widget
Flutter Alert and Popup Widget 

Flutter Alert Dialog Widget

Flutter Alert Widget is a simple component that is used to alert the user of the application. It means it allows the creation of a dialog box with an important message that helps the users to take appropriate action. It is a popup in the middle of the screen which places an overlay over the background. It does not fill the entire screen. It is normally used for events that require users to take any action before they can proceed further.

Now here I am going to discuss, How we build that alert system in the Flutter widget using of GetWidget UI Library.

Now you wondering what is GetWidget UI Library and Why this? Here a short introduction about GetWidget and why this?

GetWidget is an open-source UI Library for Flutter App Development. It has 1000+ pre-built Flutter Widgets that help you to build a fully customizable Flutter widget in your app. Since it has been recognized as one of the largest and best UI libraries by the Flutter dev community. For more details you can check out our GitHub repository:

Why use GetWidget for Flutter Alert Widget?

It allows you to speed up your Flutter app development by 20-30%. The GetWidget has almost all widget that allows you to enhance your Flutter UI design and speed up flutter development with fully customizable features.

Now here is I am going to talk about what is GetWidget Alert widget is and how we implement this on the Flutter app to build an awesome Flutter Alert widget for an app.

Flutter AlertDialog Box

Flutter AlertDialog Widget is an alert component that allows building a Flutter alert widget in your Flutter applications to allows users to take any action with the important message. It helps users to understand while taking an important action while using your application.

GFAlert should be wrapped inside the GFFloating Widget. The child of the GFFloating Widget takes GFAlert as its argument and the body takes any kind of widgets.

Flutter Alert Popup Widget
Flutter Alert Popup Widget

Flutter Alert with multiple buttons

GF Alert can have multiple buttons at the bottom bar of the alert widget.

Generally we categories the alert dialog into different types, Some of them I am listing below:

Basic Flutter AlertDailog

A basic alert dialog widget will come with the basic feature. It generally uses to notify the users regarding new information like any changes that happen in apps, Some new features added to your app, an important required situation or field that has to be acknowledged, or show a confirmation notification based on user action taken.

Flutter Confirmation AlertDialog

This Alert Dialog widget helps to notify users to confirm a particular choice or action before go further in your application. eg. Delete, Update, etc.

Flutter Select AlertDialog

It shows/displays the list/types of alert dialog to the users. If users will take any option then it will take immediate action based on user selection from the list of AlertDialog.  

Flutter TextField AlertDialog

This alert dialog helps to build an alert that will take the user's input.

GF Flutter Alert with Basic, Rounded, FullWidth type

GF Alert is of three types. The Basic alert is known as the default alert. By using the type property of Alert Widget we can have Rounded and Fullwidth Alert accordingly. In Rounded Alert, the border will have a radius around it whereas in Fullwidth Alert the alert will take the full width of the screen.

How to Get Started

Getting started will guide you on how to start building a beautiful flutter application with the GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^2.0.4

Keep playing with the pre-built UI components.

Flutter AlertDialog With multiple Button Example code

Flutter Alert With Multiple Buttons
Flutter Alert With Multiple Buttons
import 'package:getwidget/getwidget.dart';

return Scaffold(
      body: GFFloatingWidget(
          body: Text("body or any kind of widget here.."),
          child: GFAlert(
            title: 'Welcome !',
            content:
                'Get Flutter is one of the largest Flutter open-source UI library for mobile or web apps with  1000+ pre- built reusable widgets.',
            bottombar: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                GFButton(
                    onPressed: () {
                      setState(() {
                        showalert = false;
                      });
                    },
                    shape: GFButtonShape.pills,
                    child: Text('Skip', style: TextStyle(color: Colors.black))),
                SizedBox(width: 5),
                GFButton(
                  onPressed: () {
                    setState(() {
                      showalert = false;
                    });
                  },
                  shape: GFButtonShape.pills,
                  icon: Icon(
                    Icons.keyboard_arrow_right,
                    color: GFColors.WHITE,
                  ),
                  position: GFPosition.end,
                  text: 'Learn More',
                )
              ],
            ),
          )),
    );
 
 
Flutter AlertDialog With Multiple Button option Code example

Example of Flutter Alert types in GFAlert

import 'package:getwidget/getwidget.dart';
 
return Scaffold(
        body: GFFloatingWidget(
            body: Text('body or any kind of widget here..'),
            child: GFAlert(
              title: 'Welcome !',
              content:
                  'Get Flutter is one of the largest Flutter open-source UI library for mobile or web apps with  1000+ pre-built reusable widgets.',
              type: GFAlertType.rounded,
              bottombar: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  GFButton(
                      onPressed: () {
                        setState(() {
                          showalert = false;
                        });
                      },
                      shape: GFButtonShape.pills,
                      child:
                          Text('Skip', style: TextStyle(color: Colors.black))),
                  SizedBox(width: 5),
                  GFButton(
                    onPressed: () {
                      setState(() {
                        showalert = false;
                      });
                    },
                    shape: GFButtonShape.pills,
                    icon: Icon(
                      Icons.keyboard_arrow_right,
                      color: GFColors.WHITE,
                    ),
                    position: GFPosition.end,
                    text: 'Learn More',
                  )
                ],
              ),
            )));

Example of GF  Flutter Alert positioning

import 'package:getwidget/getwidget.dart';

body:GFFloatingWidget(
    horizontalPosition:40.0,
    verticalPosition:20.0,
    child:GFAlert(
    title: 'Welcome!',
  ),
 body:Text('body or any kind of widget here..')
)

If you are looking for more customization in the Flutter alert bar then check out Custom Properties of the GetWidget Alert widget.

Follow our docs to develop Flutter Alert Widget with our GetWidget app

GF Flutter Alert Dialog
GF Flutter alert Dialog widget is used to show some information and wait for the user’s action.GF alter comes with 100+ Custom properties like Basic, Full width, and round custom alert.

Custom Properties for Flutter GFAlert Widget

childchild of type [Widget] which is alternative to title. title will get priority over child
contentChildcontentchild of type [Widget] which is alternative to content. content will get priority over contentchild
titleTextStylechanges the style of the title not for the child
backgroundColorused to change the backgroundColor of the GFAlert
contentTextStylechanges the style of the content not for the contentChild
widthused to control the width of the Alert
alignmentused to align the title or content to desired position

How to create Custom Flutter AlertDialog Widget?

Flutter AlertDialog is used to show any kind of message on the screen and waits for the user action to continue using the respective screen. It usually appears on the center of the screen that makes an overlay and the other UI on the screen cannot be used. Hence there will be user action to dismiss the alert and continue the interaction with the app.

Flutter Basic Alert/Popup example code

Basic Alert is just a default AlertDialog box that can be placed on the desired location on the screen by the positioning property.

The below Example shows the Simple alert.

import 'package:getwidget/getwidget.dart';

 return Scaffold(
        body: GFFloatingWidget(
      horizontalPosition: 40.0,
      verticalPosition: 20.0,
      child: GFAlert(
        title: 'Welcome!',
      ),
      body: Container(
          margin: const EdgeInsets.only(top: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              GFButton(
                  text: 'Tap to View',
                  onPressed: () {
                    setState(() {
                      showblur = true;
                      alertWidget = GFAlert(
                        backgroundColor: Colors.white,
                        title: 'Welcome!',
                        content:
                            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
                        bottombar: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            GFButton(
                              onPressed: () {
                                setState(() {
                                  alertWidget = null;
                                  showblur = false;
                                });
                              },
                              shape: GFButtonShape.pills,
                              color: GFColors.LIGHT,
                              type: GFButtonType.outline2x,
                              child: const Text(
                                'Skip',
                                style: TextStyle(color: Colors.black),
                              ),
                            ),
                            const SizedBox(
                              width: 5,
                            ),
                            GFButton(
                              onPressed: () {
                                setState(() {
                                  alertWidget = null;
                                  showblur = false;
                                });
                              },
                              shape: GFButtonShape.pills,
                              icon: Icon(
                                Icons.keyboard_arrow_right,
                                color: GFColors.WHITE,
                              ),
                              position: GFPosition.end,
                              text: 'Learn More',
                            )
                          ],
                        ),
                      );
                    });
                  }),
            ],
          )),
    ));

Flutter Rounded Alert/Popup Example Code

Rounded Alert is like a default AlertDialog box that can be placed on the desired location on the screen wherein the border has a slight radius around it. The below example shows the rounded alert.

import 'package:getwidget/getwidget.dart';

    return Scaffold(
        body: GFFloatingWidget(
      horizontalPosition: 40.0,
      verticalPosition: 20.0,
      child: GFAlert(
        title: 'Welcome!',
      ),
      body: Container(
          margin: const EdgeInsets.only(top: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              GFButton(
                  text: 'Tap to View',
                  onPressed: () {
                    setState(() {
                      showblur = true;
                      alertWidget = GFAlert(
                        backgroundColor: Colors.white,
                        title: 'Welcome!',
                        content:
                            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
                        type: GFAlertType.rounded,
                        bottombar: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            GFButton(
                              onPressed: () {
                                setState(() {
                                  alertWidget = null;
                                  showblur = false;
                                });
                              },
                              shape: GFButtonShape.pills,
                              color: GFColors.LIGHT,
                              type: GFButtonType.outline2x,
                              child: const Text(
                                'Skip',
                                style: TextStyle(color: Colors.black),
                              ),
                            ),
                            const SizedBox(
                              width: 5,
                            ),
                            GFButton(
                              onPressed: () {
                                setState(() {
                                  alertWidget = null;
                                  showblur = false;
                                });
                              },
                              shape: GFButtonShape.pills,
                              icon: Icon(
                                Icons.keyboard_arrow_right,
                                color: GFColors.WHITE,
                              ),
                              position: GFPosition.end,
                              text: 'Learn More',
                            )
                          ],
                        ),
                      );
                    });
                  }),
            ],
          )),
    ));

Flutter FullWidth AlertDialog Popop example Code

FullWidth Alert is like a default AlertDialog box that can be placed on the desired location on the screen wherein the width of the alert will take the full width of the screen. The below example shows the fullwidth alert.

import 'package:getwidget/getwidget.dart';

    return Scaffold(
        body: GFFloatingWidget(
      horizontalPosition: 40.0,
      verticalPosition: 20.0,
      child: GFAlert(
        title: 'Welcome!',
      ),
      body: Container(
          margin: const EdgeInsets.only(top: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              GFButton(
                  text: 'Tap to View',
                  onPressed: () {
                    setState(() {
                      showblur = true;
                      alertWidget = GFAlert(
                        backgroundColor: Colors.white,
                        title: 'Welcome!',
                        content:
                            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
                        type: GFAlertType.fullWidth,
                        bottombar: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            GFButton(
                              onPressed: () {
                                setState(() {
                                  alertWidget = null;
                                  showblur = false;
                                });
                              },
                              shape: GFButtonShape.pills,
                              color: GFColors.LIGHT,
                              type: GFButtonType.outline2x,
                              child: const Text(
                                'Skip',
                                style: TextStyle(color: Colors.black),
                              ),
                            ),
                            const SizedBox(
                              width: 5,
                            ),
                            GFButton(
                              onPressed: () {
                                setState(() {
                                  alertWidget = null;
                                  showblur = false;
                                });
                              },
                              shape: GFButtonShape.pills,
                              icon: Icon(
                                Icons.keyboard_arrow_right,
                                color: GFColors.WHITE,
                              ),
                              position: GFPosition.end,
                              text: 'Learn More',
                            )
                          ],
                        ),
                      );
                    });
                  }),
            ],
          )),
    ));

What are the customizable properties used?

The customizable properties include the types of GF Alert, basically, here we can change the border radius and we can also control the size, color of the Alert component. Hence customizable properties are fully flexible. You can check out all custom properties components on GetWidget Alert Widget Properties.

Flutter Get Widget Docs

Flutter GetWidget Docs
Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.

Flutter Forum: if any Find any questions let's discuss them on Forum.

GetWidget- A Flutter Developer Forum
Flutter largest Open-Source Flutter UI Library with in-built widgets.

GitHub Repository: Please do appreciate our work through Github start

GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. - GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ W...

Conclusion:

Here we discuss, what Flutter Alert Widget is? And how we can use and implement it into our Flutter app through the GetWidget Alert component. Here, there are options to customize and use other types of Alert and to position the Alert wherever needed on the screen.

About Our Team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as After successfully delivering enterprise and SAAS applications that have been used by more than 500+ businesses around 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we trying to give a small contribution to the Flutter Dev Community.