feat: use popover in detail page

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

@@ -116,26 +116,3 @@ class _FieldNameCell extends StatelessWidget {
     );
   }
 }
-
-class FieldEditorPopOver {
-  static show(
-    BuildContext context, {
-    required BuildContext anchorContext,
-    required String gridId,
-    required String fieldName,
-    required IFieldTypeOptionLoader typeOptionLoader,
-    Key? key,
-  }) {
-    FlowyPopover.show(
-      context,
-      anchorContext: anchorContext,
-      builder: (BuildContext context) {
-        return FieldEditor(
-            gridId: gridId,
-            fieldName: fieldName,
-            typeOptionLoader: typeOptionLoader,
-            key: key);
-      },
-    );
-  }
-}

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

@@ -128,16 +128,16 @@ class _FieldTypeOptionEditorState extends State<FieldTypeOptionEditor> {
 
   void _showOverlay(BuildContext context, Widget child,
       {VoidCallback? onRemoved}) {
-    FlowyPopover.show(
-      context,
-      constraints: BoxConstraints.loose(const Size(460, 440)),
-      anchorContext: context,
-      anchorDirection: AnchorDirection.rightWithCenterAligned,
-      anchorOffset: const Offset(20, 0),
-      builder: (BuildContext context) {
-        return child;
-      },
-    );
+    // FlowyPopover.show(
+    //   context,
+    //   constraints: BoxConstraints.loose(const Size(460, 440)),
+    //   anchorContext: context,
+    //   anchorDirection: AnchorDirection.rightWithCenterAligned,
+    //   anchorOffset: const Offset(20, 0),
+    //   builder: (BuildContext context) {
+    //     return child;
+    //   },
+    // );
   }
 
   void _hideOverlay(BuildContext context) {

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

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

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

@@ -13,6 +13,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:appflowy_popover/popover.dart';
 
 import '../../layout/sizes.dart';
 import '../cell/cell_accessory.dart';
@@ -123,7 +124,7 @@ class _PropertyList extends StatelessWidget {
   }
 }
 
-class _RowDetailCell extends StatelessWidget {
+class _RowDetailCell extends StatefulWidget {
   final GridCellIdentifier cellId;
   final GridCellBuilder cellBuilder;
   const _RowDetailCell({
@@ -132,11 +133,18 @@ class _RowDetailCell extends StatelessWidget {
     Key? key,
   }) : super(key: key);
 
+  @override
+  State<StatefulWidget> createState() => _RowDetailCellState();
+}
+
+class _RowDetailCellState extends State<_RowDetailCell> {
+  final PopoverController popover = PopoverController();
+
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    final style = _customCellStyle(theme, cellId.fieldType);
-    final cell = cellBuilder.build(cellId, style: style);
+    final style = _customCellStyle(theme, widget.cellId.fieldType);
+    final cell = widget.cellBuilder.build(widget.cellId, style: style);
 
     final gesture = GestureDetector(
       behavior: HitTestBehavior.translucent,
@@ -157,8 +165,29 @@ class _RowDetailCell extends StatelessWidget {
           children: [
             SizedBox(
               width: 150,
-              child: FieldCellButton(
-                  field: cellId.field, onTap: () => _showFieldEditor(context)),
+              child: Popover(
+                controller: popover,
+                targetAnchor: Alignment.topRight,
+                followerAnchor: Alignment.topLeft,
+                offset: const Offset(20, 0),
+                popupBuilder: (context) {
+                  return OverlayContainer(
+                    constraints: BoxConstraints.loose(const Size(240, 200)),
+                    child: FieldEditor(
+                      gridId: widget.cellId.gridId,
+                      fieldName: widget.cellId.field.name,
+                      typeOptionLoader: FieldTypeOptionLoader(
+                        gridId: widget.cellId.gridId,
+                        field: widget.cellId.field,
+                      ),
+                    ),
+                  );
+                },
+                child: FieldCellButton(
+                  field: widget.cellId.field,
+                  onTap: () => popover.show(),
+                ),
+              ),
             ),
             const HSpace(10),
             Expanded(child: gesture),
@@ -167,19 +196,6 @@ class _RowDetailCell extends StatelessWidget {
       ),
     );
   }
-
-  void _showFieldEditor(BuildContext context) {
-    FieldEditorPopOver.show(
-      context,
-      anchorContext: context,
-      gridId: cellId.gridId,
-      fieldName: cellId.field.name,
-      typeOptionLoader: FieldTypeOptionLoader(
-        gridId: cellId.gridId,
-        field: cellId.field,
-      ),
-    );
-  }
 }
 
 GridCellStyle? _customCellStyle(AppTheme theme, FieldType fieldType) {

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

@@ -119,13 +119,13 @@ class _GridPropertyCell extends StatelessWidget {
       hoverColor: theme.hover,
       leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),
       onTap: () {
-        FieldEditorPopOver.show(
-          context,
-          anchorContext: context,
-          gridId: gridId,
-          fieldName: field.name,
-          typeOptionLoader: FieldTypeOptionLoader(gridId: gridId, field: field),
-        );
+        // FieldEditorPopOver.show(
+        //   context,
+        //   anchorContext: context,
+        //   gridId: gridId,
+        //   fieldName: field.name,
+        //   typeOptionLoader: FieldTypeOptionLoader(gridId: gridId, field: field),
+        // );
       },
     );
   }

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

@@ -25,50 +25,6 @@ class FlowyPopover extends StatefulWidget {
     this.constraints,
   }) : super(key: key);
 
-  static show(
-    BuildContext context, {
-    required Widget Function(BuildContext context) builder,
-    BuildContext? anchorContext,
-    Offset? anchorPosition,
-    AnchorDirection? anchorDirection,
-    Size? anchorSize,
-    Offset? anchorOffset,
-    BoxConstraints? constraints,
-  }) {
-    final offset = anchorOffset ?? Offset.zero;
-    Offset targetAnchorPosition = anchorPosition ?? Offset.zero;
-    Size targetAnchorSize = anchorSize ?? Size.zero;
-    if (anchorContext != null) {
-      RenderObject renderObject = anchorContext.findRenderObject()!;
-      assert(
-        renderObject is RenderBox,
-        'Unexpected non-RenderBox render object caught.',
-      );
-      final renderBox = renderObject as RenderBox;
-      targetAnchorPosition = renderBox.localToGlobal(Offset.zero);
-      targetAnchorSize = renderBox.size;
-    }
-    final anchorRect = Rect.fromLTWH(
-      targetAnchorPosition.dx + offset.dx,
-      targetAnchorPosition.dy + offset.dy,
-      targetAnchorSize.width,
-      targetAnchorSize.height,
-    );
-
-    showDialog(
-        barrierColor: Colors.transparent,
-        context: context,
-        builder: (BuildContext context) {
-          return FlowyPopover(
-              anchorRect: anchorRect,
-              anchorDirection: anchorDirection,
-              constraints: constraints,
-              builder: (BuildContext context) {
-                return builder(context);
-              });
-        });
-  }
-
   @override
   State<FlowyPopover> createState() => _FlowyPopoverState();
 }