Alert Dialog Box in Flutter

A vital component of many mobile applications are alert dialogues. They serve as alerts, prompts, or means of obtaining user confirmation. We will demonstrate how to create an Alert Dialogue Box in a Flutter application with a comprehensive example in this blog post. Also We provide the basic example of alert dialog box.

What is an Alert Dialog?

An Alert Dialog is a simple, modifiable dialog that provides a way to alert users about a situation that requires acknowledgment. It usually contains a title, content, and action buttons.

Steps to Create an Alert Dialog in Flutter

1. Import the necessary package: Ensure you have the Flutter SDK set up and the material.dart package imported.
2. Define the Alert Dialog: Create an Alert Dialog with title, content, and actions.
3. Show the Alert Dialog: Use the showDialog function to display the Alert Dialog when needed.

Example: Creating a Simple Alert Dialog

Here’s a step-by-step guide to creating a simple Alert Dialog in a Flutter application.

Step 1: Set up a new Flutter project

First, create a new Flutter project if you haven’t already:

flutter create alert_dialog_example
cd alert_dialog_example

Step 2: Update main.dart with the Alert Dialog implementation

Open lib/main.dart and replace the existing code with the following:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AlertDialogExample(),
    );
  }
}

class AlertDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alert Dialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showAlertDialog(context);
          },
          child: Text('Show Alert Dialog'),
        ),
      ),
    );
  }

  void showAlertDialog(BuildContext context) {
    // set up the buttons
    Widget cancelButton = TextButton(
      child: Text("Cancel"),
      onPressed:  () {
        Navigator.of(context).pop();
      },
    );
    Widget continueButton = TextButton(
      child: Text("Continue"),
      onPressed:  () {
        Navigator.of(context).pop();
      },
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      title: Text("Simple Alert"),
      content: Text("This is an example of a simple alert dialog."),
      actions: [
        cancelButton,
        continueButton,
      ],
    );

    // show the dialog
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }
}

Step 3: Run the Application

To run the application, use the following command:

flutter run

When you tap the “Show Alert Dialog” button, the alert dialog will appear with two action buttons: “Cancel” and “Continue”. These buttons can perform any action you define, such as closing the dialog or performing some other operation.

Explanation of the Code

• MaterialApp: The main widget that starts the application.
• Scaffold: Provides the basic visual structure of the app, including the app bar and body.
• ElevatedButton: A button that triggers the display of the alert dialog.
• showAlertDialog function: Defines the structure and content of the alert dialog, including the title, content, and action buttons.
• showDialog function: Displays the alert dialog on the screen.

Customizing the Alert Dialog

You can customize the alert dialog to fit your needs by modifying its title, content, and action buttons. For example, you can add images, change the text style, or add more complex widgets within the dialog.

Here’s a more customized version of the alert dialog:

void showCustomAlertDialog(BuildContext context) {
  AlertDialog alert = AlertDialog(
    title: Text("Custom Alert", style: TextStyle(color: Colors.blue)),
    content: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text("This is a custom alert dialog."),
        SizedBox(height: 20),
        FlutterLogo(size: 50),
      ],
    ),
    actions: [
      TextButton(
        child: Text("Cancel"),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      TextButton(
        child: Text("OK"),
        onPressed: () {
          // Add your custom action here
          Navigator.of(context).pop();
        },
      ),
    ],
  );

  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Replace the showAlertDialog call with showCustomAlertDialog in the button’s onPressed callback to see the customized dialog.

Here is the corrected sentence:

We also provide other examples of customizing dialog buttons, which are very easy to use and understand. If you need some style examples for buttons, please check out these tutorials as well.

Conclusion

Alert Dialogs are a crucial part of mobile applications for communicating with users. With Flutter, creating and customizing alert dialogs is straightforward and flexible. You can tailor the dialogs to suit the needs of your application and provide a better user experience.

Feel free to modify and expand upon the examples provided to fit your specific requirements. Happy coding!