flutter - 如何在 flutter 对话框中添加圆形边框？

Question

How to add circular border for dialog box in a flutter?,我尝试了下面的代码，但无法获得所需的输出，我已经添加了圆形边框，但它不起作用，我需要对话框的圆形边框，详细请引用预期输出，请指导

我的代码: `

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),
                  )),
            ])));
  }
}

`

我的期望:

当前输出:

Answer 1

只需要在对话框中添加ClipBehavior

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),
            )),
      ]),
    );
  }
}