user3712489
user3712489

Reputation: 61

How to close self OverlayEntry onTap

I have an OverlayEntry that displays fullscreen. I want to dispatch an actions an close it onTap of the overlayentry's buttons

OverlayEntry _buildOverlayFeedback(BuildContext context, String tituloEvento) {
      return OverlayEntry(
        builder: (context) => Material(
          child: Container(
            width: double.infinity,
            height: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.sentiment_dissatisfied),
                      title: Text('No me ha gustado'),
                      onTap: () {
                            // how to close myself????
                      },
                    ),
                    ListTile(
                        leading: Icon(Icons.sentiment_very_satisfied),
                        title: Text('Muy bien'),
                        onTap: () {}),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    }

Upvotes: 4

Views: 3535

Answers (2)

chemamolins
chemamolins

Reputation: 20558

You call remove() on the OverlayEntry itself.

This could be one way of doing it:

      OverlayEntry _buildOverlayFeedback(BuildContext context, String tituloEvento) {
        OverlayEntry? entry;
        entry = OverlayEntry(
          builder: (context) => Material(
            child: Container(
              width: double.infinity,
              height: double.infinity,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      ListTile(
                        leading: Icon(Icons.sentiment_dissatisfied),
                        title: Text('No me ha gustado'),
                        onTap: () {
                          entry!.remove();
                        },
                      ),
                      ListTile(
                          leading: Icon(Icons.sentiment_very_satisfied),
                          title: Text('Muy bien'),
                          onTap: () {}),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
        return entry!;
      }

Upvotes: 8

Sludge
Sludge

Reputation: 7395

For those of you who are trying to figure out how to do this with FCM onMessage with Navigator.of(context).overlay.insert(entry) - chemamolins' answer works, you just have to adapt it slightly. Here's a similar example to get you started:

      onMessage: (Map<String, dynamic> message) async {
        OverlayEntry entry;
        entry = OverlayEntry(builder: (context) {
          return GestureDetector(
            onTap: entry.remove,
            child: SafeArea(
              child: Align(
                alignment: Alignment.topCenter,
                child: Material(
                  type: MaterialType.transparency,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                    width: double.infinity,
                    height: 60,
                    child: Column(
                      children: <Widget>[
                        Text(message['notification']['title']),
                        Text(message['notification']['body']),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          );
        });
        Navigator.of(context).overlay.insert(entry);
      },

And onTap will close out the OverlayEntry.

Upvotes: 2

Related Questions