[GH-ISSUE #890] [FR] Appflowy_overlay refactor #354

New issue

Closed

opened 2026-03-23 20:35:46 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 20:35:46 +00:00

Owner

Originally created by @appflowy on GitHub (Aug 23, 2022).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/890

Originally assigned to: @vincentdchan on GitHub.

Appflowy uses FlowyOverlay to show the custom widget. For example:

static void show(
    BuildContext context,
    GridURLCellController cellContext,
    VoidCallback completed,
  ) {
    FlowyOverlay.of(context).remove(identifier());
    final editor = URLCellEditor(
      cellController: cellContext,
      completed: completed,
    );

    //
    FlowyOverlay.of(context).insertWithAnchor(
      widget: OverlayContainer(
        child: SizedBox(
          width: 200,
          child: Padding(padding: const EdgeInsets.all(6), child: editor),
        ),
        constraints: BoxConstraints.loose(const Size(300, 160)),
      ),
      identifier: URLCellEditor.identifier(),
      anchorContext: context,
      anchorDirection: AnchorDirection.bottomWithCenterAligned,
      delegate: editor,
    );
  }

  static String identifier() {
    return (URLCellEditor).toString();
  }

As you see, it's not easy to use:

when shown, it requires the corresponding identifier and context.
when removed, it requires the context and identifier too.

We want to create a new package appflowy_overlay(located in app_flowy/packages/appflowy_overlay) that implements the following functions. It is designed to replace the FlowyOverlay.

More than that, this package will be published in pub.dev.

Feature required:

Show single-overlay
Support removing the specific overlay
Support shortcuts to remove the overlay
Support register removed callback when the widget's overlay was removed.
Support showing multi-overlays and removing them one by one.
Support removing all layers at once
Provider the default show animation and support custom animation
Support responsive layout when screen size changed
Support theming

Any suggestions would be helpful.

Reference projects:
overlay_support
toast

Originally created by @appflowy on GitHub (Aug 23, 2022). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/890 Originally assigned to: @vincentdchan on GitHub. Appflowy uses `FlowyOverlay` to show the custom widget. For example: ```dart static void show( BuildContext context, GridURLCellController cellContext, VoidCallback completed, ) { FlowyOverlay.of(context).remove(identifier()); final editor = URLCellEditor( cellController: cellContext, completed: completed, ); // FlowyOverlay.of(context).insertWithAnchor( widget: OverlayContainer( child: SizedBox( width: 200, child: Padding(padding: const EdgeInsets.all(6), child: editor), ), constraints: BoxConstraints.loose(const Size(300, 160)), ), identifier: URLCellEditor.identifier(), anchorContext: context, anchorDirection: AnchorDirection.bottomWithCenterAligned, delegate: editor, ); } static String identifier() { return (URLCellEditor).toString(); } ``` As you see, it's not easy to use: 1. when shown, it requires the corresponding identifier and context. 2. when removed, it requires the context and identifier too. We want to create a new package appflowy_overlay(located in app_flowy/packages/appflowy_overlay) that implements the following functions. It is designed to replace the FlowyOverlay. More than that, this package will be published in[ pub.dev](https://pub.dev/). Feature required: 1. Show single-overlay 2. Support removing the specific overlay 4. Support shortcuts to remove the overlay 5. Support register removed callback when the widget's overlay was removed. 6. Support showing multi-overlays and removing them one by one. 7. Support removing all layers at once 8. Provider the default show animation and support custom animation 9. Support responsive layout when screen size changed 10. Support theming Any suggestions would be helpful. Reference projects: [overlay_support](https://pub.dev/packages/overlay_support) [toast](https://pub.dev/packages/toast)