CODEWITHSUNDEEP
dartflutter
user6274128
user6274128

Reputation:

Flutter change dialog background color

I was using dialogBackgroundColor property still the color was not changing. Can anyone tell me how to change the background color of the dialog?

Upvotes: 20

Views: 57840

Answers (9)

Furkan Cetintas
Furkan Cetintas

Reputation: 822

Have you tried giving the elevation?

dialogTheme: const DialogTheme(elevation: 0),

Or

  ThemeData _theme() {
    return ThemeData(
      useMaterial3: false,
      applyElevationOverlayColor: true,
    );
  }

Upvotes: 1

Anvarjon
Anvarjon

Reputation: 1

showDialog(
  barrierColor: ColorName.black343435.withOpacity(0.95),
  context: context,
  builder: (BuildContext context) {
    return ...
  }
);

Upvotes: -2

mouad kaaib
mouad kaaib

Reputation: 351

if you are using material 3 you should set the property surfaceTintColor as transparent

Dialog(
   backgroundColor: MyColors.white,
   surfaceTintColor: Colors.transparent,
   child: ... )

this is what worked for me :)

Upvotes: 35

Maruf
Maruf

Reputation: 1

showDialog(
                      context: context,
                      barrierDismissible: false, // user must tap button!
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('Are you sure?'),
                          content: SingleChildScrollView(
                            child: ListBody(
                              children: <Widget>[
                                Text("Another question will be passed"),
                              ],
                            ),
                          ),
                          actions: <Widget>[
                            TextButton(
                              child: Text('Yes'),
                              onPressed: () {
                                setState(() {
                                  if (sayac > 0 && sayac < nqSize - 1) {
                                    sayac++;
                                    _character=SingingCharacter.qsN;
                                  }
                                });
                                Navigator.of(context).pop();
                              },
                            ),
                            TextButton(
                              child: Text('No'),
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                            ),
                          ],
                         // elevation: 20.0,
                          backgroundColor: Colors.redAccent,
                            shape: new RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(25.0),
                            ),
                        );
                      },
                    );

Upvotes: -1

Ahmed Raza
Ahmed Raza

Reputation: 540

You can now use backgroundColor property of AlertDialog to change the color.

    showDialog(
   context: context,
   builder: (BuildContext context) {
       return AlertDialog(
         shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.all(Radius.circular(20.0))),
         backgroundColor: Colors.green,
   content: Container(...)
),
}),

Upvotes: 6

Tejas Shukla
Tejas Shukla

Reputation: 144

This code block work's for me. Here you can change color from this line data:Theme.of(context).copyWith(dialogBackgroundColor: Colors.white)

void openDialog(BuildContext context) {
    showDialog(
      context: context,
      barrierDismissible: true,
      builder: (context) {
        return Theme(
          data:
              Theme.of(context).copyWith(dialogBackgroundColor: Colors.white),
          child: new SimpleDialog(
            title: new Text("Title Here...."),
            children: <Widget>[
              new SimpleDialogOption(
                child: Text('Demo Text One'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              new SimpleDialogOption(
                child: Text('Demo Text Two'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              new SimpleDialogOption(
                child: Text('Close'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        );
      },
    );
  }

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 268514

You can now use backgroundColor property of AlertDialog to change the color.

AlertDialog(
  backgroundColor: Colors.orange,
  ...
)

Upvotes: 20

CopsOnRoad
CopsOnRoad

Reputation: 268514

You can do that without using Builder.

Here is the example. 

@override
Widget build(BuildContext context) {
  return RaisedButton(
    onPressed: () {
      showDialog(
        context: context,
        builder: (context) {
          return Theme(
            data: Theme.of(context).copyWith(dialogBackgroundColor: Colors.orange),
            child: AlertDialog(
              title: Text("Dialog Title"),
            ),
          );
        },
      );
    },
    child: Text("Show dialog"),
  );
}

Upvotes: 9

user6274128
user6274128

Reputation:

You need to wrap your Dialog in a Builder like this. After that dialogBackgroundColor will have an effect.

Theme(
  data: ThemeData(dialogBackgroundColor: Colors.orange),
  child: Builder(
    builder: (context) {
      return RaisedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text("Dialog title"),
              );
            },
          );
        },
        child: Text("Show dialog"),
      );
    },
  ),
)

Upvotes: 7

Related Questions