Flutter Alert Widget - An Additional Dialog Box to Notify Important Message

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.

More and more organizations are now using the alert widget in their applications to communicate with employees. The advantage of this is because almost always people have their phone with them e.g. You can see all social media applications Facebook, Instagram, WhatsApp, Snapchat, and many apps they have an alert system to keep easy and reliable communication between the users.

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 GetWidget 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.

GF Flutter AlertDialog

GetWidget Alert 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.

GetWidget Alert Widget can be used in the following ways:

Simple Flutter Alert Widget

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 Popup Widget
Flutter Popup Widget

GF 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 AlertDailog: 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.
  • 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.
  • 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.  
  • TextField AlertDialog: This alert dialog helps to build an alert that will take the user 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 full width of the screen.

GF Flutter Alert Position properties:

GF Alerts can be positioned accordingly inside the GFFloating Widget. The positioning takes two parameters ie, horizontalPosition and vertical position.

How to Start:

Now here is the guide about how we should start developing Flutter Alert Widget with the use of the GetWidget UI Library.

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.

Example of Multiple Buttons in GF Alert:

import 'package:getwidget/getwidget.dart';
 
 return Scaffold(
   body:GFFloatingWidget(
     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.getGFColor(GFColor.white),),
                    position: GFPosition.end,
                    text: 'Learn More',)
                ],
              ),
            )
   body:Text('body or any kind of widget here..')
 )
)
Flutter Alert With Multiple Buttons
Flutter Alert With Multiple Buttons

Example of GF Flutter Alert types

import 'package:getwidget/getwidget.dart';
 
 return Scaffold(
   body:GFFloatingWidget(
     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.getGFColor(GFColor.white),),
                    position: GFPosition.end,
                    text: 'Learn More',)
                ],
              ),
            )
   body:Text('body or any kind of widget here..')
 )
)

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 Alert
GFAlert is a simple widget which is used to show some information and wait for the user’s action.

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.

Here we will use GetWidget Library to make use of GFAlert wherein it has many customization opinions to be used.

GFAlert is a Flutter AlertDialog that is used in all applications to show some kind of information or messages and waits for the user to take the required action. Let us see different kinds of Alerts with examples as below.

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 basic alert.

import 'package:getwidget/getwidget.dart';

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';

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';

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.

Does this Alert Widget support Flutter web?

Yes, this flutter alert widget support for Flutter web application too.

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.