Home > Enterprise >  How can I properly remove an OverlayEntry in flutter?
How can I properly remove an OverlayEntry in flutter?

Time:02-15

In my main widget tree, I have a GestureDetector that when tapped, will launch an Overlay as follows:

          OverlayState? _overlayState = Overlay.of(context);
          _overlayState?.insert(
              OverlayEntry(
            builder: (BuildContext context) {
              return ShowNotificationIcon();
            },
          )
          );

SnowNotificationIcon is actually a StatefulWidget that houses the guts of the Overlay:

class ShowNotificationIcon extends ConsumerStatefulWidget {
  const ShowNotificationIcon({Key? key}) : super(key: key);

  @override
  _ShowNotificationIconState createState() => _ShowNotificationIconState();
}

class _ShowNotificationIconState extends ConsumerState<ShowNotificationIcon> {

  void initState(){
    super.initState();
  }

  void dispose(){
    super.dispose();
  }

  Positioned theDropDown(){
    return
      Positioned(
        top: 50.0,
        left: 50.0,
        child: Material(
            color: Colors.transparent,
            child:
            Column(children: [
              Text('Test!'),
            ],)),
      );
  }


  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [

        Positioned.fill(
            child: GestureDetector(
              onTap: () {
                /// I WANT TO REMOVE THE OVERLAY HERE
              },
              child: Container(
                color: Colors.transparent,
              ),
            )
        ),

        theDropDown()

      ],
    );
  }
}

As I understand it, the overlay must be removed via a .remove() call, but since the overlay is all housed within a StatefulWidget, how can I make a .remove call on the overlay when it was opened outside of the StateWidget?

Am I missing something obvious here?

CodePudding user response:

You can try this example I created for you


          OverlayState? _overlayState = Overlay.of(context);
          OverlayEntry? _overlayEntry;
          _overlayEntry = OverlayEntry(
            builder: (BuildContext context) {
              return ShowNotificationIcon(entry: _overlayEntry);
            },
          );
          _overlayState?.insert(_overlayEntry);
class ShowNotificationIcon extends ConsumerStatefulWidget {
final OverlayEntry? entry;
  const ShowNotificationIcon({Key? key, this.entry}) : super(key: key);

  @override
  _ShowNotificationIconState createState() => _ShowNotificationIconState();
}

class _ShowNotificationIconState extends ConsumerState<ShowNotificationIcon> {

  Positioned theDropDown(){
    return
      Positioned(
        top: 50.0,
        left: 50.0,
        child: Material(
            color: Colors.transparent,
            child:
            Column(children: [
              Text('Test!'),
            ],)),
      );
  }


  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
            child: GestureDetector(
              onTap: () {
                if (widget.entry != null){
                  widget.entry.remove();
                }
              },
              child: Container(
                color: Colors.transparent,
              ),
            )
        ),

        theDropDown()

      ],
    );
  }
}
  • Related