Customizing Dialog Buttons

You can change the look and feel of the buttons in an Alert Dialogue in Flutter by adding more sophisticated widgets as needed. The TextButton, ElevatedButton, OutlinedButton, and even buttons with unique styles can be used. Here are some illustrations of how to personalise an Alert Dialog’s buttons.

To gain a comprehensive understanding of the fundamental concepts and practical applications of dialog boxes, it is essential to delve into the detailed explanations provided in this blog. Alert Dialog Boxes, often used in user interfaces, serve as a crucial mechanism for interacting with users, prompting them for decisions, and displaying important information. By exploring this, you will be introduced to the various types of dialog boxes, including alert dialogs, confirmation dialogs, and custom dialogs, each serving distinct purposes within an application.

Here’s how to customize the dialog buttons by changing their styles, colors, and adding icons:

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('Custom Alert Dialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showCustomAlertDialog(context);
          },
          child: Text('Show Custom Alert Dialog'),
        ),
      ),
    );
  }

  void showCustomAlertDialog(BuildContext context) {
    // set up the buttons
    Widget cancelButton = ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: Colors.red, // background color
        onPrimary: Colors.white, // text color
      ),
      child: Row(
        children: [
          Icon(Icons.cancel),
          SizedBox(width: 5),
          Text("Cancel"),
        ],
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );
    Widget continueButton = ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: Colors.green, // background color
        onPrimary: Colors.white, // text color
      ),
      child: Row(
        children: [
          Icon(Icons.check),
          SizedBox(width: 5),
          Text("Continue"),
        ],
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );

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

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

Explanation of Customizations

• ElevatedButton.styleFrom: This method is used to style the buttons. The primary parameter sets the background color, and the onPrimary parameter sets the text color.
• Row Widget: Used inside the button to add both an icon and text, providing a more visually appealing button.
• SizedBox: Adds spacing between the icon and the text.

Advanced Customizations

For more advanced customizations, you can create your own button widgets and use them in the dialog. Here’s an example:

Widget customButton({
  required String text,
  required IconData icon,
  required Color color,
  required VoidCallback onPressed,
}) {
  return ElevatedButton.icon(
    style: ElevatedButton.styleFrom(
      primary: color,
      onPrimary: Colors.white,
    ),
    icon: Icon(icon),
    label: Text(text),
    onPressed: onPressed,
  );
}

void showAdvancedCustomAlertDialog(BuildContext context) {
  // set up the buttons
  Widget cancelButton = customButton(
    text: "Cancel",
    icon: Icons.cancel,
    color: Colors.red,
    onPressed: () {
      Navigator.of(context).pop();
    },
  );
  Widget continueButton = customButton(
    text: "Continue",
    icon: Icons.check,
    color: Colors.green,
    onPressed: () {
      Navigator.of(context).pop();
    },
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("Advanced Custom Alert"),
    content: Text("This is an example of a custom alert dialog with advanced styled buttons."),
    actions: [
      cancelButton,
      continueButton,
    ],
  );

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

Using the Advanced Custom Dialog

Replace the showCustomAlertDialog call with showAdvancedCustomAlertDialog in the button’s onPressed callback to see the advanced custom dialog in action:

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

Conclusion

Customizing the buttons in an Alert Dialog in Flutter allows you to create a more engaging and visually appealing user interface. By using different button styles, colors, icons, and layouts, you can tailor the dialog to match the design and functionality of your application. Experiment with different styles and widgets to create the perfect alert dialog for your needs.