fix: title flash when resizing (#6481)

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_title.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/shared_context/shared_context.dart';
+import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy/shared/text_field/text_filed_with_metric_lines.dart';
 import 'package:appflowy/workspace/application/appearance_defaults.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
@@ -16,11 +17,9 @@ class CoverTitle extends StatelessWidget {
   const CoverTitle({
     super.key,
     required this.view,
-    required this.offset,
   });
 
   final ViewPB view;
-  final double offset;
 
   @override
   Widget build(BuildContext context) {
@@ -28,7 +27,6 @@ class CoverTitle extends StatelessWidget {
       create: (context) => ViewBloc(view: view)..add(const ViewEvent.initial()),
       child: _InnerCoverTitle(
         view: view,
-        offset: offset,
       ),
     );
   }
@@ -37,11 +35,9 @@ class CoverTitle extends StatelessWidget {
 class _InnerCoverTitle extends StatefulWidget {
   const _InnerCoverTitle({
     required this.view,
-    required this.offset,
   });
 
   final ViewPB view;
-  final double offset;
 
   @override
   State<_InnerCoverTitle> createState() => _InnerCoverTitleState();
@@ -50,6 +46,7 @@ class _InnerCoverTitle extends StatefulWidget {
 class _InnerCoverTitleState extends State<_InnerCoverTitle> {
   final titleTextController = TextEditingController();
   final titleFocusNode = FocusNode();
+
   late final editorContext = context.read<SharedEditorContext>();
   late final editorState = context.read<EditorState>();
   bool isTitleFocused = false;
@@ -99,12 +96,14 @@ class _InnerCoverTitleState extends State<_InnerCoverTitle> {
         .textTheme
         .bodyMedium!
         .copyWith(fontSize: 38.0, fontWeight: FontWeight.w700);
+    final width = context.read<DocumentAppearanceCubit>().state.width;
     return BlocConsumer<ViewBloc, ViewState>(
       listener: _onListen,
       builder: (context, state) {
         final appearance = context.read<DocumentAppearanceCubit>().state;
         return Container(
-          padding: EdgeInsets.symmetric(horizontal: widget.offset),
+          padding: EditorStyleCustomizer.documentPaddingWithOptionMenu,
+          constraints: BoxConstraints(maxWidth: width),
           child: Theme(
             data: Theme.of(context).copyWith(
               textSelectionTheme: TextSelectionThemeData(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart

@@ -168,38 +168,48 @@ class _DocumentCoverWidgetState extends State<DocumentCoverWidget> {
                     onChangeCover: (type, details) =>
                         _saveIconOrCover(cover: (type, details)),
                   ),
-                // don't render the icon if the offset is 0
-                if (hasIcon && offset != 0)
-                  Positioned(
-                    left: offset,
-                    // if hasCover, there shouldn't be icons present so the icon can
-                    // be closer to the bottom.
-                    bottom: hasCover
-                        ? kToolbarHeight - kIconHeight / 2
-                        : kToolbarHeight,
-                    child: DocumentIcon(
-                      editorState: widget.editorState,
-                      node: widget.node,
-                      icon: viewIcon,
-                      onChangeIcon: (icon) => _saveIconOrCover(icon: icon),
-                    ),
-                  ),
+                _buildCoverIcon(
+                  context,
+                  constraints,
+                  offset,
+                ),
               ],
             ),
-            if (offset != 0)
-              Padding(
-                padding: const EdgeInsets.only(bottom: 12.0),
-                child: CoverTitle(
-                  view: widget.view,
-                  offset: offset,
-                ),
+            Padding(
+              padding: const EdgeInsets.only(bottom: 12.0),
+              child: CoverTitle(
+                view: widget.view,
               ),
+            ),
           ],
         );
       },
     );
   }
 
+  Widget _buildCoverIcon(
+    BuildContext context,
+    BoxConstraints constraints,
+    double offset,
+  ) {
+    if (!hasIcon || offset == 0) {
+      return const SizedBox.shrink();
+    }
+
+    return Positioned(
+      // if hasCover, there shouldn't be icons present so the icon can
+      // be closer to the bottom.
+      left: offset,
+      bottom: hasCover ? kToolbarHeight - kIconHeight / 2 : kToolbarHeight,
+      child: DocumentIcon(
+        editorState: widget.editorState,
+        node: widget.node,
+        icon: viewIcon,
+        onChangeIcon: (icon) => _saveIconOrCover(icon: icon),
+      ),
+    );
+  }
+
   void _reload() => setState(() {});
 
   double _calculateIconLeft(BuildContext context, BoxConstraints constraints) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart

@@ -43,7 +43,15 @@ class EditorStyleCustomizer {
 
   static EdgeInsets get documentPadding => UniversalPlatform.isMobile
       ? const EdgeInsets.symmetric(horizontal: 24)
-      : const EdgeInsets.only(left: 40, right: 40 + 44);
+      : EdgeInsets.only(
+          left: 40,
+          right: 40 + EditorStyleCustomizer.optionMenuWidth,
+        );
+
+  static EdgeInsets get documentPaddingWithOptionMenu =>
+      documentPadding + EdgeInsets.only(left: optionMenuWidth);
+
+  static double get optionMenuWidth => UniversalPlatform.isMobile ? 0 : 44;
 
   EditorStyle style() {
     if (UniversalPlatform.isDesktopOrWeb) {