fix: mobile bugs fix (#4059)

* fix: add missing tap gesture

* fix: unify bottom sheet shape and padding

* fix: fail to pop the detail page when add new card

* fix: show card title placeholder when it is empty

* refactor: ThirdPartySignInButtons

* chore: add resizeToAvoidBottomInset in showFlowyMobileBottomSheet

* chore: refactor code

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_content/card_cells/text.dart

@@ -17,10 +17,10 @@ class MobileTextCardCell<CustomCardData> extends CardCell {
   final CellControllerBuilder cellControllerBuilder;
 
   @override
-  State<MobileTextCardCell> createState() => _NumberCellState();
+  State<MobileTextCardCell> createState() => _MobileTextCardCellState();
 }
 
-class _NumberCellState extends State<MobileTextCardCell> {
+class _MobileTextCardCellState extends State<MobileTextCardCell> {
   late final TextCellBloc _cellBloc;
 
   @override
@@ -47,27 +47,31 @@ class _NumberCellState extends State<MobileTextCardCell> {
       child: BlocBuilder<TextCellBloc, TextCellState>(
         buildWhen: (previous, current) => previous.content != current.content,
         builder: (context, state) {
+          // return custom widget if render hook is provided(for example, the title of the card on board view)
+          // if widget.cardData.isEmpty means there is no data for this cell
+          final Widget? custom = widget.renderHook?.call(
+            state.content,
+            widget.cardData,
+            context,
+          );
+          if (custom != null) {
+            return custom;
+          }
+
+          // if there is no render hook
+          // the empty text cell will be hidden
           if (state.content.isEmpty) {
             return const SizedBox();
-          } else {
-            final Widget? custom = widget.renderHook?.call(
-              state.content,
-              widget.cardData,
-              context,
-            );
-            if (custom != null) {
-              return custom;
-            }
-
-            return Container(
-              alignment: Alignment.centerLeft,
-              padding: cellStyle.padding,
-              child: Text(
-                state.content,
-                style: cellStyle.primaryTextStyle(),
-              ),
-            );
           }
+
+          return Container(
+            alignment: Alignment.centerLeft,
+            padding: cellStyle.padding,
+            child: Text(
+              state.content,
+              style: cellStyle.primaryTextStyle(),
+            ),
+          );
         },
       ),
     );

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_content/mobile_card_content.dart

@@ -72,16 +72,17 @@ class MobileCardContent<CustomCardData> extends StatelessWidget {
     DatabaseCellContext cellContext,
   ) {
     final renderHook = RowCardRenderHook<String>();
-    renderHook.addTextCellHook((cellData, _, __) {
+    renderHook.addTextCellHook((cellData, cardData, __) {
       return BlocBuilder<TextCellBloc, TextCellState>(
         builder: (context, state) {
-          final text = cellData.isEmpty
+          final cardDataIsEmpty = cardData == null;
+          final text = cardDataIsEmpty
               ? LocaleKeys.grid_row_titlePlaceholder.tr()
               : cellData;
 
           final textStyle = Theme.of(context).textTheme.bodyMedium?.copyWith(
-                color: cellData.isEmpty
-                    ? Theme.of(context).colorScheme.onSecondary
+                color: cardDataIsEmpty
+                    ? Theme.of(context).hintColor
                     : Theme.of(context).colorScheme.onBackground,
                 fontSize: 20,
               );

frontend/appflowy_flutter/lib/mobile/presentation/widgets/show_flowy_mobile_bottom_sheet.dart

@@ -1,3 +1,4 @@
+import 'package:flowy_infra/size.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
@@ -5,24 +6,45 @@ Future<T?> showFlowyMobileBottomSheet<T>(
   BuildContext context, {
   required String title,
   required Widget Function(BuildContext) builder,
+  bool resizeToAvoidBottomInset = true,
   bool isScrollControlled = false,
 }) async {
   return showModalBottomSheet(
     context: context,
     isScrollControlled: isScrollControlled,
-    builder: (context) => Padding(
-      padding: const EdgeInsets.all(16.0),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          _BottomSheetTitle(title),
-          const SizedBox(
-            height: 16,
-          ),
-          builder(context),
-        ],
+    shape: const RoundedRectangleBorder(
+      borderRadius: BorderRadius.vertical(
+        top: Corners.s12Radius,
       ),
     ),
+    builder: (context) {
+      const padding = EdgeInsets.fromLTRB(16, 16, 16, 48);
+
+      final child = Padding(
+        padding: padding,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _BottomSheetTitle(title),
+            const SizedBox(
+              height: 16,
+            ),
+            builder(context),
+          ],
+        ),
+      );
+      if (resizeToAvoidBottomInset) {
+        return AnimatedPadding(
+          padding: padding +
+              EdgeInsets.only(
+                bottom: MediaQuery.of(context).viewInsets.bottom,
+              ),
+          duration: Duration.zero,
+          child: child,
+        );
+      }
+      return child;
+    },
   );
 }