How to create a transparent full screen dialog on top of activity - Flutter

Question

I am trying to create a transparent full screen dialog on top of activity. I have tried following this thread but solution doesn't work.

In short , what I need is:

• full screen dialog.
• transparent background except for the widget I use for the dialog

here's my code:

To open dialog

void onNextBtnClick(){     var route = new MaterialPageRoute(         builder: (BuildContext context) =>         new GenreDialogUI(),fullscreenDialog: true     );     Navigator.of(context).push(route); } 

For Dialog view

import 'package:flutter/widgets.dart';  class HolePuncherPainter extends CustomPainter {   static final clearPaint = new Paint()     ..color = Colors.transparent,     ..blendMode = BlendMode.clear;    const HolePuncherPainter();    @override   void paint(Canvas canvas, Size size) {     canvas.drawRect(         new Rect.fromLTWH(0.0, 0.0, size.width, size.height), clearPaint);   }    @override   bool shouldRepaint(CustomPainter oldDelegate) {     return true;   } }  class GenreDialogUI extends StatefulWidget {    @override    _GenreDialogUI createState() => new _GenreDialogUI(); }  class _GenreDialogUI extends State<GenreDialogUI>  {    @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: addAppbar(),       body: new CustomPaint(         painter: HolePuncherPainter(),         child: new Container(         color: Colors.transparent,         alignment: Alignment.center,         child: UtilCommonWidget.addText('Transparent Dialog', Colors.red, 22.0, 1),         ),       ),     );   } } 

Answer 1

Navigator.of(context).push(PageRouteBuilder(     opaque: false,     pageBuilder: (BuildContext context, _, __) {         return YourFullScreenAlertDialog()     } )); 

YourFullScreenAlertDialog could be a widget that has a background color, Colors.transparent, like @creativecreatorormaybenot mentioned earlier.

Answer 2

For me the following worked:

showDialog(   context: context,   builder: (_) => Material(     type: MaterialType.transparency,     child: Center(       // Aligns the container to center       child: Container(         // A simplified version of dialog.         width: 100.0,         height: 56.0,         color: Colors.green,         child: Text('jojo'),       ),     ),   ), );