fix: grid width update (#4101)

* chore: enable checklist on mobile

* fix: width of grid not updating properly

* chore: fix sign-in button color and font

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/widgets/_field_options.dart

@@ -16,7 +16,7 @@ const _supportedFieldTypes = [
   FieldType.MultiSelect,
   FieldType.DateTime,
   FieldType.Checkbox,
-  // FieldType.Checklist,
+  FieldType.Checklist,
 ];
 
 class FieldOptions extends StatelessWidget {

frontend/appflowy_flutter/lib/plugins/database_view/grid/application/grid_bloc.dart

@@ -57,7 +57,7 @@ class GridBloc extends Bloc<GridEvent, GridState> {
           didReceiveFieldUpdate: (fields) {
             emit(
               state.copyWith(
-                fields: FieldList(fields),
+                fields: fields,
               ),
             );
           },
@@ -176,7 +176,7 @@ class GridState with _$GridState {
   const factory GridState({
     required String viewId,
     required Option<DatabasePB> grid,
-    required FieldList fields,
+    required List<FieldInfo> fields,
     required List<RowInfo> rowInfos,
     required int rowCount,
     required RowMetaPB? createdRow,
@@ -188,7 +188,7 @@ class GridState with _$GridState {
   }) = _GridState;
 
   factory GridState.initial(String viewId) => GridState(
-        fields: FieldList([]),
+        fields: [],
         rowInfos: [],
         rowCount: 0,
         createdRow: null,
@@ -201,8 +201,3 @@ class GridState with _$GridState {
         sorts: [],
       );
 }
-
-@freezed
-class FieldList with _$FieldList {
-  factory FieldList(List<FieldInfo> fields) = _FieldList;
-}

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/grid_page.dart

@@ -169,24 +169,16 @@ class _GridPageContentState extends State<GridPageContent> {
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<GridBloc, GridState>(
+    return Column(
-      buildWhen: (previous, current) => previous.fields != current.fields,
+      crossAxisAlignment: CrossAxisAlignment.start,
-      builder: (context, state) {
+      children: [
-        final contentWidth = GridLayout.headerWidth(state.fields.fields);
+        _GridHeader(headerScrollController: headerScrollController),
-
+        _GridRows(
-        return Column(
+          viewId: widget.view.id,
-          crossAxisAlignment: CrossAxisAlignment.start,
+          scrollController: _scrollController,
-          children: [
+        ),
-            _GridHeader(headerScrollController: headerScrollController),
+        const _GridFooter(),
-            _GridRows(
+      ],
-              viewId: state.viewId,
-              contentWidth: contentWidth,
-              scrollController: _scrollController,
-            ),
-            const _GridFooter(),
-          ],
-        );
-      },
     );
   }
 }
@@ -210,41 +202,44 @@ class _GridHeader extends StatelessWidget {
 
 class _GridRows extends StatelessWidget {
   final String viewId;
-  final double contentWidth;
   final GridScrollController scrollController;
 
   const _GridRows({
     required this.viewId,
-    required this.contentWidth,
     required this.scrollController,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Flexible(
+    return BlocBuilder<GridBloc, GridState>(
-      child: _WrapScrollView(
+      buildWhen: (previous, current) => previous.fields != current.fields,
-        scrollController: scrollController,
+      builder: (context, state) {
-        contentWidth: contentWidth,
+        return Flexible(
-        child: BlocBuilder<GridBloc, GridState>(
+          child: _WrapScrollView(
-          buildWhen: (previous, current) => current.reason.maybeWhen(
+            scrollController: scrollController,
-            reorderRows: () => true,
+            contentWidth: GridLayout.headerWidth(state.fields),
-            reorderSingleRow: (reorderRow, rowInfo) => true,
+            child: BlocBuilder<GridBloc, GridState>(
-            delete: (item) => true,
+              buildWhen: (previous, current) => current.reason.maybeWhen(
-            insert: (item) => true,
+                reorderRows: () => true,
-            orElse: () => false,
+                reorderSingleRow: (reorderRow, rowInfo) => true,
+                delete: (item) => true,
+                insert: (item) => true,
+                orElse: () => false,
+              ),
+              builder: (context, state) {
+                final rowInfos = state.rowInfos;
+                final behavior = ScrollConfiguration.of(context).copyWith(
+                  scrollbars: false,
+                );
+                return ScrollConfiguration(
+                  behavior: behavior,
+                  child: _renderList(context, state, rowInfos),
+                );
+              },
+            ),
           ),
-          builder: (context, state) {
+        );
-            final rowInfos = state.rowInfos;
+      },
-            final behavior = ScrollConfiguration.of(context).copyWith(
-              scrollbars: false,
-            );
-            return ScrollConfiguration(
-              behavior: behavior,
-              child: _renderList(context, state, rowInfos),
-            );
-          },
-        ),
-      ),
     );
   }
 

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/layout/layout.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/field_settings_entities.pbenum.dart';
 import 'sizes.dart';
 
 class GridLayout {
@@ -6,6 +7,11 @@ class GridLayout {
     if (fields.isEmpty) return 0;
 
     final fieldsWidth = fields
+        .where(
+          (element) =>
+              element.visibility != null &&
+              element.visibility != FieldVisibility.AlwaysHidden,
+        )
         .map((fieldInfo) => fieldInfo.fieldSettings!.width.toDouble())
         .reduce((value, element) => value + element);
 

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/mobile_grid_page.dart

@@ -148,7 +148,7 @@ class _GridPageContentState extends State<GridPageContent> {
 
   @override
   Widget build(BuildContext context) {
-    return BlocConsumer<GridBloc, GridState>(
+    return BlocListener<GridBloc, GridState>(
       listenWhen: (previous, current) =>
           previous.createdRow != current.createdRow,
       listener: (context, state) {
@@ -165,37 +165,30 @@ class _GridPageContentState extends State<GridPageContent> {
         );
         bloc.add(const GridEvent.resetCreatedRow());
       },
-      buildWhen: (previous, current) => previous.fields != current.fields,
+      child: Stack(
-      builder: (context, state) {
+        children: [
-        final contentWidth = GridLayout.headerWidth(state.fields.fields);
+          Column(
-
+            crossAxisAlignment: CrossAxisAlignment.start,
-        return Stack(
+            children: [
-          children: [
+              Padding(
-            Column(
+                padding: EdgeInsets.only(right: GridSize.leadingHeaderPadding),
-              crossAxisAlignment: CrossAxisAlignment.start,
+                child: _GridHeader(
-              children: [
+                  headerScrollController: headerScrollController,
-                Padding(
-                  padding:
-                      EdgeInsets.only(right: GridSize.leadingHeaderPadding),
-                  child: _GridHeader(
-                    headerScrollController: headerScrollController,
-                  ),
                 ),
-                _GridRows(
+              ),
-                  viewId: state.viewId,
+              _GridRows(
-                  contentWidth: contentWidth,
+                viewId: widget.view.id,
-                  scrollController: _scrollController,
+                scrollController: _scrollController,
-                ),
+              ),
-              ],
+            ],
-            ),
+          ),
-            Positioned(
+          Positioned(
-              bottom: 20,
+            bottom: 20,
-              right: 20,
+            right: 20,
-              child: getGridFabs(context),
+            child: getGridFabs(context),
-            ),
+          ),
-          ],
+        ],
-        );
+      ),
-      },
     );
   }
 }
@@ -219,47 +212,52 @@ class _GridHeader extends StatelessWidget {
 
 class _GridRows extends StatelessWidget {
   final String viewId;
-  final double contentWidth;
   final GridScrollController scrollController;
 
   const _GridRows({
     required this.viewId,
-    required this.contentWidth,
     required this.scrollController,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
+    return BlocBuilder<GridBloc, GridState>(
-      child: _WrapScrollView(
+      buildWhen: (previous, current) => previous.fields != current.fields,
-        scrollController: scrollController,
+      builder: (context, state) {
-        contentWidth: contentWidth,
+        final contentWidth = GridLayout.headerWidth(state.fields);
-        child: BlocBuilder<GridBloc, GridState>(
+        return Expanded(
-          buildWhen: (previous, current) => current.reason.maybeWhen(
+          child: _WrapScrollView(
-            reorderRows: () => true,
+            scrollController: scrollController,
-            reorderSingleRow: (reorderRow, rowInfo) => true,
+            contentWidth: contentWidth,
-            delete: (item) => true,
+            child: BlocBuilder<GridBloc, GridState>(
-            insert: (item) => true,
+              buildWhen: (previous, current) => current.reason.maybeWhen(
-            orElse: () => false,
+                reorderRows: () => true,
+                reorderSingleRow: (reorderRow, rowInfo) => true,
+                delete: (item) => true,
+                insert: (item) => true,
+                orElse: () => false,
+              ),
+              builder: (context, state) {
+                final rowInfos = state.rowInfos;
+                final behavior = ScrollConfiguration.of(context).copyWith(
+                  scrollbars: false,
+                  physics: const ClampingScrollPhysics(),
+                );
+                return ScrollConfiguration(
+                  behavior: behavior,
+                  child: _renderList(context, contentWidth, state, rowInfos),
+                );
+              },
+            ),
           ),
-          builder: (context, state) {
+        );
-            final rowInfos = state.rowInfos;
+      },
-            final behavior = ScrollConfiguration.of(context).copyWith(
-              scrollbars: false,
-              physics: const ClampingScrollPhysics(),
-            );
-            return ScrollConfiguration(
-              behavior: behavior,
-              child: _renderList(context, state, rowInfos),
-            );
-          },
-        ),
-      ),
     );
   }
 
   Widget _renderList(
     BuildContext context,
+    double contentWidth,
     GridState state,
     List<RowInfo> rowInfos,
   ) {

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart

@@ -46,19 +46,13 @@ class _GridHeaderSliverAdaptorState extends State<GridHeaderSliverAdaptor> {
           fieldController: fieldController,
         )..add(const GridHeaderEvent.initial());
       },
-      child: BlocBuilder<GridHeaderBloc, GridHeaderState>(
+      child: SingleChildScrollView(
-        buildWhen: (previous, current) =>
+        scrollDirection: Axis.horizontal,
-            previous.fields.length != current.fields.length,
+        controller: widget.anchorScrollController,
-        builder: (context, state) {
+        child: _GridHeader(
-          return SingleChildScrollView(
+          viewId: widget.viewId,
-            scrollDirection: Axis.horizontal,
+          fieldController: fieldController,
-            controller: widget.anchorScrollController,
+        ),
-            child: _GridHeader(
-              viewId: widget.viewId,
-              fieldController: fieldController,
-            ),
-          );
-        },
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/mobile_checklist_cell_editor.dart

@@ -47,12 +47,7 @@ class _MobileChecklistCellEditScreenState
                   child: _buildHeader(context),
                 ),
                 const Divider(),
-                const Expanded(
+                const Expanded(child: _TaskList()),
-                  child: Padding(
-                    padding: EdgeInsets.symmetric(horizontal: 0.0),
-                    child: _TaskList(),
-                  ),
-                ),
               ],
             );
           },
@@ -169,7 +164,7 @@ class _ChecklistItemState extends State<_ChecklistItem> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.only(left: 5, right: 16),
+      padding: const EdgeInsets.symmetric(horizontal: 5),
       height: 44,
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.center,

frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/widgets/sign_in_anonymous_button.dart

@@ -55,7 +55,11 @@ class SignInAnonymousButton extends StatelessWidget {
                       minimumSize: const Size(double.infinity, 56),
                     ),
                     onPressed: onTap,
-                    child: Text(LocaleKeys.signIn_loginStartWithAnonymous.tr()),
+                    child: FlowyText(
+                      LocaleKeys.signIn_loginStartWithAnonymous.tr(),
+                      fontSize: 14,
+                      color: Theme.of(context).colorScheme.onPrimary,
+                    ),
                   );
                 }
                 // SignInAnonymousButton in desktop

frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart

@@ -62,7 +62,7 @@ class MobileAppearance extends BaseAppearance {
         : ColorScheme(
             brightness: brightness,
             primary: _primaryColor,
-            onPrimary: Colors.white,
+            onPrimary: Colors.black,
             // TODO(yijing): add color later
             secondary: const Color(0xff2d2d2d), //temp
             onSecondary: Colors.white,
@@ -125,7 +125,7 @@ class MobileAppearance extends BaseAppearance {
           backgroundColor: MaterialStateProperty.resolveWith<Color>(
             (Set<MaterialState> states) {
               if (states.contains(MaterialState.disabled)) {
-                return const Color(0xFF57B5F8);
+                return _primaryColor;
               }
               return colorTheme.primary;
             },
@@ -176,7 +176,7 @@ class MobileAppearance extends BaseAppearance {
       fontFamily: fontStyle.fontFamily,
       textTheme: TextTheme(
         displayLarge: const TextStyle(
-          color: Color(0xFF57B5F8),
+          color: _primaryColor,
           fontSize: 32,
           fontWeight: FontWeight.w700,
           height: 1.20,