Is there a way to change the shape of a Dialog?

Question

I was looking at the properties for the different dialog classes and didn't see anything that would change it's shape. Is there a way to change a dialogs shape?

Answer 1

AlertDialog(
   shape: RoundedRectangleBorder(borderRadius: 
    BorderRadius.all(Radius.circular(15))),
    title: Text('Your title!'),
    content: Container(),
);

Answer 2

Like that

Dialog(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('Dialog'),
);

Answer 3

You can create a variety of shaped dialogs using Container in combination with existing clipping widgets (Painting and Effect Widgets) or by extending CustomClipper. The below will give you a diamond-shaped dialog. There are existing widgets like ClipOval that work out of the box without any customization (see screenshot below). If you want to try out ClipOval, simply replace ClipPath with ClipOval and comment out clipper:. Check out the painting.dart class to learn about creating custom paths.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Shaped Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        dialogBackgroundColor: Colors.transparent,
      ),
      home: MyHomePage(title: 'Flutter Shaped Dialog Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            _showShapedDialog();
          }),
    );
  }

  _showShapedDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return Padding(
          padding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
          child: ClipPath(
            child: Material(
              color: Colors.white,
              child: Center(
                child: Container(
                  alignment: FractionalOffset.center,
                  height: MediaQuery.of(context).size.width / 2.0,
                  width: MediaQuery.of(context).size.width / 2.0,
                  decoration: BoxDecoration(
                    border: Border.all(),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(bottom: 20.0),
                        child: Text(
                          'Clipping to a path is expensive. Certain shapes have more optimized widgets.',
                          textAlign: TextAlign.center,
                        ),
                      ),
                      FlatButton(
                        child: Text(
                          'OK',
                          style: TextStyle(color: Colors.blue),
                        ),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
            clipper: _MyClipper(), // Comment this out if you want to replace ClipPath with ClipOval
          ),
        );
      },
    );
  }
}

class _MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width / 2.0, 0.0);
    path.lineTo(0.0, size.height / 2.0);
    path.lineTo(size.width / 2.0, size.height);
    path.lineTo(size.width, size.height / 2.0);
    path.lineTo(size.width / 2.0, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}