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),
        ),
      ),
    );
  }
}

Straight

Check this answer: #51908687 – Simson

You can use the ModalRoute like this thread https://mcmap.net/q/223196/-how-to-make-a-full-screen-dialog-in-flutter – Transudate

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.

Interurban

could you please let me know how to exit from YourFullScreenAlertDialog()? In my case, the "YourFullScreenAlertDialog()" is a stateless widget and is not being popped when enabling "barrierDismissible: true" in PageRouteBuilder (while the docs had mentioned that it'll pop it out) – Excitability

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'),
      ),
    ),
  ),
);

Sanferd

Answer 3

This is my implementation.

From first screen call this.

Navigator.push(
              context,
              PageRouteBuilder(
                  pageBuilder: (_, __, ___) => const NoInternetScreen(),
                  opaque: false,  ---->> opacity should be false
                  fullscreenDialog: true));

And in next screen set background color with opacity.

return Scaffold(
      backgroundColor: white.withOpacity(0.85),

......

result

Fewell

Answer 4

Screenshot (showGeneralDialog):

---

Code:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SizedBox.expand(child: FlutterLogo()),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.open_in_new),
      onPressed: () {
        showGeneralDialog(
          context: context,
          barrierColor: Colors.black38,
          barrierLabel: 'Label',
          barrierDismissible: true,
          pageBuilder: (_, __, ___) => Center(
            child: Container(
              color: Colors.white,
              child: Material(
                color: Colors.transparent,
                child: Text('Dialog', style: TextStyle(color: Colors.black, fontSize: 40),),
              ),
            ),
          ),
        );
      },
    ),
  );
}

Contemporaneous

Answer 5

In case, if You want to Make the Whole Screen Transparent...

void main() async {
  SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.transparent, // navigation bar color
        statusBarColor: Colors.transparent, // status bar color
      ),
  );
  runApp(const MyApp());
}

return MaterialApp(
  theme: ThemeData(
    canvasColor: Colors.transparent,
    scaffoldBackgroundColor: Colors.transparent,
  ),
);

Declinature