fix: font size text being displayed out of range. (#3766)

* fix: font size text being displayed out of range.

* chore: refactor code

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart

@@ -1,10 +1,13 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
+import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:easy_localization/easy_localization.dart';
+
+typedef _FontSizeSelection = (String, double, bool);
 
 class FontSizeSwitcher extends StatefulWidget {
   const FontSizeSwitcher({
@@ -16,12 +19,21 @@ class FontSizeSwitcher extends StatefulWidget {
 }
 
 class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
-  final List<(String, double, bool)> _fontSizes = [
+  final List<_FontSizeSelection> _fontSizes = [
     (LocaleKeys.moreAction_small.tr(), 14.0, false),
     (LocaleKeys.moreAction_medium.tr(), 18.0, true),
     (LocaleKeys.moreAction_large.tr(), 22.0, false),
   ];
 
+  _FontSizeSelection? _selection;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _selection = _fontSizes.firstWhereOrNull((element) => element.$3);
+  }
+
   @override
   Widget build(BuildContext context) {
     final selectedBgColor = AFThemeExtension.of(context).toggleButtonBGColor;
@@ -39,34 +51,38 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
             const SizedBox(
               height: 5,
             ),
-            ToggleButtons(
+            SegmentedButton<_FontSizeSelection>(
-              isSelected:
+              showSelectedIcon: false,
-                  _fontSizes.map((e) => e.$2 == state.fontSize).toList(),
+              style: TextButton.styleFrom(
-              onPressed: (int index) {
+                foregroundColor: foregroundColor,
-                _updateSelectedFontSize(_fontSizes[index].$2);
+                shadowColor: selectedBgColor.withOpacity(0.3),
-              },
+                padding: const EdgeInsets.all(16),
+                side: BorderSide(
+                  width: 0.5,
                   color: foregroundColor,
-              borderRadius: const BorderRadius.all(Radius.circular(5)),
-              borderColor: foregroundColor,
-              borderWidth: 0.5,
-              // when selected
-              selectedColor: foregroundColor,
-              selectedBorderColor: foregroundColor,
-              fillColor: selectedBgColor,
-              // when hover
-              hoverColor: selectedBgColor.withOpacity(0.3),
-              constraints: const BoxConstraints(
-                minHeight: 40.0,
-                minWidth: 80.0,
                 ),
-              children: _fontSizes
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(5),
+                ),
+              ),
+              segments: _fontSizes
                   .map(
-                    (e) => Text(
+                    (e) => ButtonSegment(
+                      value: e,
+                      label: FlowyText(
                         e.$1,
-                      style: TextStyle(fontSize: e.$2),
+                        fontSize: e.$2,
+                      ),
                     ),
                   )
                   .toList(),
+              selected: {
+                _selection ?? _fontSizes.first,
+              },
+              onSelectionChanged: (Set<(String, double, bool)> newSelection) {
+                _selection = newSelection.firstOrNull;
+                _updateSelectedFontSize(newSelection.first.$2);
+              },
             ),
           ],
         );

frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy/plugins/document/presentation/more/font_size_switcher.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -14,21 +15,9 @@ class DocumentMoreButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return PopupMenuButton<int>(
+    return AppFlowyPopover(
-      color: Theme.of(context).colorScheme.surfaceVariant,
+      constraints: const BoxConstraints(maxWidth: 400, maxHeight: 320),
       offset: const Offset(0, 30),
-      itemBuilder: (context) {
-        return [
-          PopupMenuItem(
-            value: 1,
-            enabled: false,
-            child: BlocProvider.value(
-              value: context.read<DocumentAppearanceCubit>(),
-              child: const FontSizeSwitcher(),
-            ),
-          ),
-        ];
-      },
       child: FlowyTooltip(
         message: LocaleKeys.moreAction_moreOptions.tr(),
         child: FlowySvg(
@@ -37,6 +26,20 @@ class DocumentMoreButton extends StatelessWidget {
           color: Theme.of(context).iconTheme.color,
         ),
       ),
+      popupBuilder: (context) {
+        return Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              BlocProvider.value(
+                value: context.read<DocumentAppearanceCubit>(),
+                child: const FontSizeSwitcher(),
+              )
+            ],
+          ),
+        );
+      },
     );
   }
 }