barrierColor property

  1. @override
Color? barrierColor
final

The color to use for the modal barrier. If this is null, the barrier will be transparent.

The modal barrier is the scrim that is rendered behind each route, which generally prevents the user from interacting with the route below the current route, and normally partially obscures such routes.

For example, when a dialog is on the screen, the page below the dialog is usually darkened by the modal barrier.

The color is ignored, and the barrier made invisible, when ModalRoute.offstage is true.

While the route is animating into position, the color is animated from transparent to the specified color.

If this getter would ever start returning a different color, one of the changedInternalState or changedExternalState methods should be invoked so that the change can take effect.

It is safe to use navigator.context to look up inherited widgets here, because the Navigator calls changedExternalState whenever its dependencies change, and changedExternalState causes the modal barrier to rebuild.

For example, to make the barrier color use the theme's background color, one could say:
link 
Color get barrierColor => Theme.of(navigator.context).colorScheme.surface;

See also:

Implementation

@override
final Color? barrierColor;