How to set Rounded Corners for AlertDialog in Flutter?

Flutter AlertDialog – Rounded Corners

To display rounded corners for AlertDialog in Flutter, specify the shape property of AlertDialog with RoundedRectangleBorder object with border radius specified.

An AlertDialog with rounded corners having a border radius of 30 is shown in the following screenshot.

Sample code snippet to make rounded corners for AlertDialog is

AlertDialog(
	shape: RoundedRectangleBorder(
		borderRadius: BorderRadius.circular(30),
	),
	...
);

Example

In this example, we will create a Flutter project with AlertDialog widget. And use shape property of AlertDialog to set rounded corners.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Alert',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyView(),
    );
  }
}

class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AlertDialog - googleflutter.com'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Alert Dialog'),
          onPressed: () {
            _showDialog(context);
          },
        ),
      ),
    );
  }
}

void _showDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30),
        ),
        title: new Text("Alert!!"),
        content: new Text("You are awesome!"),
        actions: <Widget>[
          new FlatButton(
            child: new Text("OK"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Screenshot

Run the application in Android Emulator or on an Android physical device, and you would get the following output.

Summary

In this Flutter Tutorial, we learned how to display rounded corners for AlertDialog.