Is there a way to dim the background while opening the overlay in Flutter?

Question

On click of a button, I am opening an overlay over it. Is there a way to blur or dim the page over which overlay is opened?

Thank you for your time!

Answer 1

Widget build(BuildContext context) {
  showDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel:
          MaterialLocalizations.of(context).modalBarrierDismissLabel,
      barrierColor: Colors.black54.withOpacity(0.8),
      builder: (context) {
        return AlertDialog(
          content: SizedBox(
            width: 300,
            child: ...
        );
      });
}

Adjust the opacity to your liking:

Colors.black54.withOpacity(0.8)