How can I show overlay on top of the whole app in flutter?

You can achieve that by create a class responsible to display/remove the overlay, this class need receive a BuildContext when creating to be able to create an instance of Overlay.

Basically what you need to do are:

1. Create a class OverlayScreen that build the OverlayState && OverlayEntry (in this case the OverylayEntry will be a list of OverlayEntry since we might have more than one Overlay on the screen so we can remove all of them at once).

2. Create an instance of this class earlier in your app (e.g MyApp). In your case you’ll need to call this inside Material.router…builder param.

3. Access this overlayScreen in your HomePage to display|removeAll overlays

Lets create our OverlayScreen

import 'package:flutter/material.dart';

class OverlayScreen {
  /// Create an Overlay on the screen
  /// Declared [overlayEntrys] as List<OverlayEntry> because we might have
  /// more than one Overlay on the screen, so we keep it on a list and remove all at once
  BuildContext _context;
  OverlayState? overlayState;
  List<OverlayEntry>? overlayEntrys;

  void closeAll() {
    for (final overlay in overlayEntrys ?? <OverlayEntry>[]) {
      overlay.remove();
    }
    overlayEntrys?.clear();
  }

  void show() {
    overlayEntrys?.add(
      OverlayEntry(
        builder: (context) {
          return _buildOverlayWidget();
        },
      ),
    );

    overlayState?.insert(overlayEntrys!.last);
  }

  OverlayScreen._create(this._context) {
    overlayState = Overlay.of(_context);
    overlayEntrys = [];
  }

  factory OverlayScreen.of(BuildContext context) {
    return OverlayScreen._create(context);
  }

  Widget _buildOverlayWidget() {
    return Positioned(
      top: 20,
      left: 20,
      right: 20,
      child: Container(
        width: 300,
        color: Colors.black,
        height: 300,
        child: const Text("MY CHAT"),
      ),
    );
  }
}

Now lets create an instance on MyApp

// Need to have it global to be able to access everywhere
OverlayScreen? overlayScreen;

void main() {
  runApp(
    const MyApp(),
  );
}


class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
      builder: (context, child) {
        return Overlay(
          initialEntries: [
            OverlayEntry(
              builder: (context) {
// Create an instance of `OverlayScreen` to be accessed globally
                overlayScreen = OverlayScreen.of(context);
                return child ?? const SizedBox();
              },
            ),
          ],
        );
      },
    );
  }
}

To finalise lets create our HomePage and access our overlayScreen there there

import 'package:flutter/material.dart';
import 'package:overlay_all_app/src/overlay_screen.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // Create an instance of OverlayScreen
    final overlayScreen = OverlayScreen.of(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () {
                // display the overlay
                overlayScreen.show();
              },
              child: const Text('Display Overlay'),
            ),
            const SizedBox(height: 30),
            TextButton(
              onPressed: () {
                // Call your next screen here
              },
              child: const Text('Go to next page'),
            ),
            const SizedBox(height: 30),
            TextButton(
              onPressed: () {
                // removed all overlays on the screen
                overlayScreen.closeAll();
              },
              child: const Text('Close Overlay'),
            ),
          ],
        ),
      ),
    );
  }
}

That’s it. You can use this class OverlayScreen to show/removeAll wherever you want.

I created a PR with sample code, check it out https://github.com/antonio-nicolau/flutter-working-with-overlay