Flutter - Implement Status Alert
Last Updated :
24 Apr, 2025
In Flutter, a "status alert" typically refers to a visual feedback mechanism that informs the user about the status or outcome of a certain operation or event. The status_alert package in Flutter is a third-party package that provides an easy way to create and display such status alerts. These alerts often include a title, a subtitle, and an icon to represent the nature of the status (e.g., success or error). In this article, we are going to take help from the status_alert Package to create a Status Alert in the Flutter Application. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Add the Required Dependency
Add the below dependency to your pubspec.yaml file.
dependencies:
status_alert: ^1.0.1
Or, Simply you can run the below command on your VS Code Terminal.
flutter pub add status_alert
Step 3: Import the Package
First of all import material.dart and status_alert package.
import 'package:flutter/material.dart';
import 'package:status_alert/status_alert.dart';
Step 4: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 5: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
Step 6: Create MyHomePage Class
In this class Contains Varrious Methods and Widgets that are explain below :
- showSuccessAlert Method: This method is responsible for showing a success alert using the StatusAlert.show method from the status_alert package.
- showErrorAlert Method: This method shows an error alert.
- ElevatedButton Widgets :These buttons are used to trigger the showSuccessAlert and showErrorAlert methods when pressed.
Comments are added for better understandings.
// Method to show a success alert
void showSuccessAlert(BuildContext context) {
StatusAlert.show(
context,
duration: Duration(seconds: 2),
title: 'Success',
subtitle: 'Operation completed successfully!',
configuration: IconConfiguration(icon: Icons.check),
);
}
// Method to show an error alert
void showErrorAlert(BuildContext context) {
StatusAlert.show(
context,
duration: Duration(seconds: 2),
title: 'Error',
subtitle: 'Something went wrong!',
configuration: IconConfiguration(icon: Icons.error),
);
}
Dart
class MyHomePage extends StatelessWidget {
// Method to show a success alert
void showSuccessAlert(BuildContext context) {
StatusAlert.show(
context,
duration: Duration(seconds: 2),
title: 'Success',
subtitle: 'Operation completed successfully!',
configuration: IconConfiguration(icon: Icons.check),
);
}
// Method to show an error alert
void showErrorAlert(BuildContext context) {
StatusAlert.show(
context,
duration: Duration(seconds: 2),
title: 'Error',
subtitle: 'Something went wrong!',
configuration: IconConfiguration(icon: Icons.error),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Status Alert Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Button to trigger success alert
ElevatedButton(
onPressed: () => showSuccessAlert(context),
child: Text('Show Success Alert'),
),
SizedBox(height: 20),
// Button to trigger error alert
ElevatedButton(
onPressed: () => showErrorAlert(context),
child: Text('Show Error Alert'),
),
],
),
),
);
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
import 'package:status_alert/status_alert.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
// Method to show a success alert
void showSuccessAlert(BuildContext context) {
StatusAlert.show(
context,
duration: Duration(seconds: 2),
title: 'Success',
subtitle: 'Operation completed successfully!',
configuration: IconConfiguration(icon: Icons.check),
);
}
// Method to show an error alert
void showErrorAlert(BuildContext context) {
StatusAlert.show(
context,
duration: Duration(seconds: 2),
title: 'Error',
subtitle: 'Something went wrong!',
configuration: IconConfiguration(icon: Icons.error),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Status Alert Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Button to trigger success alert
ElevatedButton(
onPressed: () => showSuccessAlert(context),
child: Text('Show Success Alert'),
),
SizedBox(height: 20),
// Button to trigger error alert
ElevatedButton(
onPressed: () => showErrorAlert(context),
child: Text('Show Error Alert'),
),
],
),
),
);
}
}
Output:
Similar Reads
Flutter - Implement SignaturePad
Signatures are an integral part of various applications, from e-commerce to document management systems. Flutter offers versatile tools and libraries to implement a signature pad effortlessly within your mobile applications. In this tutorial, we'll build a simple signature pad using Syncfusion's Flu
3 min read
Implementing Rest API in Flutter
Along with building a UI in Flutter, we can also integrate it with the backend. Most applications use APIs to display user data. We will use the http package, which provides advanced methods to perform operations. REST APIs use simple HTTP calls to communicate with JSON data because:It uses await
5 min read
Flutter - Hide the Status Bar
StatusBar is located at the top of the Application, which basically shows the notification of the phones. Sample images are given below to get an idea about what we are going to do in this article. Before Hiding the status bar: Â After Hiding the status bar: Â If you see the difference between the i
2 min read
Flutter - Implementing Badges
Badges can be used for various purposes in an application. For example, showing the number of messages, number of items in the cart, etc. In this article, we will see the implementation of badges in Flutter using the badges Flutter package. Install the library: In the pubspec.yaml file, add badges l
5 min read
Flutter - State Management
In a reactive framework like Flutter, you can think of your UI as the function's return value. The function here is considered as your state. So in simple words, what a user sees in the application is one state, and he clicks on the button, he sees another UI screen. So now that screen is a state. S
5 min read
Flutter - Battery Level and State
In this article, we will see how to fetch Battery level and its state using flutter. To fetch Battery level(percentage) and its state we use a package called battery plus package. Important terms:Â Battery level - we see how much percent battery is remaining in mobile.Battery State - we see whether t
7 min read
Flutter - Implement IndexedStack Widget
The IndexedStack widget in Flutter is used to display a single child from a list of children at a given index. It's commonly used when you want to show one child widget while hiding the others, such as in a tabbed interface. In this article, we are going to implement the IndexedStack widget and expl
5 min read
Flutter - RFlutter Alerts
In Flutter, rflutter_alert is useful to create alerts in applications easily. It is a customizable and best way to create alerts in Flutter. In this article, we will see the different styles of alerts we can create with this awesome Flutter library. Follow the article to learn about it. Adding the d
4 min read
Flutter - Implement an Image Inside an AlertDialog
AlertDialogs are a common tool used to deliver messages, notifications, or interactive content to users. While Flutter provides a straightforward way to create AlertDialogs, it may not be immediately obvious how to include images inside them. Fortunately, this article will guide you through the proc
4 min read
Flutter - Implement Stepper Widget Inside an AlertDialog
The Stepper widget in Flutter is a user interface element used to create a step-by-step process interface. It allows users to progress through a series of steps or stages, with each step typically representing a specific task or some information. An Alert Dialog is a useful way to grab users' attent
5 min read