Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change background color of CupertinoAlertDialog?

Tags:

dialog

flutter

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

like image 665
SILENCE Avatar asked Aug 27 '19 14:08

SILENCE


People also ask

How to change the background color of alertdialog in flutter?

To change the background color of AlertDialog in Flutter, set the backgroundColor property of AlertDialog with the required color. Following is a sample AlertDialog whose background color is changed to Colors.green. Sample code snippet to change the background color of AlertDialog widget in Flutter is AlertDialog( backgroundColor: Colors.green, ...

What is the difference between cupertinoalertdialog and alertdialog?

The CupertinoAlertDialog shows an alert with a set of two choices when CupertinoButton is pressed. CupertinoPopupSurface, which is a generic iOS-style popup surface that holds arbitrary content to create custom popups. CupertinoDialogAction, which is an iOS-style dialog button. AlertDialog, a Material Design alert dialog.

What is cupertinopopupsurface?

CupertinoPopupSurface, which is a generic iOS-style popup surface that holds arbitrary content to create custom popups. CupertinoDialogAction, which is an iOS-style dialog button.

How do I use color in a report?

Color can be used to highlight important information in your report or differentiate sections. You can add, change, or remove background colors for an entire report section or format records in a table.


2 Answers

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'),
               ),
             ],
           ),
         );
       },
     );
  }
like image 76
Tushar Upadhyay Avatar answered Oct 28 '22 09:10

Tushar Upadhyay


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.

like image 30
Kherel Avatar answered Oct 28 '22 08:10

Kherel