How to use an Overlay without the Navigator/App?

user_463029 0
Viewed 289

Are there any code examples out there that show how to use an Overlay independant of a Navigator widget?

In our app, we do not want the TitleBar/AppBar to be part of the main nav-stack, it should stay at the top of the window, and be fixed position.

The TitleBar needs acccess to an Overlay though, as it has various tool-tips and pop-up panels.

The only I know to do this is double-wrap Navigator, or MaterialApp, both of which smell bad. I would like to use Overlay directly, but lack any guidance on how to implement it.

Looking a the source of Overlay does not provide much help, and I'd prefer not to delve too deeply into MaterialApp's thousands of lines of src code.

[EDIT] Looking at the Navigator source a bit, it seems Overlay is directly coupled to PageRoutes, which is a real shame :'( It would be nice if there was a simple Overlay(child: ) we could just use.

flutter
1 Answers

There is declarative package for using overlays called flutter_portal which lets you show overlays as part of the widget tree.

PortalEntry(
  visible: true,
  portal: Material(
    elevation: 8,
    child: IntrinsicWidth(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(title: Text('option 1')),
          ListTile(title: Text('option 2')),
        ],
      ),
    ),
  ),
  child: RaisedButton(...),
)

With this setup, you can toggle the overlay on and off with a single boolean ('visible') and you no longer have to make calls to Overlay.insert and Overlay.remove.

user_128069610
Related