feat: introduce popover widget

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart

@@ -65,14 +65,15 @@ class GridFieldCell extends StatelessWidget {
     final state = context.read<FieldCellBloc>().state;
     final field = state.field;
 
-    FieldEditor(
+    FieldEditorPopOver.show(
+      context,
       gridId: state.gridId,
       fieldName: field.name,
       typeOptionLoader: FieldTypeOptionLoader(
         gridId: state.gridId,
         field: field,
       ),
-    ).show(context);
+    );
   }
 }
 

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart

@@ -49,24 +49,6 @@ class FieldEditor extends StatelessWidget with FlowyOverlayDelegate {
     );
   }
 
-  void show(
-    BuildContext context, {
-    AnchorDirection anchorDirection = AnchorDirection.bottomWithLeftAligned,
-  }) {
-    FlowyOverlay.of(context).remove(identifier());
-    FlowyOverlay.of(context).insertWithAnchor(
-      widget: OverlayContainer(
-        child: this,
-        constraints: BoxConstraints.loose(const Size(280, 400)),
-      ),
-      identifier: identifier(),
-      anchorContext: context,
-      anchorDirection: anchorDirection,
-      style: FlowyOverlayStyle(blur: false),
-      delegate: this,
-    );
-  }
-
   static String identifier() {
     return (FieldEditor).toString();
   }
@@ -116,3 +98,47 @@ class _FieldNameCell extends StatelessWidget {
     );
   }
 }
+
+class FieldEditorPopOver extends StatelessWidget {
+  final String gridId;
+  final String fieldName;
+
+  final IFieldTypeOptionLoader typeOptionLoader;
+  const FieldEditorPopOver({
+    required this.gridId,
+    required this.fieldName,
+    required this.typeOptionLoader,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyPopover(
+        child: Container(
+      constraints: BoxConstraints.loose(const Size(280, 400)),
+      width: 280,
+      height: 400,
+      child: FieldEditor(
+          gridId: gridId,
+          fieldName: fieldName,
+          typeOptionLoader: typeOptionLoader,
+          key: key),
+    ));
+  }
+
+  static show(
+    BuildContext context, {
+    required String gridId,
+    required String fieldName,
+    required IFieldTypeOptionLoader typeOptionLoader,
+    Key? key,
+  }) {
+    FlowyPopover.show(context, builder: (BuildContext context) {
+      return FieldEditorPopOver(
+          gridId: gridId,
+          fieldName: fieldName,
+          typeOptionLoader: typeOptionLoader,
+          key: key);
+    });
+  }
+}

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart

@@ -157,11 +157,12 @@ class CreateFieldButton extends StatelessWidget {
     return FlowyButton(
       text: const FlowyText.medium('New column', fontSize: 12),
       hoverColor: theme.shader6,
-      onTap: () => FieldEditor(
+      onTap: () => FieldEditorPopOver.show(
+        context,
         gridId: gridId,
         fieldName: "",
         typeOptionLoader: NewFieldTypeOptionLoader(gridId: gridId),
-      ).show(context),
+      ),
       leftIcon: svgWidget("home/add"),
     );
   }

frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart

@@ -169,14 +169,15 @@ class _RowDetailCell extends StatelessWidget {
   }
 
   void _showFieldEditor(BuildContext context) {
-    FieldEditor(
+    FieldEditorPopOver.show(
+      context,
       gridId: cellId.gridId,
       fieldName: cellId.field.name,
       typeOptionLoader: FieldTypeOptionLoader(
         gridId: cellId.gridId,
         field: cellId.field,
       ),
-    ).show(context);
+    );
   }
 }
 

frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart

@@ -119,11 +119,12 @@ class _GridPropertyCell extends StatelessWidget {
       hoverColor: theme.hover,
       leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
       onTap: () {
-        FieldEditor(
+        FieldEditorPopOver.show(
+          context,
           gridId: gridId,
           fieldName: field.name,
           typeOptionLoader: FieldTypeOptionLoader(gridId: gridId, field: field),
-        ).show(context, anchorDirection: AnchorDirection.bottomRight);
+        );
       },
     );
   }

frontend/app_flowy/packages/flowy_infra_ui/lib/flowy_infra_ui.dart

@@ -9,3 +9,4 @@ export 'src/flowy_overlay/flowy_overlay.dart';
 export 'src/flowy_overlay/list_overlay.dart';
 export 'src/flowy_overlay/option_overlay.dart';
 export 'src/flowy_overlay/flowy_dialog.dart';
+export 'src/flowy_overlay/flowy_popover.dart';

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_popover.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+const _overlayContainerPadding = EdgeInsets.all(12);
+
+class FlowyPopover extends StatelessWidget {
+  final Widget child;
+  final ShapeBorder? shape;
+
+  FlowyPopover({Key? key, required this.child, this.shape}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SimpleDialog(
+      shape: shape ??
+          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      children: [Container(padding: _overlayContainerPadding, child: child)],
+    );
+  }
+
+  static show(
+    BuildContext context, {
+    required Widget Function(BuildContext context) builder,
+  }) {
+    showDialog(
+        barrierColor: Colors.transparent, context: context, builder: builder);
+  }
+}