[flutter]: customize checkbox style of quill editor

app_flowy/assets/images/editor/editor_check.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="12" height="12" rx="4" fill="#00BCF0"/>
+<path d="M6 8L7.61538 9.5L10.5 6.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app_flowy/assets/images/editor/editor_uncheck.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="2.5" width="11" height="11" rx="3.5" stroke="#BDBDBD"/>
+</svg>

app_flowy/lib/workspace/application/app/app_bloc.dart

@@ -75,7 +75,7 @@ class AppBloc extends Bloc<AppEvent, AppState> {
     AppState newState = state.copyWith(views: views);
     if (selectedView != null) {
       final index = views.indexWhere((element) => element.id == selectedView.id);
-      if (index != -1) {
+      if (index == -1) {
         newState = newState.copyWith(selectedView: null);
       }
     }

app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart

@@ -4,13 +4,15 @@ import 'package:provider/provider.dart';
 import 'package:tuple/tuple.dart';
 import 'package:flowy_infra/theme.dart';
 
+import 'widget/style_widgets/style_widgets.dart';
+
 DefaultStyles customStyles(BuildContext context) {
   const baseSpacing = Tuple2<double, double>(6, 0);
   final defaultTextStyle = DefaultTextStyle.of(context);
   final baseStyle = defaultTextStyle.style.copyWith(
     fontSize: 18,
     height: 1.3,
-    fontWeight: FontWeight.w400,
+    fontWeight: FontWeight.w300,
     letterSpacing: 0.6,
   );
   final theme = context.watch<AppTheme>();
@@ -72,7 +74,8 @@ DefaultStyles customStyles(BuildContext context) {
           const Tuple2(0, 0),
           const Tuple2(0, 0),
           null),
-      lists: DefaultTextBlockStyle(baseStyle, baseSpacing, const Tuple2(0, 6), null),
+      lists:
+          DefaultListBlockStyle(baseStyle, baseSpacing, const Tuple2(0, 6), null, StyleWidgetBuilder.checkbox(theme)),
       quote: DefaultTextBlockStyle(
           TextStyle(color: baseStyle.color!.withOpacity(0.6)),
           baseSpacing,

app_flowy/lib/workspace/presentation/stack_page/doc/widget/style_widgets/style_widgets.dart

@@ -0,0 +1,69 @@
+import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_quill/flutter_quill.dart';
+
+class StyleWidgetBuilder {
+  static QuillCheckboxBuilder checkbox(AppTheme theme) {
+    return EditorCheckboxBuilder(theme);
+  }
+}
+
+class EditorCheckboxBuilder extends QuillCheckboxBuilder {
+  final AppTheme theme;
+
+  EditorCheckboxBuilder(this.theme);
+
+  @override
+  Widget build({required BuildContext context, required bool isChecked, required void Function(bool? p1) onChanged}) {
+    return FlowyEditorCheckbox(
+      theme: theme,
+      isChecked: isChecked,
+      onChanged: onChanged,
+    );
+  }
+}
+
+class FlowyEditorCheckbox extends StatefulWidget {
+  final bool isChecked;
+  final void Function(bool? value) onChanged;
+  final AppTheme theme;
+  const FlowyEditorCheckbox({
+    required this.theme,
+    required this.isChecked,
+    required this.onChanged,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  _FlowyEditorCheckboxState createState() => _FlowyEditorCheckboxState();
+}
+
+class _FlowyEditorCheckboxState extends State<FlowyEditorCheckbox> {
+  late bool isChecked;
+
+  @override
+  void initState() {
+    isChecked = widget.isChecked;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final icon = isChecked ? svg('editor/editor_check') : svg('editor/editor_uncheck');
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: FlowyIconButton(
+        onPressed: () {
+          isChecked = !isChecked;
+          widget.onChanged(isChecked);
+          setState(() {});
+        },
+        iconPadding: EdgeInsets.zero,
+        icon: icon,
+        width: 23,
+      ),
+    );
+  }
+}

app_flowy/packages/flowy_infra_ui/example/pubspec.lock

@@ -14,7 +14,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.7.0"
+    version: "2.8.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -28,7 +28,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   charcode:
     dependency: transitive
     description:
@@ -125,6 +125,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  flutter_svg:
+    dependency: transitive
+    description:
+      name: flutter_svg
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.22.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -163,20 +170,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.1"
-  logger:
-    dependency: transitive
-    description:
-      name: logger
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.0.0"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10"
+    version: "0.12.11"
   meta:
     dependency: transitive
     description:
@@ -198,6 +198,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.5.1+1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.1"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.4.0"
   plugin_platform_interface:
     dependency: transitive
     description:
@@ -211,7 +232,7 @@ packages:
       name: provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "5.0.0"
+    version: "6.0.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -265,7 +286,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.1"
+    version: "0.4.3"
   textstyle_extensions:
     dependency: transitive
     description:
@@ -301,6 +322,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.3.1"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
+  dart: ">=2.14.0 <3.0.0"
   flutter: ">=2.0.0"

app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flowy_infra/image.dart';
 import 'package:flutter/material.dart';
 
@@ -12,9 +14,9 @@ class FlowyIconButton extends StatelessWidget {
 
   const FlowyIconButton({
     Key? key,
+    this.width = 30,
     this.height,
     this.onPressed,
-    this.width = 30,
     this.fillColor = Colors.transparent,
     this.hoverColor = Colors.transparent,
     this.iconPadding = EdgeInsets.zero,
@@ -34,9 +36,16 @@ class FlowyIconButton extends StatelessWidget {
     //     child: child,
     //   );
     // }
+    final size = Size(width, height ?? width);
+
+    assert(size.width > iconPadding.horizontal);
+    assert(size.height > iconPadding.vertical);
+
+    final childWidth = min(size.width - iconPadding.horizontal, size.height - iconPadding.vertical);
+    final childSize = Size(childWidth, childWidth);
 
     return ConstrainedBox(
-      constraints: BoxConstraints.tightFor(width: width, height: width),
+      constraints: BoxConstraints.tightFor(width: size.width, height: size.height),
       child: RawMaterialButton(
         visualDensity: VisualDensity.compact,
         hoverElevation: 0,
@@ -51,7 +60,7 @@ class FlowyIconButton extends StatelessWidget {
         onPressed: onPressed,
         child: Padding(
           padding: iconPadding,
-          child: SizedBox.fromSize(child: child, size: Size(width, width)),
+          child: SizedBox.fromSize(child: child, size: childSize),
         ),
       ),
     );

app_flowy/packages/flowy_infra_ui/pubspec.lock

@@ -14,7 +14,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.7.0"
+    version: "2.8.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -28,7 +28,7 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   charcode:
     dependency: transitive
     description:
@@ -111,6 +111,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  flutter_svg:
+    dependency: transitive
+    description:
+      name: flutter_svg
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.22.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -149,20 +156,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.1"
-  logger:
-    dependency: transitive
-    description:
-      name: logger
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.0.0"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10"
+    version: "0.12.11"
   meta:
     dependency: transitive
     description:
@@ -184,6 +184,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.5.1+1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.1"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.4.0"
   plugin_platform_interface:
     dependency: transitive
     description:
@@ -197,7 +218,7 @@ packages:
       name: provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "5.0.0"
+    version: "6.0.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -251,7 +272,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.1"
+    version: "0.4.3"
   textstyle_extensions:
     dependency: "direct main"
     description:
@@ -287,6 +308,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.3.1"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
+  dart: ">=2.14.0 <3.0.0"
   flutter: ">=2.0.0"