barrierColor property
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.
{@tool snippet}
For example, to make the barrier color use the theme's background color, one could say:
Color get barrierColor => Theme.of(navigator.context).colorScheme.surface;
{@end-tool}
See also:
- barrierDismissible, which controls the behavior of the barrier when tapped.
- ModalBarrier, the widget that implements this feature.
Implementation
@override
Color get barrierColor => modalBarrierColor ?? Colors.black54;