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'),
            ),
          ],
        ),
      ),
    );
  }
}

Output: