Flutter中带有带圆角背景的对话框

Question

我想创建一个对话框，其背景有圆角，并且这个背景有一个3像素的描边，就像附图一样。我使用以下代码来实现圆角，但是如何将描边添加到背景中呢？

showDialog(
        context: context,
        builder: (BuildContext context) {
          return Dialog(
             backgroundColor: pinkBackground,
             shape: RoundedRectangleBorder(borderRadius: 
                BorderRadius.all(Radius.circular(10.0))),
  child: Text(
    "title",

    style: getBodyTextStyle(),
  )
);
        },
      );

- AVEbrahimi

Answer 1

尝试将 Container 添加为你的 Dialog 子元素，并在其中声明 BoxDecoration

 showDialog(
    context: context,
    builder: (BuildContext context) {
    return Dialog(
    backgroundColor: AppColors.colorGreen,
    shape: RoundedRectangleBorder(
    borderRadius:
    BorderRadius.all(Radius.circular(10.0))),
    child: Container(
    decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent,width: 2),
    borderRadius:
    BorderRadius.all(Radius.circular(10.0))),
    child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text(
     "title",
        ),
     ),
    ));
  },
);

输出

- Ravinder Kumar

Answer 2

在本地应用：

showDialog(
  context: context,
  builder: (context) {
    return Dialog(
      backgroundColor: Colors.grey,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
        side: BorderSide(width: 3.0, color: Colors.black),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          "title",
          style: getBodyTextStyle(),
        ),
      ),
    );
  },
);

全局应用：

class Application extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final baseThemeData = ThemeData.light();
    final themeData = baseThemeData.copyWith(
      dialogTheme: baseThemeData.dialogTheme.copyWith(
        backgroundColor: Colors.grey,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          side: BorderSide(width: 3.0, color: Colors.black),
        ),
      ),
    );

    return MaterialApp(
      themeMode: ThemeMode.light,
      theme: themeData,
      ...
    );
  }

  void _openDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return Dialog(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              "title",
              style: getBodyTextStyle(),
            ),
          ),
        );
      },
    );
  }
}

两种变体的结果：

- nicetry

Answer 3

您可以将一个容器作为另一个容器的子元素，并为内部容器设置边距：

child: Container(
                decoration: BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(20.0),
                        topRight: const Radius.circular(20.0),
                        bottomLeft: const Radius.circular(20.0),
                        bottomRight: const Radius.circular(20.0)
                    )
                ),
              child:  Container(
                decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20.0),
                        topRight: Radius.circular(20.0),
                        bottomLeft: Radius.circular(20.0),
                        bottomRight: Radius.circular(20.0)
                    )
                ),
                margin: EdgeInsets.all(1.0),
                child:Padding(
                    padding: EdgeInsets.all(16),

child:Container(height:50,width:100))

- Azade Rahmati