How to get a glass effect in a AlertDialog?

Question

I have a custom AlertDialog with glass effect:

void showAlert(BuildContext context) {
showGeneralDialog(
  barrierLabel: "Label",
  barrierDismissible: false,
  barrierColor: Colors.white.withOpacity(0.0),
  transitionDuration: Duration(milliseconds: 600),
  context: context,
  pageBuilder: (context, anim1, anim2) {
    return Align(
        alignment: Alignment.bottomCenter,
        child: ClipRect(
            child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
          child: Container(
            height: 280,
            child: SizedBox.expand(
              child: Dialog(
                title: Text("Warning!",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                      color: Colors.white,
                    )),
                content: Text(
                    "Text.",
                    style: TextStyle(
                      fontFamily: 'Century Gothic',
                      fontSize: 17,
                      color: Colors.white,
                    )),
                actions: [
                  TextButton(
                    child: new Text("OK",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 19,
                          color: Colors.white,
                        )),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
            ),
            margin: EdgeInsets.only(bottom: 150, left: 12, right: 12),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.05),
              boxShadow: [
                BoxShadow(
                  color: Colors.white.withOpacity(0.05),
                  blurRadius: 6.0,
                ),
              ],
              borderRadius: BorderRadius.circular(20.0),
              border: Border.all(color: Color(0xFF00ccff), width: 2),
            ),
          ),
        )));
  },
  transitionBuilder: (context, anim1, anim2, child) {
    return SlideTransition(
      position:
          Tween(begin: Offset(0, 1), end: Offset(0, 0)).animate(anim1),
      child: child,
    );
  },
);

} }

but this effect is in AlertDialog and over side and bottom, but top isn`t. But I need this effect in AlertDialog don't over sides. I try to get BackdropFilter almost everywhere but the result is the same or none. How can I do glass effect in AlertDialog area? Thank you very much.

How to get a glass effect in a AlertDialog?

0 Answers0