Hello,

I am trying to create an overlay with content that isn't square. However, the OverlayContainer seems to have a gray background. Do you have any tips to make it transparent ?

Thanks in advance :)

Just thought I'd mentioned that I made a derivative widget based on yours to solve some problems I was having (https://github.com/flutter/flutter/issues/19445#issuecomment-570105928)

Notably I call _overlayEntry.markNeedsBuild(); instead of rebuilding the widget when it's already expanded.

Might put together an actual PR later also

Hey,

Thank you for the widget, I always wanted to use Overlays. You've made it so easy that I had to give it a go :)

I ran into a couple of issues using overlay_container with my custom logic. I've managed to resolve them by changing a few things and I wanted to ask you if I may have missed something.

1: Why did you decide to put a Future.delayed in your _show method? 2: all WidgetsBinding.instance.addPostFrameCallback are ensured to be executed in the order in which they are called. Is there a reason why you're calling _overlayEntry.remove(); again in show?

I managed to resolve my issues by changing _show and _hide to:

  void _show() {
    if (!_opened) {
      WidgetsBinding.instance.addPostFrameCallback((_) async {
        _overlayEntry = _buildOverlayEntry();
        Overlay.of(context).insert(_overlayEntry);
        _opened = true;
      });
    }
  }

  void _hide() {
    if (_opened) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _overlayEntry.remove();
        _opened = false;
      });
    }
  }

Am I missing something here?

Copy and continue with the rest that is important

import 'package:flutter/material.dart';

class OverlayContainer extends StatefulWidget {
  /// The child to render inside the container.
  final Widget child;

  /// By default, the child will be rendered right below (if the parent is `Column`)
  /// the widget which is defined alongside the OverlayContainer.
  /// It would appear as though the Overlay is inside its parent
  /// but in reality it would be outside and above
  /// the original widget hierarchy.
  /// It's position can be altered and the overlay can
  /// be moved to any part of the screen by supplying a `position`
  /// argument.
  final OverlayContainerPosition position;

  /// Controlling whether the overlay is current showing or not.
  final bool show;

  /// Whether the overlay is wide as its enclosing parent.
  final bool asWideAsParent;

  /// `color` attribute for the `Material` component that wraps `child`.
  final Color materialColor;

  const OverlayContainer({
    Key? key,
    required this.show,
    required this.child,
    this.asWideAsParent = false,
    this.position = const OverlayContainerPosition(0.0, 0.0),
    this.materialColor = Colors.transparent,
  }) : super(key: key);

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

class _OverlayContainerState extends State<OverlayContainer>
    with WidgetsBindingObserver {
  OverlayEntry? _overlayEntry;
  bool _opened = false;

  @override
  void initState() {
    super.initState();
    if (widget.show) {
      _show();
    }
    WidgetsBinding.instance!.addObserver(this);
  }

  @override
  void didChangeMetrics() {
    // We would want to re render the overlay if any metrics
    // ever change.
    if (widget.show) {
      _show();
    } else {
      _hide();
    }
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // We would want to re render the overlay if any of the dependencies
    // ever change.
    if (widget.show) {
      _show();
    } else {
      _hide();
    }
  }

  @override
  void didUpdateWidget(OverlayContainer oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.show) {
      _show();
    } else {
      _hide();
    }
  }

  @override
  void dispose() {
    if (widget.show) {
      _hide();
    }
    WidgetsBinding.instance!.removeObserver(this);
    super.dispose();
  }

  void _show() {
    WidgetsBinding.instance!.addPostFrameCallback((_) async {
      await Future.delayed(const Duration(milliseconds: 280));
      if (_opened) {
        _overlayEntry!.remove();
      }
      _overlayEntry = _buildOverlayEntry();
      Overlay.of(context)!.insert(_overlayEntry!);
      _opened = true;
    });
  }

  void _hide() {
    if (_opened) {
      WidgetsBinding.instance!.addPostFrameCallback((_) {
        _overlayEntry!.remove();
        _opened = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    // Listen to changes in media query such as when a device orientation changes
    // or when the keyboard is toggled.
    MediaQuery.of(context);
    return Container();
  }

  OverlayEntry _buildOverlayEntry() {
    RenderBox renderBox = context.findRenderObject() as RenderBox;
    final size = renderBox.size;
    final offset = renderBox.localToGlobal(Offset.zero);
    return OverlayEntry(
      builder: (context) {
        return Positioned(
          left: offset.dx + widget.position.left,
          top: offset.dy - widget.position.bottom,
          width: widget.asWideAsParent ? size.width : null,
          child: Material(
            child: widget.child,
            color: widget.materialColor,
          ),
        );
      },
    );
  }
}

/// Class to help position the overlay on the screen.
/// By default it will be rendered right below (if the parent is `Column`)
/// the widget which is alongside the OverlayContainer.
/// The Overlay can however be moved around by giving a left value
/// and a bottom value just like in the case of a `Positioned` widget.
/// The default values for `left` and `bottom` are 0 and 0 respectively.
class OverlayContainerPosition {
  final double left;
  final double bottom;

  const OverlayContainerPosition(this.left, this.bottom);
}

Would be great when we click outside the overlay widget the overlayEntry would get removed.

https://stackoverflow.com/questions/58790406/how-to-close-an-overlay-by-clicking-on-outside-in-flutter

It is a simple feature although very useful.

When using it in to a scroll widget. the overlay widget will not stick with the parent widget. Once i set show to true, and scroll the screen, the Overlay Container will keep in the same position at i set it show to true. It stick in the position that when i open the overlay. Is there any ways to fix this issue? https://imgur.com/MaXQduB https://imgur.com/x8CyVdw

Hi ,

i am using overlay how showing over view for menu tab in flutter web , it works correctly in debug mode , below screenshot is taken when i run flutter in release mode in chrome . gray is the overlay where it should be transparent and able to see letter . but in release mode gray is applying

please let me know whats the issue .