What's the default background color of material dialog?-CodePudding

I'm writing a custom dialog by subclassing ModalRoute. Problem is, when my custom dialog shows up, it has a transparent background. How do I set the background color to the default background color of a material dialog?

CodePudding user response：

You can see in that all Dialogs have a barrierColor equal to const Color(0x80000000),.
It's defined in the showGeneralDialog method in the Flutter SDK.

CodePudding user response：

change the default background color of a Material dialog in Flutter, you can use the Theme widget to create a new theme and customize the dialogBackgroundColor property.

Here's an example of how to change the default background color of a Material dialog to yellow

MaterialApp(
  theme: ThemeData(
    dialogBackgroundColor: Colors.yellow,
  ),
  home: MyHomePage(),
);

as a second solution you can change the background color only of the dialog that is wrapped with this Theme Widget.

Theme.of(context).copyWith(dialogBackgroundColor: Colors.green)

CodePudding user response：

You can set the background color of your custom dialog by modifying the barrierColor property of your ModalRoute subclass. The barrierColor property controls the color of the overlay that is shown behind the dialog.

To set the background color of your custom dialog to the default background color of a Material Dialog, you can use the Colors.white color from the dart:ui library:

class MyCustomDialogRoute extends ModalRoute<void> {
@override
Color get barrierColor => Colors.white;

// ...
}

You can also use any other color that you prefer, as long as it is a valid Color object.