refactor: add documentation to card.dart

frontend/app_flowy/lib/plugins/board/presentation/card/board_cell.dart

@@ -23,7 +23,7 @@ class EditableRowNotifier {
   EditableRowNotifier({required bool isEditing})
       : isEditing = ValueNotifier(isEditing);
 
-  void insertCell(
+  void bindCell(
     GridCellIdentifier cellIdentifier,
     EditableCellNotifier notifier,
   ) {
@@ -59,7 +59,7 @@ class EditableRowNotifier {
     _cells.values.first.isCellEditing.value = false;
   }
 
-  void clear() {
+  void unbind() {
     for (final notifier in _cells.values) {
       notifier.dispose();
     }

frontend/app_flowy/lib/plugins/board/presentation/card/board_number_cell.dart

@@ -3,7 +3,6 @@ import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_servic
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-
 import 'define.dart';
 
 class BoardNumberCell extends StatefulWidget {

frontend/app_flowy/lib/plugins/board/presentation/card/card.dart

@@ -1,6 +1,5 @@
 import 'package:app_flowy/plugins/board/application/card/card_bloc.dart';
 import 'package:app_flowy/plugins/board/application/card/card_data_controller.dart';
-import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_action_sheet.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
@@ -64,10 +63,16 @@ class _BoardCardState extends State<BoardCard> {
       value: _cardBloc,
       child: BlocBuilder<BoardCardBloc, BoardCardState>(
         buildWhen: (previous, current) {
+          // Rebuild when:
+          // 1.If the lenght of the cells is not the same
+          // 2.isEditing changed
           if (previous.cells.length != current.cells.length ||
               previous.isEditing != current.isEditing) {
             return true;
           }
+
+          // 3.Compare the content of the cells. The cells consisits of
+          // list of [BoardCellEquatable] that extends the [Equatable].
           return !listEquals(previous.cells, current.cells);
         },
         builder: (context, state) {
@@ -75,21 +80,16 @@ class _BoardCardState extends State<BoardCard> {
             buildAccessoryWhen: () => state.isEditing == false,
             accessoryBuilder: (context) {
               return [
-                _CardEditOption(
+                _CardEditOption(rowNotifier: rowNotifier),
-                  startEditing: () => rowNotifier.becomeFirstResponder(),
-                ),
                 const _CardMoreOption(),
               ];
             },
-            onTap: (context) {
+            onTap: (context) => widget.openCard(context),
-              widget.openCard(context);
+            child: _CellColumn(
-            },
+              groupId: widget.groupId,
-            child: Column(
+              rowNotifier: rowNotifier,
-              mainAxisSize: MainAxisSize.min,
+              cellBuilder: widget.cellBuilder,
-              children: _makeCells(
+              cells: state.cells,
-                context,
-                state.cells.map((cell) => cell.identifier).toList(),
-              ),
             ),
           );
         },
@@ -97,44 +97,6 @@ class _BoardCardState extends State<BoardCard> {
     );
   }
 
-  List<Widget> _makeCells(
-    BuildContext context,
-    List<GridCellIdentifier> cells,
-  ) {
-    final List<Widget> children = [];
-    rowNotifier.clear();
-    cells.asMap().forEach(
-      (int index, GridCellIdentifier cellId) {
-        EditableCellNotifier cellNotifier;
-        if (index == 0) {
-          // Only use the first cell to receive user's input when click the edit
-          // button
-          cellNotifier = EditableCellNotifier(
-            isEditing: rowNotifier.isEditing.value,
-          );
-          rowNotifier.insertCell(cellId, cellNotifier);
-        } else {
-          cellNotifier = EditableCellNotifier();
-        }
-
-        Widget child = widget.cellBuilder.buildCell(
-          widget.groupId,
-          cellId,
-          cellNotifier,
-        );
-
-        child = Padding(
-          key: cellId.key(),
-          padding: const EdgeInsets.only(left: 4, right: 4),
-          child: child,
-        );
-
-        children.add(child);
-      },
-    );
-    return children;
-  }
-
   @override
   Future<void> dispose() async {
     rowNotifier.dispose();
@@ -143,6 +105,63 @@ class _BoardCardState extends State<BoardCard> {
   }
 }
 
+class _CellColumn extends StatelessWidget {
+  final String groupId;
+  final BoardCellBuilder cellBuilder;
+  final EditableRowNotifier rowNotifier;
+  final List<BoardCellEquatable> cells;
+  const _CellColumn({
+    required this.groupId,
+    required this.rowNotifier,
+    required this.cellBuilder,
+    required this.cells,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: _makeCells(context, cells),
+    );
+  }
+
+  List<Widget> _makeCells(
+    BuildContext context,
+    List<BoardCellEquatable> cells,
+  ) {
+    final List<Widget> children = [];
+    // Remove all the cell listeners.
+    rowNotifier.unbind();
+
+    cells.asMap().forEach(
+      (int index, BoardCellEquatable cell) {
+        final isEditing = index == 0 ? rowNotifier.isEditing.value : false;
+        final cellNotifier = EditableCellNotifier(isEditing: isEditing);
+
+        if (index == 0) {
+          // Only use the first cell to receive user's input when click the edit
+          // button
+          rowNotifier.bindCell(cell.identifier, cellNotifier);
+        }
+
+        final child = Padding(
+          key: cell.identifier.key(),
+          padding: const EdgeInsets.only(left: 4, right: 4),
+          child: cellBuilder.buildCell(
+            groupId,
+            cell.identifier,
+            cellNotifier,
+          ),
+        );
+
+        children.add(child);
+      },
+    );
+    return children;
+  }
+}
+
 class _CardMoreOption extends StatelessWidget with CardAccessory {
   const _CardMoreOption({Key? key}) : super(key: key);
 
@@ -164,9 +183,9 @@ class _CardMoreOption extends StatelessWidget with CardAccessory {
 }
 
 class _CardEditOption extends StatelessWidget with CardAccessory {
-  final VoidCallback startEditing;
+  final EditableRowNotifier rowNotifier;
   const _CardEditOption({
-    required this.startEditing,
+    required this.rowNotifier,
     Key? key,
   }) : super(key: key);
 
@@ -183,6 +202,6 @@ class _CardEditOption extends StatelessWidget with CardAccessory {
 
   @override
   void onTap(BuildContext context) {
-    startEditing();
+    rowNotifier.becomeFirstResponder();
   }
 }

frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart

@@ -72,7 +72,17 @@ class CardAccessoryContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.read<AppTheme>();
     final children = accessories.map((accessory) {
-      final hover = FlowyHover(
+      return GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: () => accessory.onTap(context),
+        child: _wrapHover(theme, accessory),
+      );
+    }).toList();
+    return _wrapDecoration(context, Row(children: children));
+  }
+
+  FlowyHover _wrapHover(AppTheme theme, CardAccessory accessory) {
+    return FlowyHover(
       style: HoverStyle(
         hoverColor: theme.hover,
         backgroundColor: theme.surface,
@@ -84,38 +94,22 @@ class CardAccessoryContainer extends StatelessWidget {
         child: accessory,
       ),
     );
-      return GestureDetector(
-        behavior: HitTestBehavior.opaque,
-        onTap: () => accessory.onTap(context),
-        child: hover,
-      );
-    }).toList();
-
-    return Container(
-      clipBehavior: Clip.hardEdge,
-      decoration: _makeBoxDecoration(context),
-      child: Row(children: children),
-    );
-  }
   }
 
-BoxDecoration _makeBoxDecoration(BuildContext context) {
+  Widget _wrapDecoration(BuildContext context, Widget child) {
     final theme = context.read<AppTheme>();
     final borderSide = BorderSide(color: theme.shader6, width: 1.0);
-  return BoxDecoration(
+    final decoration = BoxDecoration(
       color: Colors.transparent,
       border: Border.fromBorderSide(borderSide),
-    // boxShadow: const [
-    //   BoxShadow(
-    //     color: Colors.transparent,
-    //     spreadRadius: 0,
-    //     blurRadius: 5,
-    //     offset: Offset.zero,
-    //   )
-    // ],
-
       borderRadius: const BorderRadius.all(Radius.circular(4)),
     );
+    return Container(
+      clipBehavior: Clip.hardEdge,
+      decoration: decoration,
+      child: child,
+    );
+  }
 }
 
 class _CardEnterRegion extends StatelessWidget {