更改 Flutter alertDialog 中操作部分的背景颜色

Question

我是 Flutter 的新手，正在尝试自定义 material dart 的 AlertDialog 小部件。

有办法设置整个对话框的背景颜色，有没有办法只设置对话框的某些部分的背景颜色，从附图来看，对话框的操作部分的背景颜色应该是不同。

Answer 1

您可以创建自定义对话框。

像这样。

 Dialog errorDialog = Dialog(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), //this right here
  child: Container(
    height: 200.0,
    width: 300.0,
   
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding:  EdgeInsets.all(15.0),
          child: Text('Cool', style: TextStyle(color: Colors.red),),
        ),
        Padding(
          padding: EdgeInsets.all(15.0),
          child: Text('Awesome', style: TextStyle(color: Colors.red),),
        ),
        Padding(padding: EdgeInsets.only(top: 50.0)),
        TextButton(onPressed: () {
          Navigator.of(context).pop();
        },
            child: Text('Done!', style: TextStyle(color: Colors.purple, fontSize: 18.0),))
      ],
    ),
  ),
);

并显示对话框

 showDialog(context: context, builder: (BuildContext context) => errorDialog);}

Answer 2

https://i.stack.imgur.com/Mz3YL.png

    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
    //this right here
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Column(
          children: [
            Padding(
              padding: EdgeInsets.all(15.0),
              child: Text(
                'Cool',
                style: TextStyle(color: Colors.red),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(15.0),
              child: Text(
                'Awesome',
                style: TextStyle(color: Colors.red),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 50.0)),
          ],
        ),
        Container(
          decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.only(bottomLeft: Radius.circular(12), bottomRight: Radius.circular(12))
          ),
          width: double.maxFinite,
          child: TextButton(
              onPressed: () {},
              child: Text(
                'Done!',
                style: TextStyle(color: Colors.purple, fontSize: 18.0),
              )),
        )
      ],
    ),
  ); ```


[1]: https://i.stack.imgur.com/Mz3YL.png

Answer 3

AlertDialog 具有 backgroundColor 参数并采用将应用于整个背景的 Color。

title、actions 可以根据需要配置小部件。

AlertDialog(
          backgroundColor: Colors.pink,
          content: Text("Message"),
          buttonPadding: EdgeInsets.all(13),
          actions: [
            ElevatedButton(
              onPressed: () {},
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
              ),
              child: Text("Cancel"),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text("Confirm"),
            ),
          ],
        );

我使用 ElevatedButton 作为操作按钮，您可以选择任何内容并进行配置。虽然一切都是小部件，但您可以按照自己的方式放置。您还可以覆盖 themeData。

更多关于

Answer 4

试试下面的代码希望对你有帮助。

调用 alrtDialog 的 Widget

    TextButton(
            onPressed: () {
              showDataAlert();
            },
            child: Text(
              'Pressed',
            ),
          ),

您的警报对话框功能

showDataAlert() {
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(
                  20.0,
                ),
              ),
            ),
            contentPadding: EdgeInsets.only(
              top: 10.0,
            ),
            title: Text(
              "Your Title Here",
              style: TextStyle(fontSize: 24.0),
            ),
            content: Container(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    "Your Contents Here",
                    style: TextStyle(fontSize: 24.0),
                  ),
                  SizedBox(
                    height: 5.0,
                  ),
                  Container(
                      decoration: BoxDecoration(
                        color: Colors.grey.shade500,
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(20.0),
                            bottomRight: Radius.circular(20.0)),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            ElevatedButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              style: ElevatedButton.styleFrom(
                                primary: Colors.white,
                              ),
                              child: Text(
                                "Cancel",
                                style: TextStyle(
                                  color: Colors.black,
                                ),
                              ),
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            ElevatedButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              style: ElevatedButton.styleFrom(
                                primary: Colors.black,
                              ),
                              child: Text(
                                "Confirm",
                              ),
                            ),
                          ],
                        ),
                      )),
                ],
              ),
            ),
          );
        });
  }

参考 ElevatedButton here
参考AlertDialog here

您的结果屏幕->

更改 Flutter alertDialog 中操作部分的背景颜色

Change background color for the action section in Flutter alertDialog

dart

flutter

flutter-layout

flutter-alertdialog