Flutter - Implement Status Alert
Last Updated :
28 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
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 - 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 - 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