feat: refactor app bar (#4539)

* feat: refactor appbar * fix: flutter analyze
2024-08-30 18:12:39 +00:00 · 2024-01-29 23:13:06 +08:00 · 2024-01-29 23:13:06 +08:00 · 5b3b0e54d9
commit 5b3b0e54d9
parent f1e380c276
31 changed files with 226 additions and 319 deletions
--- a/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar.dart
@ -0,0 +1,64 @@
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+enum FlowyAppBarLeadingType {
+  back,
+  close,
+  cancel;
+
+  Widget getWidget(VoidCallback? onTap) {
+    switch (this) {
+      case FlowyAppBarLeadingType.back:
+        return AppBarBackButton(onTap: onTap);
+      case FlowyAppBarLeadingType.close:
+        return AppBarCloseButton(onTap: onTap);
+      case FlowyAppBarLeadingType.cancel:
+        return AppBarCancelButton(onTap: onTap);
+    }
+  }
+
+  double? get width {
+    switch (this) {
+      case FlowyAppBarLeadingType.back:
+        return 40.0;
+      case FlowyAppBarLeadingType.close:
+        return 40.0;
+      case FlowyAppBarLeadingType.cancel:
+        return 120;
+    }
+  }
+}
+
+class FlowyAppBar extends AppBar {
+  FlowyAppBar({
+    super.key,
+    super.actions,
+    Widget? title,
+    String? titleText,
+    FlowyAppBarLeadingType leadingType = FlowyAppBarLeadingType.back,
+    super.centerTitle,
+    VoidCallback? onTapLeading,
+    bool showDivider = true,
+  }) : super(
+          title: title ??
+              FlowyText(
+                titleText ?? '',
+                fontSize: 15.0,
+                fontWeight: FontWeight.w500,
+              ),
+          titleSpacing: 0,
+          elevation: 0,
+          leading: leadingType.getWidget(onTapLeading),
+          leadingWidth: leadingType.width,
+          toolbarHeight: 44.0,
+          bottom: showDivider
+              ? const PreferredSize(
+                  preferredSize: Size.fromHeight(0.5),
+                  child: Divider(
+                    height: 0.5,
+                  ),
+                )
+              : null,
+        );
+}
--- a/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart
@ -1,3 +1,4 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@ -15,7 +16,9 @@ class AppBarBackButton extends StatelessWidget {
  Widget build(BuildContext context) {
    return AppBarButton(
      onTap: onTap ?? () => Navigator.pop(context),
-      child: const Icon(Icons.arrow_back_ios_new),
+      child: const FlowySvg(
+        FlowySvgs.m_app_bar_back_s,
+      ),
    );
  }
 }
@ -24,24 +27,17 @@ class AppBarCloseButton extends StatelessWidget {
  const AppBarCloseButton({
    super.key,
    this.onTap,
-    this.margin = const EdgeInsets.symmetric(
-      horizontal: 16.0,
-      vertical: 12.0,
-    ),
  });

  final VoidCallback? onTap;
-  final EdgeInsets margin;

  @override
  Widget build(BuildContext context) {
-    return FlowyButton(
-      useIntrinsicWidth: true,
-      text: const Icon(
-        Icons.close,
-      ),
-      margin: margin,
+    return AppBarButton(
      onTap: onTap ?? () => Navigator.pop(context),
+      child: const FlowySvg(
+        FlowySvgs.m_app_bar_close_s,
+      ),
    );
  }
 }
@ -49,17 +45,18 @@ class AppBarCloseButton extends StatelessWidget {
 class AppBarCancelButton extends StatelessWidget {
  const AppBarCancelButton({
    super.key,
-    required this.onTap,
+    this.onTap,
  });

-  final VoidCallback onTap;
+  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return AppBarButton(
-      onTap: onTap,
+      onTap: onTap ?? () => Navigator.pop(context),
      child: FlowyText(
        LocaleKeys.button_cancel.tr(),
+        overflow: TextOverflow.ellipsis,
      ),
    );
  }
@ -76,16 +73,13 @@ class AppBarDoneButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AppBarButton(
+      isActionButton: true,
      onTap: onTap,
-      extent: 0.0,
-      child: Padding(
-        padding: const EdgeInsets.only(right: 8.0),
-        child: FlowyText(
-          LocaleKeys.button_Done.tr(),
-          color: Theme.of(context).colorScheme.primary,
-          fontWeight: FontWeight.w500,
-          textAlign: TextAlign.right,
-        ),
+      child: FlowyText(
+        LocaleKeys.button_Done.tr(),
+        color: Theme.of(context).colorScheme.primary,
+        fontWeight: FontWeight.w500,
+        textAlign: TextAlign.right,
      ),
    );
  }
@ -102,11 +96,9 @@ class AppBarMoreButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AppBarButton(
+      isActionButton: true,
      onTap: () => onTap(context),
-      child: const Icon(
-        // replace with flowy icon
-        Icons.more_horiz_sharp,
-      ),
+      child: const FlowySvg(FlowySvgs.three_dots_s),
    );
  }
 }
@ -114,27 +106,28 @@ class AppBarMoreButton extends StatelessWidget {
 class AppBarButton extends StatelessWidget {
  const AppBarButton({
    super.key,
-    this.extent = 16.0,
+    this.isActionButton = false,
    required this.onTap,
    required this.child,
  });

-  // used to extend the hit area of the more button
-  final double extent;
+  static const defaultWidth = 40.0;

  final VoidCallback onTap;
  final Widget child;
+  final bool isActionButton;

  @override
  Widget build(BuildContext context) {
-    return InkWell(
-      borderRadius: BorderRadius.circular(28),
-      splashColor: Colors.transparent,
-      focusColor: Colors.transparent,
-      highlightColor: Colors.transparent,
+    return GestureDetector(
      onTap: onTap,
      child: Padding(
-        padding: EdgeInsets.all(extent),
+        padding: EdgeInsets.only(
+          top: 12.0,
+          bottom: 12.0,
+          left: 12.0,
+          right: isActionButton ? 12.0 : 8.0,
+        ),
        child: child,
      ),
    );
--- a/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart
@ -1,4 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_state_container.dart';
@ -116,15 +117,12 @@ class _MobileViewPageState extends State<MobileViewPage> {

  Widget _buildApp(ViewPB? view, List<Widget> actions, Widget child) {
    final icon = view?.icon.value;
-    final elevation = (view?.layout.isDatabaseView ?? false) ? 0.0 : null;
    return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        elevation: elevation,
+      appBar: FlowyAppBar(
        title: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
-            if (icon != null)
+            if (icon != null && icon.isNotEmpty)
              EmojiText(
                emoji: '$icon ',
                fontSize: 22.0,
@ -138,7 +136,6 @@ class _MobileViewPageState extends State<MobileViewPage> {
            ),
          ],
        ),
-        leading: const AppBarBackButton(),
        actions: actions,
      ),
      body: SafeArea(child: child),
--- a/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart
@ -43,7 +43,7 @@ class OptionColorList extends StatelessWidget {
              alignment: Alignment.center,
              child: isSelected
                  ? const FlowySvg(
-                      FlowySvgs.blue_check_s,
+                      FlowySvgs.m_blue_check_s,
                      size: Size.square(28.0),
                      blendMode: null,
                    )
--- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_header.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_header.dart
@ -27,7 +27,6 @@ class BottomSheetHeader extends StatelessWidget {
            child: Align(
              alignment: Alignment.centerLeft,
              child: AppBarCloseButton(
-                margin: EdgeInsets.zero,
                onTap: onClose,
              ),
            ),
--- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart
@ -151,12 +151,7 @@ class _Header extends StatelessWidget {
            if (showCloseButton)
              const Align(
                alignment: Alignment.centerLeft,
-                child: Padding(
-                  padding: EdgeInsets.only(left: 16),
-                  child: AppBarCloseButton(
-                    margin: EdgeInsets.zero,
-                  ),
-                ),
+                child: AppBarCloseButton(),
              ),
            Align(
              child: FlowyText(
@ -168,11 +163,8 @@ class _Header extends StatelessWidget {
            if (showDoneButton)
              Align(
                alignment: Alignment.centerRight,
-                child: Padding(
-                  padding: const EdgeInsets.only(right: 16),
-                  child: AppBarDoneButton(
-                    onTap: () => Navigator.pop(context),
-                  ),
+                child: AppBarDoneButton(
+                  onTap: () => Navigator.pop(context),
                ),
              ),
          ],
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart
@ -1,7 +1,10 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
+import 'package:appflowy/plugins/database/application/cell/bloc/text_cell_bloc.dart';
 import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
@ -14,7 +17,6 @@ import 'package:appflowy/plugins/database/grid/application/row/row_detail_bloc.d
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/text.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
-import 'package:appflowy/plugins/database/application/cell/bloc/text_cell_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/row/row_property.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
@ -77,7 +79,14 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
    return BlocProvider.value(
      value: _bloc,
      child: Scaffold(
-        appBar: _buildAppBar(),
+        appBar: FlowyAppBar(
+          leadingType: FlowyAppBarLeadingType.close,
+          actions: [
+            AppBarMoreButton(
+              onTap: (_) => _showCardActions(context),
+            ),
+          ],
+        ),
        body: BlocBuilder<MobileRowDetailBloc, MobileRowDetailState>(
          buildWhen: (previous, current) =>
              previous.rowInfos.length != current.rowInfos.length,
@ -118,27 +127,6 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
    );
  }

-  AppBar _buildAppBar() {
-    return AppBar(
-      elevation: 0,
-      leading: IconButton(
-        onPressed: () => context.pop(),
-        icon: const Icon(Icons.close),
-      ),
-      actions: [
-        IconButton(
-          iconSize: 40,
-          icon: const FlowySvg(
-            FlowySvgs.details_horizontal_s,
-            size: Size.square(20),
-          ),
-          padding: EdgeInsets.zero,
-          onPressed: () => _showCardActions(context),
-        ),
-      ],
-    );
-  }
-
  void _showCardActions(BuildContext context) {
    showMobileBottomSheet(
      context,
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart
@ -1,16 +1,15 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/drag_handler.dart';
-import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/plugins/database/application/cell/bloc/date_cell_editor_bloc.dart';
+import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/presentation/widgets/date_picker/mobile_appflowy_date_picker.dart';
 import 'package:appflowy/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 class MobileDateCellEditScreen extends StatefulWidget {
@ -43,7 +42,7 @@ class _MobileDateCellEditScreenState extends State<MobileDateCellEditScreen> {

  Widget _buildFullScreen() {
    return Scaffold(
-      appBar: AppBar(title: FlowyText.medium(LocaleKeys.titleBar_date.tr())),
+      appBar: FlowyAppBar(titleText: LocaleKeys.titleBar_date.tr()),
      body: _buildDatePicker(),
    );
  }
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_create_field_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_create_field_screen.dart
@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/field/mobile_field_type_option_editor.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
@ -44,23 +44,10 @@ class _MobileNewPropertyScreenState extends State<MobileNewPropertyScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
        centerTitle: true,
-        title: FlowyText.medium(
-          LocaleKeys.grid_field_newProperty.tr(),
-        ),
-        leading: AppBarCancelButton(
-          onTap: () => context.pop(),
-        ),
-        leadingWidth: 120,
-        elevation: 0,
-        bottom: const PreferredSize(
-          preferredSize: Size.fromHeight(1),
-          child: Divider(
-            height: 1,
-            thickness: 1,
-          ),
-        ),
+        titleText: LocaleKeys.grid_field_newProperty.tr(),
+        leadingType: FlowyAppBarLeadingType.cancel,
        actions: [
          _SaveButton(
            onSave: () {
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_edit_field_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_edit_field_screen.dart
@ -1,14 +1,12 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/field/mobile_field_type_option_editor.dart';
 import 'package:appflowy/plugins/database/application/field/field_backend_service.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
 import 'package:appflowy/plugins/database/application/field/field_service.dart';
 import 'package:appflowy/plugins/database/widgets/setting/field_visibility_extension.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';

 class MobileEditPropertyScreen extends StatefulWidget {
@ -56,22 +54,8 @@ class _MobileEditPropertyScreenState extends State<MobileEditPropertyScreen> {
        }
      },
      child: Scaffold(
-        appBar: AppBar(
-          centerTitle: true,
-          title: FlowyText.medium(
-            LocaleKeys.grid_field_editProperty.tr(),
-          ),
-          elevation: 0,
-          bottom: const PreferredSize(
-            preferredSize: Size.fromHeight(1),
-            child: Divider(
-              height: 1,
-              thickness: 1,
-            ),
-          ),
-          leading: AppBarBackButton(
-            onTap: () => context.pop(_fieldOptionValues),
-          ),
+        appBar: FlowyAppBar(
+          titleText: LocaleKeys.grid_field_editProperty.tr(),
        ),
        body: MobileFieldEditor(
          mode: FieldOptionMode.edit,
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart
@ -1,5 +1,4 @@
-import 'package:flutter/material.dart';
-
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/mobile_calendar_events_empty.dart';
 import 'package:appflowy/plugins/database/application/row/row_cache.dart';
 import 'package:appflowy/plugins/database/calendar/application/calendar_bloc.dart';
@ -8,6 +7,7 @@ import 'package:calendar_view/calendar_view.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 class MobileCalendarEventsScreen extends StatefulWidget {
@ -56,10 +56,9 @@ class _MobileCalendarEventsScreenState
            widget.calendarBloc.add(CalendarEvent.createEvent(widget.date)),
        child: const Text('+'),
      ),
-      appBar: AppBar(
-        title: Text(
-          DateFormat.yMMMMd(context.locale.toLanguageTag()).format(widget.date),
-        ),
+      appBar: FlowyAppBar(
+        titleText: DateFormat.yMMMMd(context.locale.toLanguageTag())
+            .format(widget.date),
      ),
      body: BlocProvider<CalendarBloc>.value(
        value: widget.calendarBloc,
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart
@ -106,7 +106,6 @@ class MobileDatabaseViewListButton extends StatelessWidget {
      onPressed: () {
        showMobileBottomSheet(
          context,
-          padding: EdgeInsets.zero,
          showDragHandle: true,
          builder: (_) {
            return BlocProvider<ViewBloc>(
@ -126,7 +125,7 @@ class MobileDatabaseViewListButton extends StatelessWidget {
        mainAxisSize: MainAxisSize.min,
        children: [
          const FlowySvg(
-            FlowySvgs.blue_check_s,
+            FlowySvgs.m_blue_check_s,
            size: Size.square(20),
            blendMode: BlendMode.dst,
          ),
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart
@ -44,7 +44,7 @@ class _MobileDatabaseViewQuickActionsState
  Widget _quickActions(BuildContext context, ViewPB view) {
    final isInline = view.childViews.isNotEmpty;
    return Padding(
-      padding: const EdgeInsets.only(top: 8, bottom: 38),
+      padding: const EdgeInsets.only(top: 8),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
--- a/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_setting_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_setting_page.dart
@ -1,6 +1,7 @@
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/env/env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/mobile/presentation/setting/cloud/cloud_setting_group.dart';
 import 'package:appflowy/mobile/presentation/setting/user_session_setting_group.dart';
@ -42,8 +43,8 @@ class _MobileHomeSettingPageState extends State<MobileHomeSettingPage> {
        });

        return Scaffold(
-          appBar: AppBar(
-            title: Text(LocaleKeys.settings_title.tr()),
+          appBar: FlowyAppBar(
+            titleText: LocaleKeys.settings_title.tr(),
          ),
          body: userProfile == null
              ? _buildErrorWidget(errorMsg)
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/about.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/about.dart
@ -1,2 +1 @@
 export 'about_setting_group.dart';
-export 'user_agreement_page.dart';
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/user_agreement_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/user_agreement_page.dart
@ -1,22 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-
-class UserAgreementPage extends StatelessWidget {
-  const UserAgreementPage({super.key});
-
-  static const routeName = '/UserAgreementPage';
-
-  @override
-  Widget build(BuildContext context) {
-    // TODO(yijing): implement page
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(LocaleKeys.settings_mobile_userAgreement.tr()),
-      ),
-      body: const Center(
-        child: Text('🪜 Under construction'),
-      ),
-    );
-  }
-}
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart
@ -1,4 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/setting_cloud.dart';
 import 'package:easy_localization/easy_localization.dart';
@ -12,8 +13,8 @@ class AppFlowyCloudPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      appBar: AppBar(
-        title: Text(LocaleKeys.settings_menu_cloudSettings.tr()),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.settings_menu_cloudSettings.tr(),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart
@ -1,10 +1,9 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
@ -47,58 +46,48 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
    final selectedFontFamilyName =
        context.watch<AppearanceSettingsCubit>().state.font;
    return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        elevation: 0,
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_font.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
-        bottom: const PreferredSize(
-          preferredSize: Size.fromHeight(0.5),
-          child: Divider(
-            height: 0.5,
-          ),
-        ),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.titleBar_font.tr(),
      ),
      body: SafeArea(
-        child: ListView.separated(
-          itemBuilder: (context, index) {
-            if (index == 0) {
-              // search bar
-              return Padding(
-                padding: const EdgeInsets.all(8.0),
-                child: FlowyMobileSearchTextField(
-                  onChanged: (keyword) {
-                    setState(() {
-                      availableFonts = _availableFonts
-                          .where(
-                            (element) => parseFontFamilyName(element)
-                                .toLowerCase()
-                                .contains(keyword.toLowerCase()),
-                          )
-                          .toList();
-                    });
-                  },
-                ),
+        child: Scrollbar(
+          child: ListView.builder(
+            itemBuilder: (context, index) {
+              if (index == 0) {
+                // search bar
+                return Padding(
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 8.0,
+                    horizontal: 12.0,
+                  ),
+                  child: FlowyMobileSearchTextField(
+                    onChanged: (keyword) {
+                      setState(() {
+                        availableFonts = _availableFonts
+                            .where(
+                              (element) => parseFontFamilyName(element)
+                                  .toLowerCase()
+                                  .contains(keyword.toLowerCase()),
+                            )
+                            .toList();
+                      });
+                    },
+                  ),
+                );
+              }
+              final fontFamilyName = availableFonts[index - 1];
+              final displayName = parseFontFamilyName(fontFamilyName);
+              return FlowyOptionTile.checkbox(
+                text: displayName,
+                isSelected: selectedFontFamilyName == fontFamilyName,
+                showTopBorder: false,
+                onTap: () => context.pop(fontFamilyName),
+                fontFamily: GoogleFonts.getFont(fontFamilyName).fontFamily,
+                backgroundColor: Colors.transparent,
              );
-            }
-            final fontFamilyName = availableFonts[index - 1];
-            final displayName = parseFontFamilyName(fontFamilyName);
-            return FlowyOptionTile.checkbox(
-              text: displayName,
-              isSelected: selectedFontFamilyName == fontFamilyName,
-              showTopBorder: index == 0,
-              onTap: () => context.pop(fontFamilyName),
-              fontFamily: GoogleFonts.getFont(fontFamilyName).fontFamily,
-              backgroundColor: Colors.transparent,
-            );
-          },
-          separatorBuilder: (_, __) => const Divider(
-            height: 1,
+            },
+            itemCount: availableFonts.length + 1, // with search bar
          ),
-          itemCount: availableFonts.length + 1, // with search bar
        ),
      ),
    );
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart
@ -1,8 +1,8 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/language.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';

@ -29,49 +29,21 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
  Widget build(BuildContext context) {
    final supportedLocales = EasyLocalization.of(context)!.supportedLocales;
    return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_language.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.titleBar_language.tr(),
      ),
      body: SafeArea(
-        child: ListView.separated(
+        child: ListView.builder(
          itemBuilder: (context, index) {
            final locale = supportedLocales[index];
-            return SizedBox(
-              height: 48.0,
-              child: InkWell(
-                onTap: () => context.pop(locale),
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 4.0,
-                    vertical: 12.0,
-                  ),
-                  child: Row(
-                    children: [
-                      const HSpace(12.0),
-                      FlowyText(
-                        languageFromLocale(locale),
-                      ),
-                      const Spacer(),
-                      if (EasyLocalization.of(context)!.locale == locale)
-                        const Icon(
-                          Icons.check,
-                          size: 16,
-                        ),
-                      const HSpace(12.0),
-                    ],
-                  ),
-                ),
-              ),
+            return FlowyOptionTile.checkbox(
+              text: languageFromLocale(locale),
+              isSelected: EasyLocalization.of(context)!.locale == locale,
+              showTopBorder: false,
+              onTap: () => context.pop(locale),
+              backgroundColor: Colors.transparent,
            );
          },
-          separatorBuilder: (_, __) => const Divider(
-            height: 1,
-          ),
          itemCount: supportedLocales.length,
        ),
      ),
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/launch_settings_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/launch_settings_page.dart
@ -1,5 +1,6 @@
 import 'package:appflowy/env/env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/mobile/presentation/setting/self_host_setting_group.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
@ -18,8 +19,8 @@ class MobileLaunchSettingsPage extends StatelessWidget {
  Widget build(BuildContext context) {
    context.watch<AppearanceSettingsCubit>();
    return Scaffold(
-      appBar: AppBar(
-        title: Text(LocaleKeys.settings_title.tr()),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.settings_title.tr(),
      ),
      body: SingleChildScrollView(
        child: Padding(
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart
@ -51,6 +51,7 @@ class PersonalInfoSettingGroup extends StatelessWidget {
                    showCloseButton: true,
                    showDragHandle: true,
                    showDivider: false,
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    builder: (_) {
                      return EditUsernameBottomSheet(
                        context,
--- a/frontend/appflowy_flutter/lib/plugins/base/color/color_picker_screen.dart
+++ b/frontend/appflowy_flutter/lib/plugins/base/color/color_picker_screen.dart
@ -1,8 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/color/color_picker.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';

@ -17,13 +16,8 @@ class MobileColorPickerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        title: FlowyText.semibold(
-          title ?? LocaleKeys.titleBar_pageIcon.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
+      appBar: FlowyAppBar(
+        titleText: title ?? LocaleKeys.titleBar_pageIcon.tr(),
      ),
      body: SafeArea(
        child: FlowyMobileColorPicker(
--- a/frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker_page.dart
@ -1,8 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/icon/icon_picker.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';

 class IconPickerPage extends StatelessWidget {
@ -18,13 +17,8 @@ class IconPickerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        title: FlowyText.semibold(
-          title ?? LocaleKeys.titleBar_pageIcon.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
+      appBar: FlowyAppBar(
+        titleText: title ?? LocaleKeys.titleBar_pageIcon.tr(),
      ),
      body: SafeArea(
        child: FlowyIconPicker(
--- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart
@ -1,5 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/base/option_color_list.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
@ -61,10 +62,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
              mainAxisSize: MainAxisSize.min,
              children: [
                const DragHandler(),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                  child: _buildHeader(context),
-                ),
+                _buildHeader(context),
                const Divider(height: 0.5),
                Expanded(
                  child: Padding(
@ -83,20 +81,14 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
  }

  Widget _buildHeader(BuildContext context) {
-    const iconWidth = 36.0;
    const height = 44.0;
    return Stack(
      children: [
        Align(
          alignment: Alignment.centerLeft,
-          child: FlowyIconButton(
-            icon: FlowySvg(
-              showMoreOptions ? FlowySvgs.arrow_left_s : FlowySvgs.close_s,
-              size: const Size.square(iconWidth),
-            ),
-            width: iconWidth,
-            onPressed: () => _popOrBack(),
-          ),
+          child: showMoreOptions
+              ? AppBarBackButton(onTap: _popOrBack)
+              : AppBarCloseButton(onTap: _popOrBack),
        ),
        SizedBox(
          height: 44.0,
@ -473,6 +465,7 @@ class _MoreOptionsState extends State<_MoreOptions> {
    return ConstrainedBox(
      constraints: const BoxConstraints.tightFor(height: 52.0),
      child: FlowyOptionTile.textField(
+        showTopBorder: false,
        onTextChanged: (name) => widget.onUpdate(name, null),
        controller: widget.controller,
      ),
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart
@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:easy_localization/easy_localization.dart';
@ -15,13 +15,8 @@ class MobileCodeLanguagePickerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_language.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.titleBar_language.tr(),
      ),
      body: SafeArea(
        child: ListView.separated(
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart
@ -221,7 +221,7 @@ class _BackgroundColorItem extends StatelessWidget {
        alignment: Alignment.center,
        child: isSelected
            ? const FlowySvg(
-                FlowySvgs.blue_check_s,
+                FlowySvgs.m_blue_check_s,
                size: Size.square(28.0),
                blendMode: null,
              )
--- a/frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart
+++ b/frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart
@ -50,7 +50,6 @@ GoRouter generateRouter(Widget child) {
      if (PlatformExtension.isMobile) ...[
        // settings
        _mobileHomeSettingPageRoute(),
-        _mobileSettingUserAgreementPageRoute(),
        _mobileCloudSettingAppFlowyCloudPageRoute(),
        _mobileLaunchSettingsPageRoute(),

@ -209,16 +208,6 @@ GoRoute _mobileCloudSettingAppFlowyCloudPageRoute() {
  );
 }

-GoRoute _mobileSettingUserAgreementPageRoute() {
-  return GoRoute(
-    parentNavigatorKey: AppGlobals.rootNavKey,
-    path: UserAgreementPage.routeName,
-    pageBuilder: (context, state) {
-      return const MaterialPage(child: UserAgreementPage());
-    },
-  );
-}
-
 GoRoute _mobileLaunchSettingsPageRoute() {
  return GoRoute(
    parentNavigatorKey: AppGlobals.rootNavKey,
--- a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_loading_screen.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_loading_screen.dart
@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@ -16,13 +16,11 @@ class MobileLoadingScreen extends StatelessWidget {
    const double spacing = 16;

    return Scaffold(
-      appBar: AppBar(
-        leading: AppBarCloseButton(
-          onTap: () => context.read<SignInBloc>().add(
-                const SignInEvent.cancel(),
-              ),
-        ),
-        elevation: 0,
+      appBar: FlowyAppBar(
+        showDivider: false,
+        onTapLeading: () => context.read<SignInBloc>().add(
+              const SignInEvent.cancel(),
+            ),
      ),
      body: Center(
        child: Column(
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart
@ -1,10 +1,8 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';

 const _height = 44.0;

@ -15,18 +13,11 @@ class MobileDateHeader extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).colorScheme.surface,
-      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Stack(
        children: [
-          Align(
+          const Align(
            alignment: Alignment.centerLeft,
-            child: FlowyIconButton(
-              icon: const FlowySvg(
-                FlowySvgs.close_s,
-                size: Size.square(_height),
-              ),
-              onPressed: () => context.pop(),
-            ),
+            child: AppBarCloseButton(),
          ),
          Align(
            child: FlowyText.medium(
--- a/frontend/resources/flowy_icons/16x/m_app_bar_back.svg
+++ b/frontend/resources/flowy_icons/16x/m_app_bar_back.svg
@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_left_outlined">
+<path id="Union" d="M13.5774 1.9107C13.9028 2.23614 13.9028 2.76378 13.5774 3.08921L6.66667 9.99996L13.5774 16.9107C13.9028 17.2361 13.9028 17.7638 13.5774 18.0892C13.252 18.4147 12.7243 18.4147 12.3989 18.0892L5.48816 11.1785C4.83728 10.5276 4.83728 9.47232 5.48816 8.82145L12.3989 1.9107C12.7243 1.58527 13.252 1.58527 13.5774 1.9107Z" fill="#2B2F36"/>
+</g>
+</svg>
--- a/frontend/resources/flowy_icons/16x/m_app_bar_close.svg
+++ b/frontend/resources/flowy_icons/16x/m_app_bar_close.svg
@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#133;&#179;&#233;&#151;&#173;_close 1">
+<path id="Union" d="M5.13807 4.19526C4.87772 3.93491 4.45561 3.93491 4.19526 4.19526C3.93491 4.45561 3.93491 4.87772 4.19526 5.13807L9.05719 10L4.19526 14.8619C3.93491 15.1223 3.93491 15.5444 4.19526 15.8047C4.45561 16.0651 4.87772 16.0651 5.13807 15.8047L10 10.9428L14.8619 15.8047C15.1223 16.0651 15.5444 16.0651 15.8047 15.8047C16.0651 15.5444 16.0651 15.1223 15.8047 14.8619L10.9428 10L15.8047 5.13807C16.0651 4.87772 16.0651 4.45561 15.8047 4.19526C15.5444 3.93491 15.1223 3.93491 14.8619 4.19526L10 9.05719L5.13807 4.19526Z" fill="#1F2329" stroke="#1F2329" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>