How to prevent Overlay from covering AppBar?

Question

I have a custom widget positioned in a Stack. This custom widget creates an OverlayEntry linked to its position and inserts it into an Overlay.

The problem is that this overlay floats above the AppBar and the FloatingActionButton.

How to put OverlayEntry below the AppBar but above the contents of my Stack?

UPD: By "below" I mean that the AppBar should float over the OverlayEntry (or cover it, as if it has a bigger z-index).

This is what I have:

This is what I'd like to have:

Sample code:

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: OverlayDemo(),
    ),
  );
}

class OverlayDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar + Overlay'),
      ),
      body: Stack(
        children: [
          Positioned(
            top: 10,
            left: 100,
            child: WidgetWithOverlay()
          )
        ],
      )
    );
  }
}


class WidgetWithOverlay extends StatefulWidget {
  const WidgetWithOverlay({
    Key? key,
  }) : super(key: key);

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

class _WidgetWithOverlayState extends State<WidgetWithOverlay> {
  OverlayEntry? overlayEntry;

  void showOverlay() {
    print(overlayEntry);
    if (overlayEntry == null) {
      overlayEntry = OverlayEntry(
          builder: (BuildContext context) {
            return Positioned(
                top: 0.0,
                left: 0.0,
                child: IgnorePointer(
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
                )
            );
          }
      );
      Overlay.of(context)!.insert(overlayEntry!);
    }
  }

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: showOverlay,
      child: Text('Show Overlay')
    );
  }
}

@Warwick did u found any solution i m also facing this issue. — Nalawala Murtuza, Dec 30 '22 at 12:45

score 1 · Answer 1 · answered Jul 01 '21 at 20:23

1

put Stack above the scaffold then first child of stack will be WidgetWithOverlay() second child scaffold.

answered Jul 01 '21 at 20:23

Rai Rizwan

23
1
5

please share some example code. – Nalawala Murtuza Dec 30 '22 at 12:01

score 0 · Answer 2 · answered Jul 01 '21 at 20:18

0

by default the Appbar height is kToolbarHeight,so you can create your overlay like so:

  overlayEntry = OverlayEntry(
      builder: (BuildContext context) {
        return Positioned(
            top: kToolbarHeight,
            left: 0.0,
            child: IgnorePointer(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            )
        );
      }
  );

answered Jul 01 '21 at 20:18

stacker

4,317
2
10
24

I think I didn't use the correct wording for what I'm looking for. What I mean is that the `OverlayEntry` should be _covered_ by `AppBar`. So it should have lower z-index if that's a suitable term. – Warwick Jul 01 '21 at 21:49

How to prevent Overlay from covering AppBar?

2 Answers2