fix: some mobile database bugs (#4738)

* chore: no autofocus on field name

* refactor: one, two, many

* chore: reduce spacing between tabbar header and grid header

* fix: update field type

* fix: cannot edit view name

* fix: title for select field type bottom sheet

* fix: forget checks, just do it

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/mobile_create_field_button.dart

@@ -40,7 +40,7 @@ class MobileRowDetailCreateFieldButton extends StatelessWidget {
           LocaleKeys.grid_field_newProperty.tr(),
           fontSize: 15,
         ),
-        onPressed: () => showCreateFieldBottomSheet(context, viewId),
+        onPressed: () => mobileCreateFieldWorkflow(context, viewId),
         icon: const FlowySvg(FlowySvgs.add_m),
       ),
     );

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/option_text_field.dart

@@ -1,7 +1,10 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/database/field/mobile_field_bottom_sheets.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
 class OptionTextField extends StatelessWidget {
@@ -10,31 +13,43 @@ class OptionTextField extends StatelessWidget {
     required this.controller,
     required this.type,
     required this.onTextChanged,
+    required this.onFieldTypeChanged,
   });
 
   final TextEditingController controller;
   final FieldType type;
   final void Function(String value) onTextChanged;
+  final void Function(FieldType value) onFieldTypeChanged;
 
   @override
   Widget build(BuildContext context) {
     return FlowyOptionTile.textField(
       controller: controller,
-      autofocus: true,
       textFieldPadding: const EdgeInsets.symmetric(horizontal: 12.0),
       onTextChanged: onTextChanged,
-      leftIcon: Container(
+      leftIcon: GestureDetector(
-        height: 38,
+        onTap: () async {
-        width: 38,
+          final fieldType = await showFieldTypeGridBottomSheet(
-        decoration: BoxDecoration(
+            context,
-          borderRadius: BorderRadius.circular(12),
+            title: LocaleKeys.grid_field_editProperty.tr(),
-          color: type.mobileIconBackgroundColor,
+          );
-        ),
+          if (fieldType != null) {
-        child: Center(
+            onFieldTypeChanged(fieldType);
-          child: FlowySvg(
+          }
-            type.svgData,
+        },
-            blendMode: null,
+        child: Container(
-            size: const Size.square(22),
+          height: 38,
+          width: 38,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(12),
+            color: type.mobileIconBackgroundColor,
+          ),
+          child: Center(
+            child: FlowySvg(
+              type.svgData,
+              blendMode: null,
+              size: const Size.square(22),
+            ),
           ),
         ),
       ),

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_edit_field_screen.dart

@@ -61,7 +61,7 @@ class _MobileEditPropertyScreenState extends State<MobileEditPropertyScreen> {
         body: MobileFieldEditor(
           mode: FieldOptionMode.edit,
           isPrimary: widget.field.isPrimary,
-          defaultValues: _fieldOptionValues,
+          defaultValues: FieldOptionValues.fromField(field: widget.field.field),
           actions: [
             widget.field.fieldSettings?.visibility.isVisibleState() ?? true
                 ? FieldOptionAction.hide
@@ -69,9 +69,25 @@ class _MobileEditPropertyScreenState extends State<MobileEditPropertyScreen> {
             FieldOptionAction.duplicate,
             FieldOptionAction.delete,
           ],
-          onOptionValuesChanged: (newFieldOptionValues) {
+          onOptionValuesChanged: (fieldOptionValues) async {
+            await fieldService.updateField(name: fieldOptionValues.name);
+
+            await FieldBackendService.updateFieldType(
+              viewId: widget.viewId,
+              fieldId: widget.field.id,
+              fieldType: fieldOptionValues.type,
+            );
+
+            final data = fieldOptionValues.getTypeOptionData();
+            if (data != null) {
+              await FieldBackendService.updateFieldTypeOption(
+                viewId: widget.viewId,
+                fieldId: widget.field.id,
+                typeOptionData: data,
+              );
+            }
             setState(() {
-              _fieldOptionValues = newFieldOptionValues;
+              _fieldOptionValues = fieldOptionValues;
             });
           },
           onAction: (action) {

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart

@@ -29,20 +29,17 @@ const mobileSupportedFieldTypes = [
   FieldType.Checklist,
 ];
 
-/// Shows the field type grid and upon selection, allow users to edit the
+Future<FieldType?> showFieldTypeGridBottomSheet(
-/// field's properties and saving it when the user clicks save.
+  BuildContext context, {
-void showCreateFieldBottomSheet(
+  required String title,
-  BuildContext context,
-  String viewId, {
-  OrderObjectPositionPB? position,
 }) {
-  showMobileBottomSheet(
+  return showMobileBottomSheet<FieldType>(
     context,
     showHeader: true,
     showDragHandle: true,
     showCloseButton: true,
     elevation: 20,
-    title: LocaleKeys.grid_field_newProperty.tr(),
+    title: title,
     backgroundColor: Theme.of(context).colorScheme.surface,
     enableDraggableScrollable: true,
     builder: (context) {
@@ -53,24 +50,8 @@ void showCreateFieldBottomSheet(
               backgroundColor: fieldType.mobileIconBackgroundColor,
               text: fieldType.i18n,
               icon: fieldType.svgData,
-              onTap: (_, fieldType) async {
+              onTap: (context, fieldType) =>
-                final optionValues = await context.push<FieldOptionValues>(
+                  Navigator.of(context).pop(fieldType),
-                  Uri(
-                    path: MobileNewPropertyScreen.routeName,
-                    queryParameters: {
-                      MobileNewPropertyScreen.argViewId: viewId,
-                      MobileNewPropertyScreen.argFieldTypeId:
-                          fieldType.value.toString(),
-                    },
-                  ).toString(),
-                );
-                if (optionValues != null) {
-                  await optionValues.create(viewId: viewId, position: position);
-                  if (context.mounted) {
-                    context.pop();
-                  }
-                }
-              },
             ),
           )
           .toList();
@@ -85,6 +66,37 @@ void showCreateFieldBottomSheet(
   );
 }
 
+/// Shows the field type grid and upon selection, allow users to edit the
+/// field's properties and saving it when the user clicks save.
+void mobileCreateFieldWorkflow(
+  BuildContext context,
+  String viewId, {
+  OrderObjectPositionPB? position,
+}) async {
+  final fieldType = await showFieldTypeGridBottomSheet(
+    context,
+    title: LocaleKeys.grid_field_newProperty.tr(),
+  );
+  if (fieldType == null || !context.mounted) {
+    return;
+  }
+  final optionValues = await context.push<FieldOptionValues>(
+    Uri(
+      path: MobileNewPropertyScreen.routeName,
+      queryParameters: {
+        MobileNewPropertyScreen.argViewId: viewId,
+        MobileNewPropertyScreen.argFieldTypeId: fieldType.value.toString(),
+      },
+    ).toString(),
+  );
+  if (optionValues != null) {
+    await optionValues.create(viewId: viewId, position: position);
+  }
+  if (context.mounted) {
+    context.pop();
+  }
+}
+
 /// Used to edit a field.
 Future<FieldOptionValues?> showEditFieldScreen(
   BuildContext context,
@@ -104,6 +116,7 @@ Future<FieldOptionValues?> showEditFieldScreen(
 void showQuickEditField(
   BuildContext context,
   String viewId,
+  FieldController fieldController,
   FieldInfo fieldInfo,
 ) {
   showMobileBottomSheet(
@@ -114,6 +127,7 @@ void showQuickEditField(
       return SingleChildScrollView(
         child: QuickEditField(
           viewId: viewId,
+          fieldController: fieldController,
           fieldInfo: fieldInfo,
         ),
       );

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_full_field_editor.dart

@@ -5,7 +5,6 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/base/flowy_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/base/option_color_list.dart';
-import 'package:appflowy/mobile/presentation/base/type_option_menu_item.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
@@ -14,7 +13,6 @@ import 'package:appflowy/plugins/database/domain/field_service.dart';
 import 'package:appflowy/plugins/database/application/field/type_option/number_format_bloc.dart';
 import 'package:appflowy/plugins/database/grid/presentation/widgets/header/type_option/date/date_time_format.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:collection/collection.dart';
@@ -223,6 +221,18 @@ class _MobileFieldEditorState extends State<MobileFieldEditor> {
                 isFieldNameChanged = true;
                 _updateOptionValues(name: value);
               },
+              onFieldTypeChanged: (type) {
+                setState(
+                  () {
+                    if (widget.mode == FieldOptionMode.add &&
+                        !isFieldNameChanged) {
+                      controller.text = type.i18n;
+                      _updateOptionValues(name: type.i18n);
+                    }
+                    _updateOptionValues(type: type);
+                  },
+                );
+              },
             ),
             const _Divider(),
             if (!widget.isPrimary) ...[
@@ -444,40 +454,14 @@ class _PropertyType extends StatelessWidget {
           ),
         ],
       ),
-      onTap: () {
+      onTap: () async {
-        showMobileBottomSheet(
+        final fieldType = await showFieldTypeGridBottomSheet(
           context,
-          showHeader: true,
-          showDragHandle: true,
-          showCloseButton: true,
-          elevation: 20,
           title: LocaleKeys.grid_field_editProperty.tr(),
-          backgroundColor: Theme.of(context).colorScheme.surface,
-          enableDraggableScrollable: true,
-          builder: (context) {
-            final typeOptionMenuItemValue = mobileSupportedFieldTypes
-                .map(
-                  (fieldType) => TypeOptionMenuItemValue(
-                    value: fieldType,
-                    backgroundColor: fieldType.mobileIconBackgroundColor,
-                    text: fieldType.i18n,
-                    icon: fieldType.svgData,
-                    onTap: (_, fieldType) {
-                      onSelected(fieldType);
-                      context.pop();
-                    },
-                  ),
-                )
-                .toList();
-            return Padding(
-              padding: EdgeInsets.all(16 * context.scale),
-              child: TypeOptionMenu<FieldType>(
-                values: typeOptionMenuItemValue,
-                scaleFactor: context.scale,
-              ),
-            );
-          },
         );
+        if (fieldType != null) {
+          onSelected(fieldType);
+        }
       },
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_quick_field_editor.dart

@@ -2,27 +2,29 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart';
 import 'package:appflowy/mobile/presentation/database/field/mobile_field_bottom_sheets.dart';
-import 'package:appflowy/mobile/presentation/database/field/mobile_full_field_editor.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
+import 'package:appflowy/plugins/database/application/field/field_controller.dart';
+import 'package:appflowy/plugins/database/application/field/field_editor_bloc.dart';
 import 'package:appflowy/plugins/database/domain/field_backend_service.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
-import 'package:appflowy/plugins/database/domain/field_service.dart';
 import 'package:appflowy/plugins/database/widgets/setting/field_visibility_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
-import 'package:protobuf/protobuf.dart' hide FieldInfo;
 
 class QuickEditField extends StatefulWidget {
   const QuickEditField({
     super.key,
     required this.viewId,
+    required this.fieldController,
     required this.fieldInfo,
   });
 
   final String viewId;
+  final FieldController fieldController;
   final FieldInfo fieldInfo;
 
   @override
@@ -38,14 +40,10 @@ class _QuickEditFieldState extends State<QuickEditField> {
   );
 
   late FieldVisibility fieldVisibility;
-  late FieldOptionValues _fieldOptionValues;
 
   @override
   void initState() {
     super.initState();
-
-    _fieldOptionValues =
-        FieldOptionValues.fromField(field: widget.fieldInfo.field);
     fieldVisibility = widget.fieldInfo.fieldSettings?.visibility ??
         FieldVisibility.AlwaysShown;
     controller.text = widget.fieldInfo.field.name;
@@ -59,140 +57,125 @@ class _QuickEditFieldState extends State<QuickEditField> {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return BlocProvider(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      create: (_) => FieldEditorBloc(
-      children: [
+        viewId: widget.viewId,
-        const VSpace(16),
+        fieldController: widget.fieldController,
-        OptionTextField(
+        field: widget.fieldInfo.field,
-          controller: controller,
+      )..add(const FieldEditorEvent.initial()),
-          type: _fieldOptionValues.type,
+      child: BlocConsumer<FieldEditorBloc, FieldEditorState>(
-          onTextChanged: (text) async {
+        listenWhen: (previous, current) =>
-            await service.updateName(text);
+            previous.field.name != current.field.name,
-          },
+        listener: (context, state) => controller.text = state.field.name,
-        ),
+        builder: (context, state) {
-        const _Divider(),
+          return Column(
-        FlowyOptionTile.text(
+            crossAxisAlignment: CrossAxisAlignment.start,
-          text: LocaleKeys.grid_field_editProperty.tr(),
+            children: [
-          leftIcon: const FlowySvg(FlowySvgs.m_field_edit_s),
+              const VSpace(16),
-          onTap: () async {
+              OptionTextField(
-            widget.fieldInfo.field.freeze();
+                controller: controller,
-            final field = widget.fieldInfo.field.rebuild((field) {
+                type: state.field.fieldType,
-              field.name = controller.text;
+                onTextChanged: (text) {
-              field.fieldType = _fieldOptionValues.type;
+                  context
-              field.typeOptionData =
+                      .read<FieldEditorBloc>()
-                  _fieldOptionValues.getTypeOptionData() ?? [];
+                      .add(FieldEditorEvent.renameField(text));
-            });
+                },
-            final fieldOptionValues = await showEditFieldScreen(
+                onFieldTypeChanged: (fieldType) {
-              context,
+                  context
-              widget.viewId,
+                      .read<FieldEditorBloc>()
-              widget.fieldInfo.copyWith(field: field),
+                      .add(FieldEditorEvent.switchFieldType(fieldType));
-            );
+                },
-            if (fieldOptionValues != null) {
-              if (fieldOptionValues.name != _fieldOptionValues.name) {
-                await service.updateName(fieldOptionValues.name);
-              }
-
-              if (fieldOptionValues.type != _fieldOptionValues.type) {
-                await FieldBackendService.updateFieldType(
-                  viewId: widget.viewId,
-                  fieldId: widget.fieldInfo.id,
-                  fieldType: fieldOptionValues.type,
-                );
-              }
-
-              final data = fieldOptionValues.getTypeOptionData();
-              if (data != null) {
-                await FieldBackendService.updateFieldTypeOption(
-                  viewId: widget.viewId,
-                  fieldId: widget.fieldInfo.id,
-                  typeOptionData: data,
-                );
-              }
-              setState(() {
-                _fieldOptionValues = fieldOptionValues;
-                controller.text = fieldOptionValues.name;
-              });
-            } else {
-              if (context.mounted) {
-                context.pop();
-              }
-            }
-          },
-        ),
-        if (!widget.fieldInfo.isPrimary)
-          FlowyOptionTile.text(
-            showTopBorder: false,
-            text: fieldVisibility.isVisibleState()
-                ? LocaleKeys.grid_field_hide.tr()
-                : LocaleKeys.grid_field_show.tr(),
-            leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s),
-            onTap: () async {
-              context.pop();
-              if (fieldVisibility.isVisibleState()) {
-                await service.hide();
-              } else {
-                await service.hide();
-              }
-            },
-          ),
-        if (!widget.fieldInfo.isPrimary)
-          FlowyOptionTile.text(
-            showTopBorder: false,
-            text: LocaleKeys.grid_field_insertLeft.tr(),
-            leftIcon: const FlowySvg(FlowySvgs.m_filed_insert_left_s),
-            onTap: () async {
-              context.pop();
-              showCreateFieldBottomSheet(
-                context,
-                widget.viewId,
-                position: OrderObjectPositionPB(
-                  position: OrderObjectPositionTypePB.Before,
-                  objectId: widget.fieldInfo.id,
-                ),
-              );
-            },
-          ),
-        FlowyOptionTile.text(
-          showTopBorder: false,
-          text: LocaleKeys.grid_field_insertRight.tr(),
-          leftIcon: const FlowySvg(FlowySvgs.m_filed_insert_right_s),
-          onTap: () async {
-            context.pop();
-            showCreateFieldBottomSheet(
-              context,
-              widget.viewId,
-              position: OrderObjectPositionPB(
-                position: OrderObjectPositionTypePB.After,
-                objectId: widget.fieldInfo.id,
               ),
-            );
+              const _Divider(),
-          },
+              FlowyOptionTile.text(
-        ),
+                text: LocaleKeys.grid_field_editProperty.tr(),
-        if (!widget.fieldInfo.isPrimary) ...[
+                leftIcon: const FlowySvg(FlowySvgs.m_field_edit_s),
-          FlowyOptionTile.text(
+                onTap: () {
-            showTopBorder: false,
+                  showEditFieldScreen(
-            text: LocaleKeys.button_duplicate.tr(),
+                    context,
-            leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s),
+                    widget.viewId,
-            onTap: () async {
+                    state.field,
-              context.pop();
+                  );
-              await service.duplicate();
+                  context.pop();
-            },
+                },
-          ),
+              ),
-          FlowyOptionTile.text(
+              if (!widget.fieldInfo.isPrimary)
-            showTopBorder: false,
+                FlowyOptionTile.text(
-            text: LocaleKeys.button_delete.tr(),
+                  showTopBorder: false,
-            textColor: Theme.of(context).colorScheme.error,
+                  text: fieldVisibility.isVisibleState()
-            leftIcon: FlowySvg(
+                      ? LocaleKeys.grid_field_hide.tr()
-              FlowySvgs.m_field_delete_s,
+                      : LocaleKeys.grid_field_show.tr(),
-              color: Theme.of(context).colorScheme.error,
+                  leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s),
-            ),
+                  onTap: () async {
-            onTap: () async {
+                    context.pop();
-              context.pop();
+                    if (fieldVisibility.isVisibleState()) {
-              await service.delete();
+                      await service.hide();
-            },
+                    } else {
-          ),
+                      await service.hide();
-        ],
+                    }
-      ],
+                  },
+                ),
+              if (!widget.fieldInfo.isPrimary)
+                FlowyOptionTile.text(
+                  showTopBorder: false,
+                  text: LocaleKeys.grid_field_insertLeft.tr(),
+                  leftIcon: const FlowySvg(FlowySvgs.m_filed_insert_left_s),
+                  onTap: () {
+                    context.pop();
+                    mobileCreateFieldWorkflow(
+                      context,
+                      widget.viewId,
+                      position: OrderObjectPositionPB(
+                        position: OrderObjectPositionTypePB.Before,
+                        objectId: widget.fieldInfo.id,
+                      ),
+                    );
+                  },
+                ),
+              FlowyOptionTile.text(
+                showTopBorder: false,
+                text: LocaleKeys.grid_field_insertRight.tr(),
+                leftIcon: const FlowySvg(FlowySvgs.m_filed_insert_right_s),
+                onTap: () {
+                  context.pop();
+                  mobileCreateFieldWorkflow(
+                    context,
+                    widget.viewId,
+                    position: OrderObjectPositionPB(
+                      position: OrderObjectPositionTypePB.After,
+                      objectId: widget.fieldInfo.id,
+                    ),
+                  );
+                },
+              ),
+              if (!widget.fieldInfo.isPrimary) ...[
+                FlowyOptionTile.text(
+                  showTopBorder: false,
+                  text: LocaleKeys.button_duplicate.tr(),
+                  leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s),
+                  onTap: () {
+                    context.pop();
+                    service.duplicate();
+                  },
+                ),
+                FlowyOptionTile.text(
+                  showTopBorder: false,
+                  text: LocaleKeys.button_delete.tr(),
+                  textColor: Theme.of(context).colorScheme.error,
+                  leftIcon: FlowySvg(
+                    FlowySvgs.m_field_delete_s,
+                    color: Theme.of(context).colorScheme.error,
+                  ),
+                  onTap: () {
+                    context.pop();
+                    service.delete();
+                  },
+                ),
+              ],
+            ],
+          );
+        },
+      ),
     );
   }
 }

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_field_list.dart

@@ -213,7 +213,7 @@ class _NewDatabaseFieldTile extends StatelessWidget {
         color: Theme.of(context).hintColor,
       ),
       textColor: Theme.of(context).hintColor,
-      onTap: () => showCreateFieldBottomSheet(context, viewId),
+      onTap: () => mobileCreateFieldWorkflow(context, viewId),
     );
   }
 }

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart

@@ -30,10 +30,9 @@ class MobileDatabaseViewQuickActions extends StatelessWidget {
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: [
-        _actionButton(context, _Action.edit, () {
+        _actionButton(context, _Action.edit, () async {
           final bloc = context.read<ViewBloc>();
-          context.pop();
+          await showTransitionMobileBottomSheet(
-          showTransitionMobileBottomSheet(
             context,
             showHeader: true,
             showDoneButton: true,
@@ -45,6 +44,9 @@ class MobileDatabaseViewQuickActions extends StatelessWidget {
               ),
             ),
           );
+          if (context.mounted) {
+            context.pop();
+          }
         }),
         _divider(),
         _actionButton(

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_field_button.dart

@@ -38,7 +38,8 @@ class MobileFieldButton extends StatelessWidget {
       width: 200,
       decoration: _getDecoration(context),
       child: FlowyButton(
-        onTap: () => showQuickEditField(context, viewId, fieldInfo),
+        onTap: () =>
+            showQuickEditField(context, viewId, fieldController, fieldInfo),
         radius: radius,
         margin: margin,
         leftIconSize: const Size.square(18),

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart

@@ -182,7 +182,7 @@ class _CreateFieldButtonState extends State<CreateFieldButton> {
           color: Theme.of(context).hintColor,
         ),
         hoverColor: AFThemeExtension.of(context).greyHover,
-        onTap: () => showCreateFieldBottomSheet(context, widget.viewId),
+        onTap: () => mobileCreateFieldWorkflow(context, widget.viewId),
         leftIconSize: const Size.square(18),
         leftIcon: FlowySvg(
           FlowySvgs.add_s,

frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart

@@ -26,7 +26,7 @@ class _MobileTabBarHeaderState extends State<MobileTabBarHeader> {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 14),
+      padding: const EdgeInsets.only(top: 14.0),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [