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,25 +169,17 @@ class _GridPageContentState extends State<GridPageContent> {
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<GridBloc, GridState>(
-      buildWhen: (previous, current) => previous.fields != current.fields,
-      builder: (context, state) {
-        final contentWidth = GridLayout.headerWidth(state.fields.fields);
-
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         _GridHeader(headerScrollController: headerScrollController),
         _GridRows(
-              viewId: state.viewId,
+          viewId: widget.view.id,
-              contentWidth: contentWidth,
           scrollController: _scrollController,
         ),
         const _GridFooter(),
       ],
     );
-      },
-    );
   }
 }
 
@@ -210,21 +202,22 @@ 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 BlocBuilder<GridBloc, GridState>(
+      buildWhen: (previous, current) => previous.fields != current.fields,
+      builder: (context, state) {
         return Flexible(
           child: _WrapScrollView(
             scrollController: scrollController,
-        contentWidth: contentWidth,
+            contentWidth: GridLayout.headerWidth(state.fields),
             child: BlocBuilder<GridBloc, GridState>(
               buildWhen: (previous, current) => current.reason.maybeWhen(
                 reorderRows: () => true,
@@ -246,6 +239,8 @@ class _GridRows extends StatelessWidget {
             ),
           ),
         );
+      },
+    );
   }
 
   Widget _renderList(

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,25 +165,19 @@ class _GridPageContentState extends State<GridPageContent> {
         );
         bloc.add(const GridEvent.resetCreatedRow());
       },
-      buildWhen: (previous, current) => previous.fields != current.fields,
+      child: Stack(
-      builder: (context, state) {
-        final contentWidth = GridLayout.headerWidth(state.fields.fields);
-
-        return Stack(
         children: [
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Padding(
-                  padding:
+                padding: EdgeInsets.only(right: GridSize.leadingHeaderPadding),
-                      EdgeInsets.only(right: GridSize.leadingHeaderPadding),
                 child: _GridHeader(
                   headerScrollController: headerScrollController,
                 ),
               ),
               _GridRows(
-                  viewId: state.viewId,
+                viewId: widget.view.id,
-                  contentWidth: contentWidth,
                 scrollController: _scrollController,
               ),
             ],
@@ -194,8 +188,7 @@ class _GridPageContentState extends State<GridPageContent> {
             child: getGridFabs(context),
           ),
         ],
-        );
+      ),
-      },
     );
   }
 }
@@ -219,17 +212,19 @@ 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 BlocBuilder<GridBloc, GridState>(
+      buildWhen: (previous, current) => previous.fields != current.fields,
+      builder: (context, state) {
+        final contentWidth = GridLayout.headerWidth(state.fields);
         return Expanded(
           child: _WrapScrollView(
             scrollController: scrollController,
@@ -250,16 +245,19 @@ class _GridRows extends StatelessWidget {
                 );
                 return ScrollConfiguration(
                   behavior: behavior,
-              child: _renderList(context, state, rowInfos),
+                  child: _renderList(context, contentWidth, 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) =>
-            previous.fields.length != current.fields.length,
-        builder: (context, state) {
-          return SingleChildScrollView(
         scrollDirection: Axis.horizontal,
         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,