chore: show and hide property

frontend/app_flowy/lib/workspace/application/grid/setting/property_bloc.dart

@@ -1,40 +1,66 @@
 import 'package:app_flowy/workspace/application/grid/field/field_service.dart';
+import 'package:app_flowy/workspace/application/grid/field/grid_listenr.dart';
 import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'dart:async';
-import 'package:dartz/dartz.dart';
 
 part 'property_bloc.freezed.dart';
 
 class GridPropertyBloc extends Bloc<GridPropertyEvent, GridPropertyState> {
   final FieldService _service;
+  final GridFieldsListener _fieldListener;
+
   GridPropertyBloc({required String gridId, required List<Field> fields})
       : _service = FieldService(gridId: gridId),
+        _fieldListener = GridFieldsListener(gridId: gridId),
         super(GridPropertyState.initial(gridId, fields)) {
     on<GridPropertyEvent>(
       (event, emit) async {
-        await event.map(setFieldVisibility: (_SetFieldVisibility value) async {
+        await event.map(
-          final result = await _service.updateField(fieldId: value.fieldId, visibility: value.visibility);
+          initial: (_Initial value) {
-          result.fold(
+            _startListening();
-            (l) => null,
+          },
-            (err) => Log.error(err),
+          setFieldVisibility: (_SetFieldVisibility value) async {
-          );
+            final result = await _service.updateField(fieldId: value.fieldId, visibility: value.visibility);
-        });
+            result.fold(
+              (l) => null,
+              (err) => Log.error(err),
+            );
+          },
+          didReceiveFieldUpdate: (_DidReceiveFieldUpdate value) {
+            emit(state.copyWith(fields: value.fields));
+          },
+        );
       },
     );
   }
 
   @override
   Future<void> close() async {
+    await _fieldListener.stop();
     return super.close();
   }
+
+  void _startListening() {
+    _fieldListener.updateFieldsNotifier.addPublishListener((result) {
+      result.fold(
+        (fields) {
+          add(GridPropertyEvent.didReceiveFieldUpdate(fields));
+        },
+        (err) => Log.error(err),
+      );
+    });
+    _fieldListener.start();
+  }
 }
 
 @freezed
 class GridPropertyEvent with _$GridPropertyEvent {
+  const factory GridPropertyEvent.initial() = _Initial;
   const factory GridPropertyEvent.setFieldVisibility(String fieldId, bool visibility) = _SetFieldVisibility;
+  const factory GridPropertyEvent.didReceiveFieldUpdate(List<Field> fields) = _DidReceiveFieldUpdate;
 }
 
 @freezed

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart

@@ -148,11 +148,13 @@ class _FlowyGridState extends State<FlowyGrid> {
     return BlocBuilder<GridBloc, GridState>(
       buildWhen: (previous, current) => previous.fields.length != current.fields.length,
       builder: (context, state) {
-        return SliverPersistentHeader(
+        return GridHeader(gridId: gridId, fields: List.from(state.fields));
-          delegate: GridHeaderDelegate(gridId: gridId, fields: List.from(state.fields)),
+
-          floating: true,
+        // return SliverPersistentHeader(
-          pinned: true,
+        //   delegate: GridHeaderDelegate(gridId: gridId, fields: List.from(state.fields)),
-        );
+        //   floating: true,
+        //   pinned: true,
+        // );
       },
     );
   }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/content/number_cell.dart

@@ -38,7 +38,7 @@ class _NumberCellState extends State<NumberCell> {
 
   @override
   Future<void> dispose() async {
-    await _cellBloc.close();
+    _cellBloc.close();
     super.dispose();
   }
 }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart

@@ -12,15 +12,41 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'field_editor.dart';
 import 'field_cell.dart';
 
-class GridHeaderDelegate extends SliverPersistentHeaderDelegate {
+class GridHeader extends StatelessWidget {
+  final String gridId;
+  final List<Field> fields;
+  const GridHeader({Key? key, required this.gridId, required this.fields}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) {
+        final bloc = getIt<GridHeaderBloc>(param1: gridId, param2: fields);
+        bloc.add(const GridHeaderEvent.initial());
+        return bloc;
+      },
+      child: BlocBuilder<GridHeaderBloc, GridHeaderState>(
+        builder: (context, state) {
+          return SliverPersistentHeader(
+            delegate: _GridHeaderDelegate(gridId: gridId, fields: List.from(state.fields)),
+            floating: true,
+            pinned: true,
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _GridHeaderDelegate extends SliverPersistentHeaderDelegate {
   final String gridId;
   final List<Field> fields;
 
-  GridHeaderDelegate({required this.gridId, required this.fields});
+  _GridHeaderDelegate({required this.gridId, required this.fields});
 
   @override
   Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
-    return GridHeader(gridId: gridId, fields: fields, key: ObjectKey(fields));
+    return _GridHeaderWidget(gridId: gridId, fields: fields, key: ObjectKey(fields));
   }
 
   @override
@@ -31,47 +57,42 @@ class GridHeaderDelegate extends SliverPersistentHeaderDelegate {
 
   @override
   bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
-    if (oldDelegate is GridHeaderDelegate) {
+    if (oldDelegate is _GridHeaderDelegate) {
       return fields != oldDelegate.fields;
     }
-    return false;
+    return true;
   }
 }
 
-class GridHeader extends StatelessWidget {
+class _GridHeaderWidget extends StatelessWidget {
-  final List<Field> fields;
   final String gridId;
-  const GridHeader({required this.gridId, required this.fields, Key? key}) : super(key: key);
+  final List<Field> fields;
+
+  const _GridHeaderWidget({required this.gridId, required this.fields, Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    return BlocProvider(
+    return BlocBuilder<GridHeaderBloc, GridHeaderState>(
-      create: (context) {
+      builder: (context, state) {
-        final bloc = getIt<GridHeaderBloc>(param1: gridId, param2: fields);
+        final cells = state.fields.map(
-        bloc.add(const GridHeaderEvent.initial());
+          (field) => GridFieldCell(
-        return bloc;
+            GridFieldCellContext(gridId: gridId, field: field),
+          ),
+        );
+
+        final row = Row(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            const _HeaderLeading(),
+            ...cells,
+            _HeaderTrailing(gridId: gridId),
+          ],
+          key: UniqueKey(),
+        );
+
+        return Container(height: GridSize.headerHeight, color: theme.surface, child: row);
       },
-      child: BlocBuilder<GridHeaderBloc, GridHeaderState>(
-        builder: (context, state) {
-          final cells = state.fields.map(
-            (field) => GridFieldCell(
-              GridFieldCellContext(gridId: gridId, field: field),
-            ),
-          );
-
-          final row = Row(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              const _HeaderLeading(),
-              ...cells,
-              _HeaderTrailing(gridId: gridId),
-            ],
-          );
-
-          return Container(color: theme.surface, child: row);
-        },
-      ),
     );
   }
 }

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_property.dart

@@ -42,7 +42,8 @@ class GridPropertyList extends StatelessWidget with FlowyOverlayDelegate {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (context) => getIt<GridPropertyBloc>(param1: gridId, param2: fields),
+      create: (context) =>
+          getIt<GridPropertyBloc>(param1: gridId, param2: fields)..add(const GridPropertyEvent.initial()),
       child: BlocBuilder<GridPropertyBloc, GridPropertyState>(
         builder: (context, state) {
           final cells = state.fields.map((field) {