Flutter :- Custom showDialog with background Color

Question

  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {  
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
              child: new Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

I need to create this event where at the moment of showing the dialogue window, the other part of the screen changes color, I am having trouble consulting other sources and the truth is that I cannot coincide with the event.

The goal is to achieve something like this:

Answer 1

just pass barrierColor param to showDialog

showDialog(
  context: context,
  barrierColor: Color(0x640000FF),
  builder: (BuildContext context) {  
    return AlertDialog(
      // ...
    );
  },
);

Answer 2

You just need to show another screen which act as the dialog on the previous screen. For it first you need to use the Stack widget for it. I have created the demo one, please check it once.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutterlearningapp/colors.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  bool isDialog = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home"),
        ),
        body: SafeArea(
            top: true,
            bottom: true,
            child: Stack(
              children: <Widget>[
                Container(
                    color: Colors.white,
                    child: Align(
                      alignment: Alignment.center,
                      child: Column(
                        children: <Widget>[
                          Container(
                            color: Colors.pink,
                            width: double.infinity,
                            height: MediaQuery.of(context).size.height * 0.4,
                          ),
                          SizedBox(
                            height: 10.0,
                          ),
                          RaisedButton(
                              onPressed: () {
                                setState(() {
                                  isDialog = true;
                                });
                              },
                              child: Text("Open Dialog")),
                        ],
                      ),
                    )),
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: isDialog ? transparentWidget(context) : Container(),
                  ),
                )
              ],
            )));
  }

  Widget transparentWidget(BuildContext context) {
    return Container(
      color:  const Color(0x4D2980b9),
      width: double.infinity,
      height: double.infinity,
      child: Align(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.only(
                      topLeft: const Radius.circular(40.0),
                      topRight: const Radius.circular(40.0),
                      bottomLeft: const Radius.circular(40.0),
                      bottomRight: const Radius.circular(40.0),
                    )),
                child: Center(
                  child: Text("Your sheet"),
                ),
                height: MediaQuery.of(context).size.height * 0.5,
                width: MediaQuery.of(context).size.width * 0.8,
              ),
              RaisedButton(
                  onPressed: () {
                    setState(() {
                      isDialog = false;
                    });
                  },
                  child: Text("Cancel"))
            ],
          )),
    );
  }
}

And thee output of the above program as follow, please check it