OverlayContainer class

The child passed to this widget is rendered outside the widget hierarchy as an overlay to the exisiting widget tree. As a result this widget is highly suitable for building custom dropdown options, autocomplete suggestions, dialogs, etc. Think of it as widget placed absolutely and having a positive z-index over the rest of the widget tree. It is actually a friendly wrapper over the Flutter's Overlay and OverlayEntry APIs.


import 'package:flutter/material.dart';
import 'package:overlay_container/overlay_container.dart';
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overlay Container Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      home: MyHomePage(),
class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage> {
  // Need to maintain a "show" state either locally or inside
  // a bloc.
  bool _dropdownShown = false;
  void _toggleDropdown() {
    setState(() {
      _dropdownShown = !_dropdownShown;
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Container Demo Page'),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
              onPressed: _toggleDropdown,
              child: Column(
                children: <Widget>[
                  Text("Dropdown button"),
            // By default the overlay (since this is a Column) will
            // be added right below the raised button
            // but outside the widget tree.
            // We can change that by supplying a "position".
              show: _dropdownShown,
              // Let's position this overlay to the right of the button.
              position: OverlayContainerPosition(
                // Left position.
                // Bottom position.
              // The content inside the overlay.
              child: Container(
                height: 70,
                padding: const EdgeInsets.all(20),
                margin: const EdgeInsets.only(top: 5),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: <BoxShadow>[
                      color: Colors.grey[300],
                      blurRadius: 3,
                      spreadRadius: 6,
                child: Text("I render outside the \nwidget hierarchy."),


OverlayContainer({Key key, @required bool show, @required Widget child, bool asWideAsParent = false, OverlayContainerPosition position = const OverlayContainerPosition(0.0, 0.0), Color materialColor = Colors.transparent})


asWideAsParent bool
Whether the overlay is wide as its enclosing parent.
child Widget
The child to render inside the container.
hashCode int
The hash code for this object.
key Key
Controls how one widget replaces another widget in the tree.
materialColor Color
color attribute for the Material component that wraps child.
position OverlayContainerPosition
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.
runtimeType Type
A representation of the runtime type of the object.
show bool
Controlling whether the overlay is current showing or not.


createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
createState() → _OverlayContainerState
Creates the mutable state for this widget at a given location in the tree.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object.
toStringDeep({String prefixLineOne = '', String prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator.