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

Question

I'm new to Flutter and trying to customize theAlertDialog 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.

Answer 1

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 AlertDialoghere

Your Result Screen->

Answer 2

You can create custom dialog.

like this.

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

and show dialog

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

Answer 3

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 4

AlertDialog has backgroundColor parameter and takes Color that will apply to the full background.

title , actions takes widget can be configured the way you want.

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

I'm using ElevatedButton as action button, and you can choose anything and configure it. While everything is widget, you can place the way you want. You can also override the themeData.

More about

• AlertDialog-class.
• ElevatedButton
• themes
• ElevatedButton config on SO