Flutter :- Custom showDialog with background Color - flutter

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