feat: convert provider to cubit #1479

frontend/app_flowy/lib/plugins/document/document.dart

@@ -2,6 +2,7 @@ library document_plugin;
 
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/document/document_page.dart';
+import 'package:app_flowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:app_flowy/plugins/document/presentation/more/more_button.dart';
 import 'package:app_flowy/plugins/document/presentation/share/share_button.dart';
 import 'package:app_flowy/plugins/util.dart';
@@ -11,8 +12,7 @@ import 'package:app_flowy/workspace/presentation/widgets/left_bar_item.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:shared_preferences/shared_preferences.dart';
 
 class DocumentPluginBuilder extends PluginBuilder {
   @override
@@ -37,27 +37,9 @@ class DocumentPluginBuilder extends PluginBuilder {
   ViewDataFormatPB get dataFormatType => ViewDataFormatPB.TreeFormat;
 }
 
-class DocumentStyle with ChangeNotifier {
-  DocumentStyle() {
-    sync();
-  }
-
-  double _fontSize = 14.0;
-  double get fontSize => _fontSize;
-  set fontSize(double fontSize) {
-    _fontSize = fontSize;
-    notifyListeners();
-  }
-
-  void sync() async {
-    final prefs = await SharedPreferences.getInstance();
-    fontSize = prefs.getDouble('kSelectFontSize') ?? _fontSize;
-  }
-}
-
 class DocumentPlugin extends Plugin<int> {
   late PluginType _pluginType;
-  late final DocumentStyle _documentStyle;
+  late final DocumentAppearanceCubit _documentAppearanceCubit;
 
   @override
   final ViewPluginNotifier notifier;
@@ -68,12 +50,12 @@ class DocumentPlugin extends Plugin<int> {
     Key? key,
   }) : notifier = ViewPluginNotifier(view: view) {
     _pluginType = pluginType;
-    _documentStyle = DocumentStyle();
+    _documentAppearanceCubit = DocumentAppearanceCubit();
   }
 
   @override
   void dispose() {
-    _documentStyle.dispose();
+    _documentAppearanceCubit.close();
     super.dispose();
   }
 
@@ -81,7 +63,7 @@ class DocumentPlugin extends Plugin<int> {
   PluginDisplay get display {
     return DocumentPluginDisplay(
       notifier: notifier,
-      documentStyle: _documentStyle,
+      documentAppearanceCubit: _documentAppearanceCubit,
     );
   }
 
@@ -96,11 +78,11 @@ class DocumentPluginDisplay extends PluginDisplay with NavigationItem {
   final ViewPluginNotifier notifier;
   ViewPB get view => notifier.view;
   int? deletedViewIndex;
-  DocumentStyle documentStyle;
+  DocumentAppearanceCubit documentAppearanceCubit;
 
   DocumentPluginDisplay({
     required this.notifier,
-    required this.documentStyle,
+    required this.documentAppearanceCubit,
     Key? key,
   });
 
@@ -114,12 +96,16 @@ class DocumentPluginDisplay extends PluginDisplay with NavigationItem {
       });
     });
 
-    return ChangeNotifierProvider.value(
+    return BlocProvider.value(
-      value: documentStyle,
+      value: documentAppearanceCubit,
-      child: DocumentPage(
+      child: BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
-        view: view,
+        builder: (_, state) {
-        onDeleted: () => context.onDeleted(view, deletedViewIndex),
+          return DocumentPage(
-        key: ValueKey(view.id),
+            view: view,
+            onDeleted: () => context.onDeleted(view, deletedViewIndex),
+            key: ValueKey(view.id),
+          );
+        },
       ),
     );
   }
