CODEWITHSUNDEEP
flutterdialog
SILENCE
SILENCE

Reputation: 338

How to change background color of CupertinoAlertDialog?

I want create a CupertinoAlertDialog with dark background.

And I try to use Theme widget to solve this problem, but it doesn't work.

Some code here:

showDialog() {
    showCupertinoDialog(
        context: context,
        builder: (context) {
          return Theme(
            data: ThemeData(
                dialogBackgroundColor: Colors.black,
                dialogTheme: DialogTheme(backgroundColor: Colors.black)),
            child: CupertinoAlertDialog(
            title: Text('Title'),
            content: Text('Some message here'),
            actions: <Widget>[
               FlatButton(
                 onPressed: () {
                   Navigator.of(context).pop();
                 },
                 child: Text('OK'),
               ),
             ],
           ),
         );
       },
     );
  }

enter image description here

Upvotes: 13

Views: 12975

Answers (4)

Pierre
Pierre

Reputation: 101

For dark mode with you CupertinoAlertDialog, can do the following:

bool isAppInDarkMode(BuildContext context) {
  final brightness =
      WidgetsBinding.instance.platformDispatcher.platformBrightness;
  return brightness == Brightness.dark;
}

 showDialog() {
    showCupertinoDialog(
        context: context,
        builder: (context) {
          final brightness = isAppInDarkMode(context) ? Brightness.dark : Brightness.light;

          return CupertinoTheme(
            data: CupertinoThemeData(
              brightness: brightness,
            ),
            child: CupertinoAlertDialog(
              title: Text(title),
              content: Text(subtitle),
              actions: actionsWidgets,
            ),
          );
       },
     );
  }

Upvotes: 1

less
less

Reputation: 1

Maybe you can use adaptive_ Dialog instead of it https://pub.dev/packages/adaptive_dialog

Upvotes: -1

Tushar Upadhyay
Tushar Upadhyay

Reputation: 111

Instead of using Colors.black, use ThemeData.dark()

showDialog() {
    showCupertinoDialog(
        context: context,
        builder: (context) {
          return Theme(
            data: ThemeData.dark(),
            child: CupertinoAlertDialog(
            title: Text('Title'),
            content: Text('Some message here'),
            actions: <Widget>[
               FlatButton(
                 onPressed: () {
                   Navigator.of(context).pop();
                 },
                 child: Text('OK'),
               ),
             ],
           ),
         );
       },
     );
  }

Upvotes: 9

Kherel
Kherel

Reputation: 16185

The background color is hardcoded:

https://github.com/flutter/flutter/blob/20e59316b8b8474554b38493b8ca888794b0234a/packages/flutter/lib/src/cupertino/dialog.dart#L198

enter image description here

But you can create your own widget instead of default one.

Upvotes: 3

Related Questions