How to add circular border to dialog in flutter?

Question

How to add circular border for dialog box in a flutter?,I tried the below code but I can't able to get the desired output, I already added circular border but it's not working, I need circular border for dialog,Refer the expected output for details, please guide

My code : `

class CustomDialog extends StatelessWidget {                                                          
  @override
  Widget build(BuildContext context) {                                                                  
    const double padding = 1.0;                                                                                
    return Dialog(
        backgroundColor: Colors.green,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20.0))),
            child: Column(mainAxisSize: MainAxisSize.min, children: [
              Container(
                margin: EdgeInsets.all(1),
                width: double.infinity,
                child: Text('title',
                    style: TextStyle(fontSize: 30, color: Colors.white)),
                color: Colors.green,
              ),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(10),
                child: ListView(
                  shrinkWrap: true,
                  children: [
                    Container(
                        margin: EdgeInsets.only(left: 10, bottom: 10),
                        height: 30,
                        child: Text('one',
                            style: TextStyle(
                              fontSize: 20,
                            ))),
                    Container(
                        margin: EdgeInsets.only(left: 10, bottom: 10),
                        height: 30,
                        child: Text('one',
                            style: TextStyle(
                              fontSize: 20,
                            ))),
                    Container(
                        margin: EdgeInsets.only(left: 10, bottom: 10),
                        height: 30,
                        child: Text('one',
                            style: TextStyle(
                              fontSize: 20,
                            ))),
                  ],
                ),
              ),
              Divider(
                color: Colors.white,
              ),
              Container(
                  color: Colors.white,
                  height: 50,
                  padding: EdgeInsets.all(5),
                  alignment: Alignment.centerRight,
                  child: Text(
                    'CANCEL',
                    style: TextStyle(fontSize: 20),
                  )),
            ])));
  }
}

`

My expectation:

current output:

Answer 1

Just need to add ClipBehavior to Dialog.

import 'package:flutter/material.dart';

class CustomDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const double padding = 1.0;
    return Dialog(
      backgroundColor: Colors.green,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0),
      ),
      clipBehavior: Clip.antiAlias, //  add clipBehavior 
      child: Column(mainAxisSize: MainAxisSize.min, children: [
        Container(
          margin: EdgeInsets.all(1),
          width: double.infinity,
          child: Text('title',
              style: TextStyle(fontSize: 30, color: Colors.white)),
          color: Colors.green,
        ),
        Container(
          color: Colors.white,
          padding: EdgeInsets.all(10),
          child: ListView(
            shrinkWrap: true,
            children: [
              Container(
                  margin: EdgeInsets.only(left: 10, bottom: 10),
                  height: 30,
                  child: Text('one',
                      style: TextStyle(
                        fontSize: 20,
                      ))),
              Container(
                  margin: EdgeInsets.only(left: 10, bottom: 10),
                  height: 30,
                  child: Text('one',
                      style: TextStyle(
                        fontSize: 20,
                      ))),
              Container(
                  margin: EdgeInsets.only(left: 10, bottom: 10),
                  height: 30,
                  child: Text('one',
                      style: TextStyle(
                        fontSize: 20,
                      ))),
            ],
          ),
        ),
        Divider(
          color: Colors.white,
        ),
        Container(
            color: Colors.white,
            height: 50,
            padding: EdgeInsets.all(5),
            alignment: Alignment.centerRight,
            child: Text(
              'CANCEL',
              style: TextStyle(fontSize: 20),
            )),
      ]),
    );
  }
}

Answer 2

The issue was with the Container you used to wrap the other widgets, you can add specific border radius to each container to fix.

I added a demo and code to get what you wanted your output to look like:

class CustomDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container(
        height: 340,
        child: Column(
          children: [
            Container(
              height: 60,
              width: double.infinity,
              padding: EdgeInsets.all(
                15.0,
              ),
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(
                    15.0,
                  ),
                  topRight: Radius.circular(
                    15.0,
                  ),
                ),
              ),
              child: Text(
                'Baby Names',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ),
            ...List.generate(
              5,
              (index) => Padding(
                padding: const EdgeInsets.all(10.0),
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'List Names',
                    style: TextStyle(
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
            ),
            Divider(
              color: Colors.grey[200],
              thickness: 1.5,
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Align(
                alignment: Alignment.centerRight,
                child: Text(
                  'CANCEL',
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.green,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

RESULT:

Answer 3

You added RoundedRectangleBorder(), import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
                                   
    return Dialog(
        backgroundColor: Colors.green,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Container(
  padding: EdgeInsets.only(
    top: 10.0,
    bottom: 5,
    left: 5,
    right: 5,
  ),
  margin: EdgeInsets.only(top: 5),
  decoration: new BoxDecoration(
    color: Colors.white,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(5),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10.0,
        offset: const Offset(0.0, 10.0),
      ),
    ],
  ),
  child: Column(
    mainAxisSize: MainAxisSize.min, // To make the card compact
    children: <Widget>[
      Text(
        "Baby",
        style: TextStyle(
          fontSize: 24.0,
          fontWeight: FontWeight.w700,
        ),
       
      ),
      Divider(color: Colors.grey,),
      SizedBox(height: 16.0),
      Text(
        "text",
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 16.0,
        ),
      ),
      SizedBox(height: 24.0),
      Align(
        alignment: Alignment.bottomRight,
        child: FlatButton(
          onPressed: () {
            Navigator.of(context).pop(); // To close the dialog
          },
          child: Text("buttonText"),
        ),
      ),
    ],
  ),
),
    );
  }
}