@@ -133,8 +119,8 @@ class DocumentPluginDisplay extends PluginDisplay with NavigationItem {
       children: [
         DocumentShareButton(view: view),
         const SizedBox(width: 10),
-        ChangeNotifierProvider.value(
+        BlocProvider.value(
-          value: documentStyle,
+          value: documentAppearanceCubit,
           child: const DocumentMoreButton(),
         ),
       ],

frontend/app_flowy/lib/plugins/document/editor_styles.dart

@@ -1,10 +1,11 @@
-import 'package:app_flowy/plugins/document/document.dart';
+import 'package:app_flowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 EditorStyle customEditorTheme(BuildContext context) {
-  final documentStyle = context.watch<DocumentStyle>();
+  final documentStyle =
+      context.watch<DocumentAppearanceCubit>().documentAppearance;
   var editorStyle = Theme.of(context).brightness == Brightness.dark
       ? EditorStyle.dark
       : EditorStyle.light;
@@ -27,7 +28,8 @@ EditorStyle customEditorTheme(BuildContext context) {
 }
 
 Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
-  final documentStyle = context.watch<DocumentStyle>();
+  final documentStyle =
+      context.watch<DocumentAppearanceCubit>().documentAppearance;
   final baseFontSize = documentStyle.fontSize;
   const basePadding = 12.0;
   var headingPluginStyle = Theme.of(context).brightness == Brightness.dark

frontend/app_flowy/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart

@@ -0,0 +1,42 @@
+import 'package:bloc/bloc.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+const String _kDocumentAppearenceFontSize = 'kDocumentAppearenceFontSize';
+
+class DocumentAppearance {
+  const DocumentAppearance({
+    required this.fontSize,
+  });
+
+  final double fontSize;
+  // Will be supported...
+  // final String fontName;
+
+  DocumentAppearance copyWith({double? fontSize}) {
+    return DocumentAppearance(
+      fontSize: fontSize ?? this.fontSize,
+    );
+  }
+}
+
+class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
+  DocumentAppearanceCubit() : super(const DocumentAppearance(fontSize: 14.0)) {
+    fetch();
+  }
+
+  late DocumentAppearance documentAppearance;
+
+  void fetch() async {
+    final prefs = await SharedPreferences.getInstance();
+    final fontSize = prefs.getDouble(_kDocumentAppearenceFontSize) ?? 14.0;
+    documentAppearance = DocumentAppearance(fontSize: fontSize);
+    emit(documentAppearance);
+  }
+
+  void sync(DocumentAppearance documentAppearance) async {
+    final prefs = await SharedPreferences.getInstance();
+    prefs.setDouble(_kDocumentAppearenceFontSize, documentAppearance.fontSize);
+    this.documentAppearance = documentAppearance;
+    emit(documentAppearance);
+  }
+}

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

@@ -1,9 +1,8 @@
-import 'package:app_flowy/plugins/document/document.dart';
+import 'package:app_flowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 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:shared_preferences/shared_preferences.dart';
 import 'package:tuple/tuple.dart';
 import 'package:easy_localization/easy_localization.dart';
 
@@ -16,8 +15,6 @@ class FontSizeSwitcher extends StatefulWidget {
   State<FontSizeSwitcher> createState() => _FontSizeSwitcherState();
 }
 
-const String _kSelectFontSize = 'kSelectFontSize';
-
 class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
   final List<bool> _selectedFontSizes = [false, true, false];
   final List<Tuple2<String, double>> _fontSizes = [
@@ -30,13 +27,10 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
   void initState() {
     super.initState();
 
-    SharedPreferences.getInstance().then((prefs) {
+    final fontSize =
-      final index = _fontSizes.indexWhere(
+        context.read<DocumentAppearanceCubit>().documentAppearance.fontSize;
-          (element) => element.item2 == prefs.getDouble(_kSelectFontSize));
+    final index = _fontSizes.indexWhere((element) => element.item2 == fontSize);
-      if (index != -1) {
+    _updateSelectedFontSize(index);
-        _updateSelectedFontSize(index);
-      }
-    });
   }
 
   @override
@@ -55,6 +49,7 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
           isSelected: _selectedFontSizes,
           onPressed: (int index) {
             _updateSelectedFontSize(index);
+            _sync(index);
           },
           borderRadius: const BorderRadius.all(Radius.circular(5)),
           selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
@@ -77,15 +72,18 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
   }
 
   void _updateSelectedFontSize(int index) {
-    final fontSize = _fontSizes[index].item2;
-    context.read<DocumentStyle>().fontSize = fontSize;
-    SharedPreferences.getInstance().then(
-      (prefs) => prefs.setDouble(_kSelectFontSize, fontSize),
-    );
     setState(() {
       for (int i = 0; i < _selectedFontSizes.length; i++) {
         _selectedFontSizes[i] = i == index;
       }
     });
   }
+
+  void _sync(int index) {
+    if (index < 0 || index >= _fontSizes.length) return;
+    final fontSize = _fontSizes[index].item2;
+    final cubit = context.read<DocumentAppearanceCubit>();
+    final documentAppearance = cubit.documentAppearance;
+    cubit.sync(documentAppearance.copyWith(fontSize: fontSize));
+  }
 }

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

@@ -1,17 +1,14 @@
-import 'package:app_flowy/plugins/document/document.dart';
+import 'package:app_flowy/plugins/document/presentation/more/cubit/document_appearance_cubit.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';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 class DocumentMoreButton extends StatelessWidget {
   const DocumentMoreButton({
     Key? key,
-    // required this.documentStyle,
   }) : super(key: key);
 
-  // final DocumentStyle documentStyle;
-
   @override
   Widget build(BuildContext context) {
     return PopupMenuButton<int>(
@@ -21,8 +18,8 @@ class DocumentMoreButton extends StatelessWidget {
           PopupMenuItem(
             value: 1,
             enabled: false,
-            child: ChangeNotifierProvider.value(
+            child: BlocProvider.value(
-              value: context.read<DocumentStyle>(),
+              value: context.read<DocumentAppearanceCubit>(),
               child: const FontSizeSwitcher(),
             ),
           )