Flutter overlay with clickable background

user_3808307 0
Viewed 1308

I am trying to position a widget on top of everything else.

I have this code working

PageRouteBuilder(
    opaque: false,
    barrierColor: Colors.transparent,  
    pageBuilder: (BuildContext context, __, _) {
      return Align(
        child: Container(
          width: 500,
          height: 500,
          color: Colors.black,             
        ),
      ); // Scaffold
    },
  ),

The problem is the barrier does not let click elements behind it. I can set dismissable to true or false, but even if false and barrierColor: null, elements behind the barrier are not clickable.

I am sure there must be an appropriate Widget for this, I add an image with example, I need to click the Button 1, Button 2, etc, when the overlay is visible.

I cannot use Stack

enter image description here

flutter-layout flutter
2 Answers

Try wrapping Align with IgnorePointer widget like so.

return IgnorePointer(
      child: Align(
        child: Container(
          width: 500,
          height: 500,
        ),
      ),
    );
user_138408640

What you need is OverlayEntry:

class OverlayWidget {
  static void show({@required BuildContext context, @required String message}) {
    OverlayEntry overlayEntry = new OverlayEntry(builder: (context) {
      return Positioned(
          top: MediaQuery.of(context).size.height / 2,
          width: 500, 
          height: 500,
          child:  Center(
                child: Container(
                  width: 500,
                  height: 500,
                  color: Colors.black,
                ),
          ));
    });
    Overlay.of(context).insert(overlayEntry);

// remove entry whatever you want, in this case entry will be removed after 2sec
//    new Future.delayed(Duration(seconds: 2)).then((value) {
//      overlayEntry.remove();
//    });
  }
}
user_112764160
Related