How to remove or hide overlay - Flutter

ubakasi
March 24, 2023
198 views
1 vote
2 Answers

I’m new with flutter and dart. I want to remove an overlay. I have tried many answers online but i’m still stuck. Please see my code

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

void _insertOverlay(BuildContext context) { 
    return Overlay.of(context).insert(
      OverlayEntry(builder: (context) {
        
        
        return Positioned(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          top: 0,
          left: 0,
          child: Material(
            color: const Color(0xFF0E3311).withOpacity(0.5),
            child: GestureDetector(
              onTap: (){
                print('OVERLAY ON');
                //on tap, remove or hide the overlay
              },
              child: Container( decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.redAccent), ),
            ),
          ),
        );
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
       
        title: Text(widget.title),
      ),
      body: Center(
        
        child: Column(
          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Flutter application',
            ),
            Text(
              '',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()=>WidgetsBinding.instance.addPostFrameCallback((_) => _insertOverlay(context)),
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

I have been able to make the overlay appear but I’m trying to remove or hide it. See what I have done so far. I’ve been on this for quite sometime now. Thanks in advance

Tags: dart flutter

Answers

I am able to work around like this

 late final OverlayEntry entry = OverlayEntry(
    builder: (context) {
      return Positioned(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        top: 0,
        left: 0,
        child: Material(
          color: const Color(0xFF0E3311).withOpacity(0.5),
          child: GestureDetector(
            onTap: _removeOverlay,
            child: Container(
              decoration: BoxDecoration(
                  shape: BoxShape.circle, color: Colors.redAccent),
            ),
          ),
        ),
      );
    },
  );
  void _insertOverlay(BuildContext context) {
    return Overlay.of(context).insert(entry);
  }

  void _removeOverlay() {
    entry.remove();
  }

try this code instead:

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  OverlayEntry? _overlayEntry;

  void _insertOverlay(BuildContext context) {
    _overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        top: 0,
        left: 0,
        child: Material(
          color: const Color(0xFF0E3311).withOpacity(0.5),
          child: GestureDetector(
            onTap: () {
              print('OVERLAY ON');
              //on tap, remove or hide the overlay
              _overlayEntry?.remove();
            },
            child: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.redAccent,
              ),
            ),
          ),
        ),
      );
    });
    Overlay.of(context)?.insert(_overlayEntry!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Flutter application',
            ),
            Text(
              '',
              style: Theme.of(context).textTheme.headline6,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () =>
            WidgetsBinding.instance!.addPostFrameCallback((_) => _insertOverlay(context)),
        child: const Icon(Icons.add),
      ),
    );
  }
}

if you had any question please ask again.

happy coding…

Please signup or login to give your own answer.

Click here to cancel reply.

How to remove or hide overlay – Flutter

Answers