Show transparent dialog in flutter

Question

I want to disply a image in flutter in an transparent dialog. I've set opaque to false and used MaterialType.transparency. When I open the dialog the background is black.

class ShowProfileImage extends ModalRoute<void> {
  final String url;

  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.black;

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  VoidCallback onDeleteImage;

  ShowProfileImage(String this.url);

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    // This makes sure that text and other content follows the material style
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: SafeArea(
        child: InkWell(
            onTap: () => Navigator.of(context).pop(),
            child: Container(
                height: double.infinity,
                width: double.infinity,
                color: Colors.transparent,
                child: Center(
                    child: Container(
                        width: 300,
                        child: Image(image: NetworkImageWithRetry(url)))))),
      ),
    );
  }
}

Have you checked this https://stackoverflow.com/a/51643972/10711216 — Mohan Sai Manthri, Jun 01 '20 at 11:55

score 13 · Accepted Answer · answered Jun 01 '20 at 12:04

Try this, here I am showing an image from assets, you can add your code as well if you are fetching from network

     showDialog(
                context: context,
                builder: (_) => new Dialog(
                  backgroundColor: Colors.transparent,
                  child: new Container(
                    alignment: FractionalOffset.center,
                    height: 80.0,
                    padding: const EdgeInsets.all(20.0),
                    child:  new Image.asset(
                      'assets/images/image.jpg',
                      fit: BoxFit.cover,
                    )
                  ),
                ));

score 2 · Answer 2 · answered Sep 03 '20 at 08:06

2

give showDialog a transparent barrierColor that not Colors.transparent,like Color(0x00ffffff)

answered Sep 03 '20 at 08:06

TomVista

31
1

score 1 · Answer 3 · answered Mar 02 '23 at 14:38

1

You can use:

Dialog(
    backgroundColor: Colors.transparent,
    elevation: 0,
    child: ...
)

You must set elevation to 0, otherwise a shadow will be canst beneath the dialog.

answered Mar 02 '23 at 14:38

Mario Alem

11
1

score 0 · Answer 4 · answered Jun 01 '20 at 12:43

Just call

_showTransparentDialog(context);

Implementation:

Future<T> _showTransparentDialog<T>(BuildContext context) async {
  return await showDialog<T>(
    context: context,
    builder: (_) {
      return AlertDialog(
        backgroundColor: Colors.transparent,
        content: Image.asset('your_image_asset'),
      );
    },
  );
}

score 0 · Answer 5 · answered Sep 05 '20 at 03:02

@TomaVista is right, if you set barrier color transparent, it will cause error, try Color(0x00ffffff) instead:

showDialog(context: context,
    //It doesnt work: barrierColor: Colors.transparent,
    barrierColor: Color(0x00ffffff), //this works
    builder: (_) {
      ////
    }
    );

Show transparent dialog in flutter

5 Answers5