更改 Flutter alertDialog 中操作部分的背景颜色 [英] Change background color for the action section in Flutter alertDialog

问题描述

我是 Flutter 的新手，正在尝试自定义

解决方案

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

您要调用 alrtDialog 的小部件

 TextButton(按下:(){显示数据警报()；},孩子:文本('按下'，),),

您的警报对话框功能

showDataAlert() {显示对话框(上下文:上下文，建设者:(上下文){返回警报对话框(形状:圆角矩形边框(边界半径:边界半径.all(半径.圆形(20.0,),),),contentPadding: E​​dgeInsets.only(最高:10.0，),标题:文字(你的头衔在这里"，风格:TextStyle(字体大小:24.0)，),内容:容器(孩子:列(mainAxisSize: MainAxisSize.min,孩子们:<小部件>[文本(您的内容在这里"，风格:TextStyle(字体大小:24.0)，),大小盒(高度:5.0，),容器(装饰:盒子装饰(颜色:Colors.grey.shade500，边界半径:边界半径.only(左下角:半径.圆形(20.0)，右下角:半径.圆形(20.0))，),孩子:填充(填充:常量 EdgeInsets.all(8.0)，孩子:行(mainAxisAlignment: MainAxisAlignment.end,孩子们: [高架按钮(按下:(){Navigator.of(context).pop();},样式:ElevatedButton.styleFrom(主要:颜色.白色，),孩子:文本(取消"，样式:文本样式(颜色:颜色.黑色，),),),大小盒(宽度:10，),高架按钮(按下:(){Navigator.of(context).pop();},样式:ElevatedButton.styleFrom(主要:颜色.黑色，),孩子:文本(确认",),),],),)),],),),);});}

• 参考 ElevatedButton

  I'm new to Flutter and trying to customize the AlertDialog widget of the material dart.

  There are ways to set the background color for the whole dialog, is there a way to set the background color only to certain part of the dialog, from the attached picture the background color for the actions section of dialog should be different.

  解决方案

  Try below code hope its helpful to you.

  Your Widget to call alrtDialog

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

  Your Alert Dialog function

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

  • Refer ElevatedButton here
  • Refer AlertDialog here

  Your Result Screen->

  这篇关于更改 Flutter alertDialog 中操作部分的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！