Flutter Alert Widget:

Flutter Alert Widget is a simple component which is used to alert the application's user. It means it allows to create an alert with important message that helps users to take an 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 normally used for events that require users to take an 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 app they have the alert system to keep easy and reliable communication between the user's.

Rating System
Alert Example

Now here I am going to dicuss about, How we build that alert system in Flutter widget while using of GetFlutter UI Library.

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

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

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

Why GetFlutter Alert Widget?

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

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

GetFlutter Alert:

GetFlutter Alert Widget is an alert component that allows build a Flutter alert widget in your Flutter applications to allows users to take an action with the an important message. It's helps users to understand while taking an impotrant action while using your application.

GetFlutter Alert Widget can be used in the following ways:

Basic GetFlutter 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 Alerts
Flutter Alerts

GF Alert with multiple buttons:

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

Genrally we categoreis the alert dialog into a different types, Some of them i am listing below:

  • Basic AlertDailog: Basic alert dialog widget will come with the a basich feature. It generally use for notify the users regarding new information like any changes happen in apps, Some new features added to your app, an important required situation or field that has to be acknowledgment, or show an confirmation notificationt 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 show/display the list/types of alert dialog to the users. If users will take any option then it will take immediate action based on user selcection from the list of AlertDialog.  
  • TextField AlertDialog: This alert dialog helps to build an alert that will take the user input.

GF Alert with Basic ,Rounded , FullWidth type:

GF Alert is of 3 types . The Basic alert is known as Default alert. By using the type property of Alert Widget we can have Rounded and Fullwidth Alert accordingly .

Positioning of GF Alert:

GF Alerts can be positioned accordingly inside the GFFloating WIdget . The positioning takes two parameters ie, horizontalPosition and verticalPosition .

How to Start:

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

Getting started will guide you how to start building a beautiful flutter application with GetFlutter 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/getflutter

Import full package:

import 'package:getflutter/getflutter.dart';

Note: dependencies: getflutter: ^1.0.11

Keep playing with the pre-built UI components.

Example of Multiple Buttons in GF Alert:

import 'package:getflutter/getflutter.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 Start Rating
Flutter Alert With Multiple Buttons

Example of GF Alert types:

import 'package:getflutter/getflutter.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 Alert positioning:

import 'package:getflutter/getflutter.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 Flutter alert bar then check out Custom Properties of GetFlutter Alert widget:

GF Alert
GFAlert is a simple widget which is used to show some information and wait for the user’s action.

Conculsion:

Here we discuss what Flutter Alerts are? And how we can use them in our Flutter app through GetFlutter Alert component.

FAQ's:

Q. What are the customizable properties used?

Ans. 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 Alert component . Hence customizable properties are full flexible. You can check out all custom propertise component on GetFlutter Alert Widget Properties.

Q. Does this Alert Widget support Flutter web?

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