且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-01-23 21:46:30

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

您要调用 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->