From 5c4f4abab25fbdf901478c6431eb2fe19a02dded Mon Sep 17 00:00:00 2001
From: Johan Sutrisno <johansutrisno30@gmail.com>
Date: Mon, 6 Nov 2023 01:46:52 +0700
Subject: [PATCH] feat: Checkbox unresponsive in custom Theme example in editor
 example app (#543)

* feat: checkbox unresponsive custom theme example

* fix: resolve feedback

* fix: change inkwell to gesture detector

---------

Co-authored-by: Johan Sutrisno <johan@zero-one-group.com>
---
 .../lib/pages/customize_theme_for_editor.dart | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/example/lib/pages/customize_theme_for_editor.dart b/example/lib/pages/customize_theme_for_editor.dart
index a79fd3fbc..dacc06b0e 100644
--- a/example/lib/pages/customize_theme_for_editor.dart
+++ b/example/lib/pages/customize_theme_for_editor.dart
@@ -63,7 +63,7 @@ class _CustomizeThemeForEditorState extends State<CustomizeThemeForEditor> {
       child: AppFlowyEditor(
         editorState: editorState,
         editorStyle: customizeEditorStyle(),
-        blockComponentBuilders: customBuilder(),
+        blockComponentBuilders: customBuilder(editorState),
         header: Image.asset(
           'assets/images/header.png',
           height: 200,
@@ -74,7 +74,9 @@ class _CustomizeThemeForEditorState extends State<CustomizeThemeForEditor> {
   }
 
   /// custom the block style
-  Map<String, BlockComponentBuilder> customBuilder() {
+  Map<String, BlockComponentBuilder> customBuilder(
+    EditorState editorState,
+  ) {
     final configuration = BlockComponentConfiguration(
       padding: (node) {
         if (HeadingBlockKeys.type == node.type) {
@@ -102,10 +104,16 @@ class _CustomizeThemeForEditorState extends State<CustomizeThemeForEditor> {
         configuration: configuration,
         iconBuilder: (context, node) {
           final checked = node.attributes[TodoListBlockKeys.checked] as bool;
-          return Icon(
-            checked ? Icons.check_box : Icons.check_box_outline_blank,
-            size: 20,
-            color: Colors.white,
+          return GestureDetector(
+            onTap: () => editorState.apply(
+              editorState.transaction
+                ..updateNode(node, {TodoListBlockKeys.checked: !checked}),
+            ),
+            child: Icon(
+              checked ? Icons.check_box : Icons.check_box_outline_blank,
+              size: 20,
+              color: Colors.white,
+            ),
           );
         },
       ),