Change background color for the action section in Flutter alertDialog

Question

Asked by Nikhil B on November 17, 2021 (source).

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.

background color change for action section

Answer

Question answered by Ravindra S (source).

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-> image

DART FLUTTER FLUTTER-ALERTDIALOG FLUTTER-LAYOUT
SHARE: