Change background color for the action section in Flutter alertDialog

Question

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.

Pernambuco

can you share your code – Sanyu

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 AlertDialog here

Your Result Screen->

Banter

Answer 2

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

Arriola

Answer 3

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);}

Akbar

Answer 4

https://i.sstatic.net/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.sstatic.net/Mz3YL.png

Neopythagoreanism