feat: Customize Font Size In AppFlowy #1479

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

@@ -3,52 +3,73 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:provider/provider.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:tuple/tuple.dart';
 
 class FontSizeSwitcher extends StatefulWidget {
   const FontSizeSwitcher({
     super.key,
-    // required this.documentStyle,
   });
 
-  // final DocumentStyle documentStyle;
-
   @override
   State<FontSizeSwitcher> createState() => _FontSizeSwitcherState();
 }
 
 class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
+  final _selectedFontSizes = [false, true, false];
+  final List<Tuple2<String, double>> _fontSizes = [
+    Tuple2(LocaleKeys.moreAction_small.tr(), 12.0),
+    Tuple2(LocaleKeys.moreAction_medium.tr(), 14.0),
+    Tuple2(LocaleKeys.moreAction_large.tr(), 18.0),
+  ];
+
   @override
   Widget build(BuildContext context) {
     return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        const FlowyText.semibold(LocaleKeys.moreAction_fontSize),
+        FlowyText.semibold(
-        Row(
+          LocaleKeys.moreAction_fontSize.tr(),
-          crossAxisAlignment: CrossAxisAlignment.center,
+          fontSize: 12,
-          mainAxisAlignment: MainAxisAlignment.center,
+        ),
-          children: [
+        const SizedBox(
-            _buildFontSizeSwitchButton(LocaleKeys.moreAction_small, 12.0),
+          height: 5,
-            _buildFontSizeSwitchButton(LocaleKeys.moreAction_medium, 14.0),
+        ),
-            _buildFontSizeSwitchButton(LocaleKeys.moreAction_large, 18.0),
+        ToggleButtons(
+          isSelected: _selectedFontSizes,
+          onPressed: (int index) {
+            setState(() {
+              for (int i = 0; i < _selectedFontSizes.length; i++) {
+                _selectedFontSizes[i] = i == index;
+              }
+              context.read<DocumentStyle>().fontSize = _fontSizes[index].item2;
+            });
+          },
+          borderRadius: const BorderRadius.all(Radius.circular(5)),
+          selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
+          selectedColor: Theme.of(context).colorScheme.onSurface,
+          fillColor: Theme.of(context).colorScheme.primaryContainer,
+          color: Theme.of(context).hintColor,
+          constraints: const BoxConstraints(
+            minHeight: 40.0,
+            minWidth: 80.0,
+          ),
+          children: const [
+            Text(
+              'small',
+              style: TextStyle(fontSize: 12),
+            ),
+            Text(
+              'medium',
+              style: TextStyle(fontSize: 14),
+            ),
+            Text(
+              'large',
+              style: TextStyle(fontSize: 18),
+            )
           ],
         )
       ],
     );
   }
-
-  Widget _buildFontSizeSwitchButton(String name, double fontSize) {
-    return Center(
-      child: TextButton(
-        onPressed: () {
-          final x = Provider.of<DocumentStyle>(context, listen: false);
-          x;
-          Provider.of<DocumentStyle>(context, listen: false).fontSize =
-              fontSize;
-        },
-        child: Text(
-          name,
-          style: TextStyle(fontSize: fontSize),
-        ),
-      ),
-    );
-  }
 }

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

@@ -1,6 +1,8 @@
+import 'package:app_flowy/plugins/document/document.dart';
 import 'package:app_flowy/plugins/document/presentation/more/font_size_switcher.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class DocumentMoreButton extends StatelessWidget {
   const DocumentMoreButton({
@@ -13,14 +15,16 @@ class DocumentMoreButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return PopupMenuButton<int>(
+      offset: const Offset(0, 30),
       itemBuilder: (context) {
         return [
-          const PopupMenuItem(
+          PopupMenuItem(
             value: 1,
             enabled: false,
-            child: FontSizeSwitcher(
+            child: ChangeNotifierProvider.value(
-                // documentStyle: documentStyle,
+              value: context.read<DocumentStyle>(),
-                ),
+              child: const FontSizeSwitcher(),
+            ),
           )
         ];
       },