How to change the size of alertdialog in flutter

by

How to Change the Size of AlertDialog in Flutter

In Flutter, the AlertDialog widget provides a simple way to display a popup dialog box. By default, the size of the AlertDialog is determined by its content. However, you can change the size of the dialog by wrapping it in a custom dialog shape and adjusting the dimensions.

Step 1: Create a Custom Dialog Shape


class CustomDialogShape extends RoundedRectangleBorder {
  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    final double radius = 8.0;
    final double notchSize = 12.0;
    final double notchMidPoint = rect.width / 2;

    return Path()
      ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(radius)))
      ..moveTo(notchMidPoint - notchSize, rect.bottom)
      ..lineTo(notchMidPoint, rect.bottom + notchSize)
      ..lineTo(notchMidPoint + notchSize, rect.bottom)
      ..close();
  }
}

The above code defines a custom dialog shape that includes a ‘notch’ at the bottom of the dialog. This notch creates a visually distinct appearance for the dialog.

Step 2: Wrap the AlertDialog Widget


AlertDialog(
  shape: CustomDialogShape(),
  title: Text('My Dialog'),
  content: Text('This is the content of my dialog.'),
  actions: [
    TextButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      child: const Text('Close'),
    ),
  ],
)

In the above code snippet, we set the ‘shape’ property of the AlertDialog to our custom dialog shape. This will apply the custom shape to the dialog.

Step 3: Adjusting the Size of the Dialog

To adjust the size of the dialog, you can modify the size of the content within the AlertDialog widget. For example:


AlertDialog(
  shape: CustomDialogShape(),
  title: Text('My Dialog'),
  content: SizedBox(
    width: 200, // adjust width as needed
    height: 150, // adjust height as needed
    child: Text('This is the content of my dialog.'),
  ),
  actions: [
    TextButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      child: const Text('Close'),
    ),
  ],
)

In the above code, we wrap the content of the dialog inside a SizedBox widget and explicitly set the width and height properties to adjust the size of the dialog.

Step 4: Displaying the Dialog

To display the dialog, you can use the showDialog method and pass the AlertDialog widget as the ‘builder’ parameter. For example:


void _showMyDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        shape: CustomDialogShape(),
        title: Text('My Dialog'),
        content: Text('This is the content of my dialog.'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('Close'),
          ),
        ],
      );
    },
  );
}

Invoke the _showMyDialog method wherever you want to display the dialog.

By following these steps, you can change the size of an AlertDialog in Flutter and customize its appearance using a custom dialog shape.

Leave a comment