Flutter – Implement Status Alert
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' ), ), ], ), ), ); } } |
Contact Us