chore: upgrade to Flutter 3.22.0 (#5395)

* chore: upgrade flutter to 3.22.0

* chore: upgrade editor version

* chore: upgrade CI files

* fix: failed tests

.github/workflows/android_ci.yaml.bak

@@ -19,7 +19,7 @@
 
 # env:
 #   CARGO_TERM_COLOR: always
-#   FLUTTER_VERSION: "3.19.0"
+#   FLUTTER_VERSION: "3.22.0"
 #   RUST_TOOLCHAIN: "1.77.2"
 #   CARGO_MAKE_VERSION: "0.36.6"
 

.github/workflows/flutter_ci.yaml

@@ -25,7 +25,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
-  FLUTTER_VERSION: "3.19.0"
+  FLUTTER_VERSION: "3.22.0"
   RUST_TOOLCHAIN: "1.77.2"
   CARGO_MAKE_VERSION: "0.36.6"
 

.github/workflows/ios_ci.yaml

@@ -20,7 +20,7 @@ on:
       - "!frontend/appflowy_web_app/**"
 
 env:
-  FLUTTER_VERSION: "3.19.0"
+  FLUTTER_VERSION: "3.22.0"
   RUST_TOOLCHAIN: "1.77.2"
 
 concurrency:

.github/workflows/release.yml

@@ -6,7 +6,7 @@ on:
       - "*"
 
 env:
-  FLUTTER_VERSION: "3.19.0"
+  FLUTTER_VERSION: "3.22.0"
   RUST_TOOLCHAIN: "1.77.2"
 
 jobs:

.github/workflows/rust_coverage.yml

@@ -10,7 +10,7 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
-  FLUTTER_VERSION: "3.19.0"
+  FLUTTER_VERSION: "3.22.0"
   RUST_TOOLCHAIN: "1.77.2"
 
 jobs:

CHANGELOG.md

@@ -105,7 +105,7 @@
 - Fixed a bug where newly created rows were not being automatically sorted.
 - Fixed issues related to deleting a sorting field or sort not removing existing sorts properly.
 ### Notes
-- Windows 7, Windows 8, and iOS 11 are not yet supported due to the upgrade to Flutter 3.19.0.
+- Windows 7, Windows 8, and iOS 11 are not yet supported due to the upgrade to Flutter 3.22.0.
 
 ## Version 0.4.9 - 02/17/2024
 ### Bug Fixes

frontend/appflowy_flutter/integration_test/desktop/document/document_alignment_test.dart

@@ -66,6 +66,7 @@ void main() {
           LogicalKeyboardKey.keyR,
         ],
         tester: tester,
+        withKeyUp: true,
       );
       expect(first.attributes[blockComponentAlign], rightAlignmentKey);
 
@@ -77,6 +78,7 @@ void main() {
           LogicalKeyboardKey.keyE,
         ],
         tester: tester,
+        withKeyUp: true,
       );
       expect(first.attributes[blockComponentAlign], centerAlignmentKey);
 
@@ -88,6 +90,7 @@ void main() {
           LogicalKeyboardKey.keyL,
         ],
         tester: tester,
+        withKeyUp: true,
       );
       expect(first.attributes[blockComponentAlign], leftAlignmentKey);
     });

frontend/appflowy_flutter/integration_test/desktop/document/document_inline_page_reference_test.dart

@@ -111,6 +111,7 @@ Future<void> triggerReferenceDocumentBySlashMenu(WidgetTester tester) async {
       LogicalKeyboardKey.enter,
     ],
     tester: tester,
+    withKeyUp: true,
   );
 
   await tester.pumpAndSettle();
@@ -129,6 +130,7 @@ Future<void> enterDocumentText(WidgetTester tester) async {
       LogicalKeyboardKey.keyT,
     ],
     tester: tester,
+    withKeyUp: true,
   );
   await tester.pumpAndSettle();
 }

frontend/appflowy_flutter/integration_test/shared/keyboard.dart

@@ -5,10 +5,18 @@ class FlowyTestKeyboard {
   static Future<void> simulateKeyDownEvent(
     List<LogicalKeyboardKey> keys, {
     required flutter_test.WidgetTester tester,
+    bool withKeyUp = false,
   }) async {
     for (final LogicalKeyboardKey key in keys) {
       await flutter_test.simulateKeyDownEvent(key);
       await tester.pumpAndSettle();
     }
+
+    if (withKeyUp) {
+      for (final LogicalKeyboardKey key in keys) {
+        await flutter_test.simulateKeyUpEvent(key);
+        await tester.pumpAndSettle();
+      }
+    }
   }
 }

frontend/appflowy_flutter/ios/Podfile.lock

@@ -173,7 +173,7 @@ SPEC CHECKSUMS:
   fluttertoast: 31b00dabfa7fb7bacd9e7dbee580d7a2ff4bf265
   image_gallery_saver: cb43cc43141711190510e92c460eb1655cd343cb
   image_picker_ios: 99dfe1854b4fa34d0364e74a78448a0151025425
-  integration_test: 13825b8a9334a850581300559b8839134b124670
+  integration_test: ce0a3ffa1de96d1a89ca0ac26fca7ea18a749ef4
   irondash_engine_context: 3458bf979b90d616ffb8ae03a150bafe2e860cc9
   keyboard_height_plugin: 43fa8bba20fd5c4fdeed5076466b8b9d43cc6b86
   package_info_plus: 58f0028419748fad15bf008b270aaa8e54380b1c

frontend/appflowy_flutter/lib/flutter/af_dropdown_menu.dart

@@ -481,7 +481,7 @@ class _AFDropdownMenuState<T> extends State<AFDropdownMenu<T>> {
 
       ButtonStyle effectiveStyle = entry.style ?? defaultStyle;
       final Color focusedBackgroundColor = effectiveStyle.foregroundColor
-              ?.resolve(<MaterialState>{MaterialState.focused}) ??
+              ?.resolve(<WidgetState>{WidgetState.focused}) ??
           Theme.of(context).colorScheme.onSurface;
 
       Widget label = entry.labelWidget ?? Text(entry.label);
@@ -499,7 +499,7 @@ class _AFDropdownMenuState<T> extends State<AFDropdownMenu<T>> {
       // color will also change to foregroundColor.withOpacity(0.12).
       effectiveStyle = entry.enabled && i == focusedIndex
           ? effectiveStyle.copyWith(
-              backgroundColor: MaterialStatePropertyAll<Color>(
+              backgroundColor: WidgetStatePropertyAll<Color>(
                 focusedBackgroundColor.withOpacity(0.12),
               ),
             )
@@ -628,17 +628,17 @@ class _AFDropdownMenuState<T> extends State<AFDropdownMenu<T>> {
     final double? anchorWidth = getWidth(_anchorKey);
     if (widget.width != null) {
       effectiveMenuStyle = effectiveMenuStyle.copyWith(
-        minimumSize: MaterialStatePropertyAll<Size?>(Size(widget.width!, 0.0)),
+        minimumSize: WidgetStatePropertyAll<Size?>(Size(widget.width!, 0.0)),
       );
     } else if (anchorWidth != null) {
       effectiveMenuStyle = effectiveMenuStyle.copyWith(
-        minimumSize: MaterialStatePropertyAll<Size?>(Size(anchorWidth, 0.0)),
+        minimumSize: WidgetStatePropertyAll<Size?>(Size(anchorWidth, 0.0)),
       );
     }
 
     if (widget.menuHeight != null) {
       effectiveMenuStyle = effectiveMenuStyle.copyWith(
-        maximumSize: MaterialStatePropertyAll<Size>(
+        maximumSize: WidgetStatePropertyAll<Size>(
           Size(double.infinity, widget.menuHeight!),
         ),
       );
@@ -1029,8 +1029,8 @@ class _DropdownMenuDefaultsM3 extends DropdownMenuThemeData {
   @override
   MenuStyle get menuStyle {
     return const MenuStyle(
-      minimumSize: MaterialStatePropertyAll<Size>(Size(_kMinimumWidth, 0.0)),
+      minimumSize: WidgetStatePropertyAll<Size>(Size(_kMinimumWidth, 0.0)),
-      maximumSize: MaterialStatePropertyAll<Size>(Size.infinite),
+      maximumSize: WidgetStatePropertyAll<Size>(Size.infinite),
       visualDensity: VisualDensity.standard,
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/base/view_page/app_bar_buttons.dart

@@ -12,6 +12,7 @@ import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
 import 'package:appflowy/workspace/application/view/prelude.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -92,7 +93,7 @@ class MobileViewPageMoreButton extends StatelessWidget {
           context,
           showDragHandle: true,
           showDivider: false,
-          backgroundColor: Theme.of(context).colorScheme.background,
+          backgroundColor: AFThemeExtension.of(context).background,
           builder: (_) => MultiBlocProvider(
             providers: [
               BlocProvider.value(value: context.read<ViewBloc>()),
@@ -144,7 +145,7 @@ class MobileViewPageLayoutButton extends StatelessWidget {
           showDoneButton: true,
           showHeader: true,
           title: LocaleKeys.pageStyle_title.tr(),
-          backgroundColor: Theme.of(context).colorScheme.background,
+          backgroundColor: AFThemeExtension.of(context).background,
           builder: (_) => MultiBlocProvider(
             providers: [
               BlocProvider.value(value: context.read<DocumentPageStyleBloc>()),

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_action_widget.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
@@ -19,7 +20,7 @@ class BottomSheetActionWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final iconColor =
-        this.iconColor ?? Theme.of(context).colorScheme.onBackground;
+        this.iconColor ?? AFThemeExtension.of(context).onBackground;
 
     if (svg == null) {
       return OutlinedButton(

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_slide_action_button.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
@@ -54,7 +55,7 @@ enum MobilePaneActionType {
               context,
               showDragHandle: true,
               showDivider: false,
-              backgroundColor: Theme.of(context).colorScheme.background,
+              backgroundColor: AFThemeExtension.of(context).background,
               useRootNavigator: true,
               builder: (context) {
                 return MultiBlocProvider(

frontend/appflowy_flutter/lib/mobile/presentation/database/board/mobile_board_page.dart

@@ -15,6 +15,7 @@ import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -265,7 +266,7 @@ class _BoardContentState extends State<_BoardContent> {
   BoxDecoration _makeBoxDecoration(BuildContext context) {
     final themeMode = context.read<AppearanceSettingsCubit>().state.themeMode;
     return BoxDecoration(
-      color: Theme.of(context).colorScheme.background,
+      color: AFThemeExtension.of(context).background,
       borderRadius: const BorderRadius.all(Radius.circular(8)),
       border: themeMode == ThemeMode.light
           ? Border.fromBorderSide(

frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart

@@ -60,7 +60,7 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                               child: IconButton(
                                 icon: Icon(
                                   Icons.close,
-                                  color: style.colorScheme.onBackground,
+                                  color: style.colorScheme.onSurface,
                                 ),
                                 onPressed: () =>
                                     setState(() => _textController.clear()),
@@ -86,7 +86,7 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                             child: Text(
                               LocaleKeys.button_cancel.tr(),
                               style: style.textTheme.titleSmall?.copyWith(
-                                color: style.colorScheme.onBackground,
+                                color: style.colorScheme.onSurface,
                               ),
                             ),
                             onPressed: () => setState(() => isEditing = false),
@@ -96,7 +96,7 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                               LocaleKeys.button_add.tr(),
                               style: style.textTheme.titleSmall?.copyWith(
                                 fontWeight: FontWeight.bold,
-                                color: style.colorScheme.onBackground,
+                                color: style.colorScheme.onSurface,
                               ),
                             ),
                             onPressed: () {
@@ -117,14 +117,14 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
               )
             : ElevatedButton.icon(
                 style: ElevatedButton.styleFrom(
-                  foregroundColor: style.colorScheme.onBackground,
+                  foregroundColor: style.colorScheme.onSurface,
                   backgroundColor: style.colorScheme.secondary,
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(8),
                   ),
                 ).copyWith(
                   overlayColor:
-                      MaterialStateProperty.all(Theme.of(context).hoverColor),
+                      WidgetStateProperty.all(Theme.of(context).hoverColor),
                 ),
                 icon: const Icon(Icons.add),
                 label: Text(

frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_hidden_groups_column.dart

@@ -9,6 +9,7 @@ import 'package:appflowy/plugins/database/widgets/cell/card_cell_skeleton/text_c
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -168,7 +169,7 @@ class MobileHiddenGroup extends StatelessWidget {
         return TextButton(
           style: TextButton.styleFrom(
             textStyle: Theme.of(context).textTheme.bodyMedium,
-            foregroundColor: Theme.of(context).colorScheme.onBackground,
+            foregroundColor: AFThemeExtension.of(context).onBackground,
             visualDensity: VisualDensity.compact,
           ),
           child: CardCellBuilder(

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart

@@ -20,6 +20,7 @@ import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.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';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -131,7 +132,7 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
   void _showCardActions(BuildContext context) {
     showMobileBottomSheet(
       context,
-      backgroundColor: Theme.of(context).colorScheme.background,
+      backgroundColor: AFThemeExtension.of(context).background,
       showDragHandle: true,
       builder: (_) => Column(
         mainAxisSize: MainAxisSize.min,

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

@@ -22,17 +22,17 @@ class MobileRowDetailCreateFieldButton extends StatelessWidget {
       constraints: const BoxConstraints(minWidth: double.infinity),
       child: TextButton.icon(
         style: Theme.of(context).textButtonTheme.style?.copyWith(
-              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+              shape: WidgetStateProperty.all<RoundedRectangleBorder>(
                 RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(12.0),
                 ),
               ),
-              overlayColor: MaterialStateProperty.all<Color>(
+              overlayColor: WidgetStateProperty.all<Color>(
                 Theme.of(context).hoverColor,
               ),
               alignment: AlignmentDirectional.centerStart,
               splashFactory: NoSplash.splashFactory,
-              padding: const MaterialStatePropertyAll(
+              padding: const WidgetStatePropertyAll(
                 EdgeInsets.symmetric(vertical: 14, horizontal: 6),
               ),
             ),

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart

@@ -7,6 +7,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.da
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
@@ -40,7 +41,7 @@ Future<FieldType?> showFieldTypeGridBottomSheet(
     showCloseButton: true,
     elevation: 20,
     title: title,
-    backgroundColor: Theme.of(context).colorScheme.background,
+    backgroundColor: AFThemeExtension.of(context).background,
     enableDraggableScrollable: true,
     builder: (context) {
       final typeOptionMenuItemValue = mobileSupportedFieldTypes

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_sort_bottom_sheet.dart

@@ -438,7 +438,7 @@ class _SortDetailContent extends StatelessWidget {
                   color: Theme.of(context).colorScheme.surface,
                 ),
                 splashFactory: NoSplash.splashFactory,
-                overlayColor: const MaterialStatePropertyAll(
+                overlayColor: const WidgetStatePropertyAll(
                   Colors.transparent,
                 ),
                 onTap: (index) {

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart

@@ -11,6 +11,7 @@ import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -183,7 +184,7 @@ class MobileDatabaseViewListButton extends StatelessWidget {
         showMobileBottomSheet(
           context,
           showDragHandle: true,
-          backgroundColor: Theme.of(context).colorScheme.background,
+          backgroundColor: AFThemeExtension.of(context).background,
           builder: (_) {
             return BlocProvider<ViewBloc>(
               create: (_) =>

frontend/appflowy_flutter/lib/mobile/presentation/database/view/edit_database_view_screen.dart

@@ -234,7 +234,6 @@ class DatabaseViewSettingTile extends StatelessWidget {
         showHeader: true,
         showBackButton: true,
         title: LocaleKeys.grid_settings_properties.tr(),
-        showDivider: true,
         builder: (_) {
           return BlocProvider.value(
             value: context.read<ViewBloc>(),

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_trash_page.dart

@@ -178,7 +178,7 @@ class _DeletedFilesListView extends StatelessWidget {
               title: Text(
                 deletedFile.name,
                 style: theme.textTheme.labelMedium
-                    ?.copyWith(color: theme.colorScheme.onBackground),
+                    ?.copyWith(color: theme.colorScheme.onSurface),
               ),
               horizontalTitleGap: 0,
               tileColor: theme.colorScheme.onSurface.withOpacity(0.1),

frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_home_recent_views.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
@@ -9,7 +7,9 @@ import 'package:appflowy/workspace/application/recent/prelude.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.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';
 
@@ -91,7 +91,7 @@ class _RecentViews extends StatelessWidget {
                 context,
                 showDivider: false,
                 showDragHandle: true,
-                backgroundColor: Theme.of(context).colorScheme.background,
+                backgroundColor: AFThemeExtension.of(context).background,
                 builder: (_) {
                   return Column(
                     children: [

frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/rtl_setting.dart

@@ -37,7 +37,6 @@ class RTLSetting extends StatelessWidget {
           showHeader: true,
           showDragHandle: true,
           showDivider: false,
-          showCloseButton: false,
           title: LocaleKeys.settings_appearance_textDirection_label.tr(),
           builder: (context) {
             final layoutDirection =

frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/text_scale_setting.dart

@@ -45,7 +45,6 @@ class TextScaleSetting extends StatelessWidget {
           showHeader: true,
           showDragHandle: true,
           showDivider: false,
-          showCloseButton: false,
           title: LocaleKeys.settings_appearance_fontScaleFactor.tr(),
           builder: (context) {
             return FontSizeStepper(

frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/theme_setting.dart

@@ -38,7 +38,6 @@ class ThemeSetting extends StatelessWidget {
           showHeader: true,
           showDragHandle: true,
           showDivider: false,
-          showCloseButton: false,
           title: LocaleKeys.settings_appearance_themeMode_label.tr(),
           builder: (context) {
             final themeMode =

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

@@ -29,7 +29,7 @@ class MobileQuickActionButton extends StatelessWidget {
         onTap: enable ? onTap : null,
         borderRadius: BorderRadius.circular(12),
         overlayColor:
-            enable ? null : const MaterialStatePropertyAll(Colors.transparent),
+            enable ? null : const WidgetStatePropertyAll(Colors.transparent),
         splashColor: Colors.transparent,
         child: Container(
           height: 44,

frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker.dart

@@ -92,7 +92,7 @@ class FlowyIconPicker extends StatelessWidget {
       child: TabBar(
         indicatorSize: TabBarIndicatorSize.label,
         isScrollable: true,
-        overlayColor: MaterialStatePropertyAll(
+        overlayColor: WidgetStatePropertyAll(
           Theme.of(context).colorScheme.secondary,
         ),
         padding: EdgeInsets.zero,

frontend/appflowy_flutter/lib/plugins/database/board/presentation/board_page.dart

@@ -20,6 +20,7 @@ import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
@@ -671,7 +672,7 @@ class _BoardCardState extends State<_BoardCard> {
                     ? const Color(0x0F1F2329)
                     : const Color(0x0FEFF4FB),
                 foregroundColorOnHover:
-                    Theme.of(context).colorScheme.onBackground,
+                    AFThemeExtension.of(context).onBackground,
               ),
             ),
             onStartEditing: () =>

frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/calendar_day.dart

@@ -238,7 +238,7 @@ class NewEventButton extends StatelessWidget {
           child: FlowyIconButton(
             onPressed: onCreate,
             icon: const FlowySvg(FlowySvgs.add_s),
-            fillColor: Theme.of(context).colorScheme.background,
+            fillColor: Theme.of(context).colorScheme.surface,
             hoverColor: AFThemeExtension.of(context).lightGreyHover,
             width: 22,
             tooltipText: LocaleKeys.calendar_newEventButtonTooltip.tr(),
@@ -289,8 +289,8 @@ class _DayBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    Color dayTextColor = Theme.of(context).colorScheme.onBackground;
+    Color dayTextColor = AFThemeExtension.of(context).onBackground;
-    Color monthTextColor = Theme.of(context).colorScheme.onBackground;
+    Color monthTextColor = AFThemeExtension.of(context).onBackground;
     final String monthString =
         DateFormat("MMM ", context.locale.toLanguageTag()).format(date);
     final String dayString = date.day.toString();

frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/calendar_event_card.dart

@@ -8,6 +8,7 @@ import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flutter/material.dart';
@@ -15,7 +16,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
 import '../application/calendar_bloc.dart';
-
 import 'calendar_event_editor.dart';
 
 class EventCard extends StatefulWidget {
@@ -102,7 +102,7 @@ class _EventCardState extends State<EventCard> {
           hoverColor: Theme.of(context).brightness == Brightness.light
               ? const Color(0x0F1F2329)
               : const Color(0x0FEFF4FB),
-          foregroundColorOnHover: Theme.of(context).colorScheme.onBackground,
+          foregroundColorOnHover: AFThemeExtension.of(context).onBackground,
         ),
       ),
       onStartEditing: () {},

frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/calendar_page.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
@@ -21,12 +19,12 @@ import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 
 import '../../application/row/row_controller.dart';
 import '../../widgets/row/row_detail.dart';
-
 import 'calendar_day.dart';
 import 'layout/sizes.dart';
 import 'toolbar/calendar_setting_bar.dart';

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/mobile_fab.dart

@@ -43,7 +43,7 @@ Widget getGridFabs(BuildContext context) {
               .read<GridBloc>()
               .add(const GridEvent.createRow(openRowDetail: true));
         },
-        overlayColor: const MaterialStatePropertyAll<Color>(Color(0xFF009FD1)),
+        overlayColor: const WidgetStatePropertyAll<Color>(Color(0xFF009FD1)),
         boxShadow: const BoxShadow(
           offset: Offset(0, 8),
           color: Color(0x6612BFEF),
@@ -75,7 +75,7 @@ class MobileGridFab extends StatelessWidget {
   final VoidCallback onTap;
   final FlowySvgData icon;
   final Size iconSize;
-  final MaterialStateProperty<Color?>? overlayColor;
+  final WidgetStateProperty<Color?>? overlayColor;
 
   @override
   Widget build(BuildContext context) {

frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart

@@ -77,22 +77,22 @@ class _DatabaseViewSelectorButton extends StatelessWidget {
 
         return TextButton(
           style: ButtonStyle(
-            padding: const MaterialStatePropertyAll(
+            padding: const WidgetStatePropertyAll(
               EdgeInsets.fromLTRB(12, 8, 8, 8),
             ),
-            maximumSize: const MaterialStatePropertyAll(Size(200, 48)),
+            maximumSize: const WidgetStatePropertyAll(Size(200, 48)),
-            minimumSize: const MaterialStatePropertyAll(Size(48, 0)),
+            minimumSize: const WidgetStatePropertyAll(Size(48, 0)),
-            shape: const MaterialStatePropertyAll(
+            shape: const WidgetStatePropertyAll(
               RoundedRectangleBorder(
                 borderRadius: BorderRadius.all(Radius.circular(12)),
               ),
             ),
-            backgroundColor: MaterialStatePropertyAll(
+            backgroundColor: WidgetStatePropertyAll(
               Theme.of(context).brightness == Brightness.light
                   ? const Color(0x0F212729)
                   : const Color(0x0FFFFFFF),
             ),
-            overlayColor: MaterialStatePropertyAll(
+            overlayColor: WidgetStatePropertyAll(
               Theme.of(context).colorScheme.secondary,
             ),
           ),
@@ -119,7 +119,6 @@ class _DatabaseViewSelectorButton extends StatelessWidget {
             showTransitionMobileBottomSheet(
               context,
               showDivider: false,
-              initialStop: 1.0,
               builder: (_) {
                 return MultiBlocProvider(
                   providers: [

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_relation_cell.dart

@@ -42,7 +42,6 @@ class MobileGridRelationCellSkin extends IEditableRelationCellSkin {
       onTap: () {
         showMobileBottomSheet(
           context,
-          padding: EdgeInsets.zero,
           backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
           builder: (context) {
             return const FlowyText("Coming soon");

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_url_cell.dart

@@ -2,6 +2,7 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/show_mobile_bottom_she
 import 'package:appflowy/plugins/database/application/cell/bloc/url_cell_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/row/accessory/cell_accessory.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -51,7 +52,7 @@ class MobileGridURLCellSkin extends IEditableURLCellSkin {
     showMobileBottomSheet(
       context,
       showDragHandle: true,
-      backgroundColor: Theme.of(context).colorScheme.background,
+      backgroundColor: AFThemeExtension.of(context).background,
       builder: (context) => BlocProvider.value(
         value: bloc,
         child: MobileURLEditor(

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_row_detail/mobile_row_detail_checkbox_cell.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
 import 'package:appflowy/plugins/database/application/cell/bloc/checkbox_cell_bloc.dart';
+import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 
 import '../editable_cell_skeleton/checkbox.dart';
@@ -31,7 +32,7 @@ class MobileRowDetailCheckboxCellSkin extends IEditableCheckboxCellSkin {
         alignment: AlignmentDirectional.centerStart,
         child: FlowySvg(
           state.isSelected ? FlowySvgs.check_filled_s : FlowySvgs.uncheck_s,
-          color: Theme.of(context).colorScheme.onBackground,
+          color: AFThemeExtension.of(context).onBackground,
           blendMode: BlendMode.dst,
           size: const Size.square(24),
         ),

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_row_detail/mobile_row_detail_checklist_cell.dart

@@ -1,11 +1,12 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart';
-import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
 import 'package:appflowy/plugins/database/application/cell/bloc/checklist_cell_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/checklist_progress_bar.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/mobile_checklist_cell_editor.dart';
+import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -25,7 +26,7 @@ class MobileRowDetailChecklistCellSkin extends IEditableChecklistCellSkin {
       borderRadius: const BorderRadius.all(Radius.circular(14)),
       onTap: () => showMobileBottomSheet(
         context,
-        backgroundColor: Theme.of(context).colorScheme.background,
+        backgroundColor: AFThemeExtension.of(context).background,
         builder: (context) {
           return BlocProvider.value(
             value: bloc,

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_row_detail/mobile_row_detail_relation_cell.dart

@@ -19,7 +19,6 @@ class MobileRowDetailRelationCellSkin extends IEditableRelationCellSkin {
       borderRadius: const BorderRadius.all(Radius.circular(14)),
       onTap: () => showMobileBottomSheet(
         context,
-        padding: EdgeInsets.zero,
         builder: (context) {
           return const FlowyText("Coming soon");
         },

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_row_detail/mobile_row_detail_url_cell.dart

@@ -1,12 +1,12 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart';
 import 'package:appflowy/plugins/database/application/cell/bloc/url_cell_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/row/accessory/cell_accessory.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flowy_infra/theme_extension.dart';
 
 import '../editable_cell_skeleton/url.dart';
 
@@ -28,7 +28,7 @@ class MobileRowDetailURLCellSkin extends IEditableURLCellSkin {
           onTap: () => showMobileBottomSheet(
             context,
             showDragHandle: true,
-      backgroundColor: Theme.of(context).colorScheme.background,
+            backgroundColor: AFThemeExtension.of(context).background,
             builder: (_) {
               return BlocProvider.value(
                 value: bloc,

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/checklist_cell_editor.dart

@@ -423,7 +423,7 @@ class _DeleteTaskButton extends StatefulWidget {
 }
 
 class _DeleteTaskButtonState extends State<_DeleteTaskButton> {
-  final _materialStatesController = MaterialStatesController();
+  final _materialStatesController = WidgetStatesController();
 
   @override
   void dispose() {
@@ -438,16 +438,16 @@ class _DeleteTaskButtonState extends State<_DeleteTaskButton> {
       onHover: (_) => setState(() {}),
       onFocusChange: (_) => setState(() {}),
       style: ButtonStyle(
-        fixedSize: const MaterialStatePropertyAll(Size.square(32)),
+        fixedSize: const WidgetStatePropertyAll(Size.square(32)),
-        minimumSize: const MaterialStatePropertyAll(Size.square(32)),
+        minimumSize: const WidgetStatePropertyAll(Size.square(32)),
-        maximumSize: const MaterialStatePropertyAll(Size.square(32)),
+        maximumSize: const WidgetStatePropertyAll(Size.square(32)),
-        overlayColor: MaterialStateProperty.resolveWith((state) {
+        overlayColor: WidgetStateProperty.resolveWith((state) {
-          if (state.contains(MaterialState.focused)) {
+          if (state.contains(WidgetState.focused)) {
             return AFThemeExtension.of(context).greyHover;
           }
           return Colors.transparent;
         }),
-        shape: const MaterialStatePropertyAll(
+        shape: const WidgetStatePropertyAll(
           RoundedRectangleBorder(borderRadius: Corners.s6Border),
         ),
       ),
@@ -455,8 +455,8 @@ class _DeleteTaskButtonState extends State<_DeleteTaskButton> {
       child: FlowySvg(
         FlowySvgs.delete_s,
         color: _materialStatesController.value
-                    .contains(MaterialState.hovered) ||
+                    .contains(WidgetState.hovered) ||
-                _materialStatesController.value.contains(MaterialState.focused)
+                _materialStatesController.value.contains(WidgetState.focused)
             ? Theme.of(context).colorScheme.error
             : null,
       ),

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/relation_cell_editor.dart

@@ -422,7 +422,7 @@ class _UnselectRowButton extends StatefulWidget {
 }
 
 class _UnselectRowButtonState extends State<_UnselectRowButton> {
-  final _materialStatesController = MaterialStatesController();
+  final _materialStatesController = WidgetStatesController();
 
   @override
   void dispose() {
@@ -437,26 +437,25 @@ class _UnselectRowButtonState extends State<_UnselectRowButton> {
       onHover: (_) => setState(() {}),
       onFocusChange: (_) => setState(() {}),
       style: ButtonStyle(
-        fixedSize: const MaterialStatePropertyAll(Size.square(32)),
+        fixedSize: const WidgetStatePropertyAll(Size.square(32)),
-        minimumSize: const MaterialStatePropertyAll(Size.square(32)),
+        minimumSize: const WidgetStatePropertyAll(Size.square(32)),
-        maximumSize: const MaterialStatePropertyAll(Size.square(32)),
+        maximumSize: const WidgetStatePropertyAll(Size.square(32)),
-        overlayColor: MaterialStateProperty.resolveWith((state) {
+        overlayColor: WidgetStateProperty.resolveWith((state) {
-          if (state.contains(MaterialState.focused)) {
+          if (state.contains(WidgetState.focused)) {
             return AFThemeExtension.of(context).greyHover;
           }
           return Colors.transparent;
         }),
-        shape: const MaterialStatePropertyAll(
+        shape: const WidgetStatePropertyAll(
           RoundedRectangleBorder(borderRadius: Corners.s6Border),
         ),
       ),
       statesController: _materialStatesController,
       child: Container(
-        color: _materialStatesController.value
+        color: _materialStatesController.value.contains(WidgetState.hovered) ||
-                    .contains(MaterialState.hovered) ||
+                _materialStatesController.value.contains(WidgetState.focused)
-                _materialStatesController.value.contains(MaterialState.focused)
             ? Theme.of(context).colorScheme.primary
-            : Theme.of(context).colorScheme.onBackground,
+            : AFThemeExtension.of(context).onBackground,
         width: 12,
         height: 1,
       ),

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/select_option_cell_editor.dart

@@ -380,7 +380,7 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
                   icon: FlowySvg(
                     FlowySvgs.three_dots_s,
                     size: const Size.square(16),
-                    color: Theme.of(context).colorScheme.onBackground,
+                    color: AFThemeExtension.of(context).onBackground,
                   ),
                 ),
               ],
@@ -462,7 +462,7 @@ class SelectOptionTagCell extends StatelessWidget {
                     child: FlowySvg(
                       FlowySvgs.drag_element_s,
                       size: const Size.square(14),
-                      color: Theme.of(context).colorScheme.onBackground,
+                      color: AFThemeExtension.of(context).onBackground,
                     ),
                   ),
                 ),

frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_property.dart

@@ -314,17 +314,17 @@ class ToggleHiddenFieldsVisibilityButton extends StatelessWidget {
       constraints: const BoxConstraints(minWidth: double.infinity),
       child: TextButton.icon(
         style: Theme.of(context).textButtonTheme.style?.copyWith(
-              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+              shape: WidgetStateProperty.all<RoundedRectangleBorder>(
                 RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(12.0),
                 ),
               ),
-              overlayColor: MaterialStateProperty.all<Color>(
+              overlayColor: WidgetStateProperty.all<Color>(
                 Theme.of(context).hoverColor,
               ),
               alignment: AlignmentDirectional.centerStart,
               splashFactory: NoSplash.splashFactory,
-              padding: const MaterialStatePropertyAll(
+              padding: const WidgetStatePropertyAll(
                 EdgeInsets.symmetric(vertical: 14, horizontal: 6),
               ),
             ),

frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart

@@ -9,6 +9,7 @@ import 'package:appflowy/plugins/database/grid/application/sort/sort_editor_bloc
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -128,7 +129,6 @@ void _showDatabaseFieldListFromToolbar(
     showHeader: true,
     showBackButton: true,
     title: LocaleKeys.grid_settings_properties.tr(),
-    showDivider: true,
     builder: (_) {
       return BlocProvider.value(
         value: context.read<ViewBloc>(),
@@ -150,7 +150,7 @@ void _showEditSortPanelFromToolbar(
     showDragHandle: true,
     showDivider: false,
     useSafeArea: false,
-    backgroundColor: Theme.of(context).colorScheme.background,
+    backgroundColor: AFThemeExtension.of(context).background,
     builder: (_) {
       return BlocProvider.value(
         value: context.read<SortEditorBloc>(),

frontend/appflowy_flutter/lib/plugins/document/presentation/banner.dart

@@ -23,7 +23,7 @@ class DocumentBanner extends StatelessWidget {
       constraints: const BoxConstraints(minHeight: 60),
       child: Container(
         width: double.infinity,
-        color: colorScheme.surfaceVariant,
+        color: colorScheme.surfaceContainerHighest,
         child: FittedBox(
           fit: BoxFit.scaleDown,
           child: Row(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -437,7 +437,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
             Material(
           child: DecoratedBox(
             decoration: BoxDecoration(
-              color: Theme.of(context).colorScheme.surfaceVariant,
+              color: Theme.of(context).colorScheme.surfaceContainerHighest,
               borderRadius: BorderRadius.circular(4),
             ),
             child: FindAndReplaceMenuWidget(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/mobile_block_action_buttons.dart

@@ -74,7 +74,6 @@ class MobileBlockActionButtons extends StatelessWidget {
       context,
       showHeader: true,
       showCloseButton: true,
-      showDivider: true,
       showDragHandle: true,
       title: LocaleKeys.document_plugins_action.tr(),
       builder: (context) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart

@@ -300,7 +300,7 @@ class ColorOptionAction extends PopoverActionCell {
           colors: colors,
           selected: selectedColor,
           border: Border.all(
-            color: Theme.of(context).colorScheme.onBackground,
+            color: AFThemeExtension.of(context).onBackground,
           ),
           onTap: (option, index) async {
             final transaction = editorState.transaction;

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_language_selector.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_item_list_menu.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
@@ -8,7 +6,9 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 CodeBlockLanguagePickerBuilder codeBlockLanguagePickerBuilder = (
@@ -70,7 +70,7 @@ class _CodeBlockLanguageSelectorState
             widget.language?.capitalize() ??
                 LocaleKeys.document_codeBlock_language_auto.tr(),
             constraints: const BoxConstraints(minWidth: 50),
-            fontColor: Theme.of(context).colorScheme.onBackground,
+            fontColor: AFThemeExtension.of(context).onBackground,
             padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 4),
             fillColor: Colors.transparent,
             hoverColor: Theme.of(context).colorScheme.secondaryContainer,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/error/error_block_component_builder.dart

@@ -61,7 +61,7 @@ class _ErrorBlockComponentWidgetState extends State<ErrorBlockComponentWidget>
   Widget build(BuildContext context) {
     Widget child = DecoratedBox(
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceVariant,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
         borderRadius: BorderRadius.circular(4),
       ),
       child: FlowyButton(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_placeholder.dart

@@ -49,7 +49,7 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
   Widget build(BuildContext context) {
     final Widget child = DecoratedBox(
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceVariant,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
         borderRadius: BorderRadius.circular(4),
       ),
       child: FlowyHover(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/unsupport_image_widget.dart

@@ -14,7 +14,7 @@ class UnSupportImageWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return DecoratedBox(
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceVariant,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
         borderRadius: BorderRadius.circular(4),
       ),
       child: FlowyHover(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart

@@ -107,7 +107,7 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
             }),
             indicatorSize: TabBarIndicatorSize.label,
             isScrollable: true,
-            overlayColor: MaterialStatePropertyAll(
+            overlayColor: WidgetStatePropertyAll(
               PlatformExtension.isDesktop
                   ? Theme.of(context).colorScheme.secondary
                   : Colors.transparent,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation.dart

@@ -77,7 +77,7 @@ class _InlineMathEquationState extends State<InlineMathEquation> {
                     ),
                     fontSize: 14.0,
                     color: widget.textStyle?.color ??
-                        theme.colorScheme.onBackground,
+                        theme.colorScheme.onSurface,
                   ),
                 ),
                 const HSpace(2),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/math_equation/math_equation_block_component.dart

@@ -124,7 +124,7 @@ class MathEquationBlockComponentWidgetState
       decoration: BoxDecoration(
         color: formula.isNotEmpty
             ? Colors.transparent
-            : Theme.of(context).colorScheme.surfaceVariant,
+            : Theme.of(context).colorScheme.surfaceContainerHighest,
         borderRadius: BorderRadius.circular(4),
       ),
       child: FlowyHover(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_item/utils.dart

@@ -10,8 +10,6 @@ Future<T?> showEditLinkBottomSheet<T>(
 ) {
   return showMobileBottomSheet(
     context,
-    showHeader: false,
-    showCloseButton: false,
     showDragHandle: true,
     padding: const EdgeInsets.symmetric(horizontal: 16),
     builder: (context) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart

@@ -22,8 +22,6 @@ Future<void> showTextColorAndBackgroundColorPicker(
   await showMobileBottomSheet(
     context,
     showHeader: true,
-    showCloseButton: false,
-    showDivider: true,
     showDragHandle: true,
     showDoneButton: true,
     barrierColor: Colors.transparent,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/page_style/_page_style_cover_image.dart

@@ -26,6 +26,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:image_picker/image_picker.dart';
+import 'package:flowy_infra/theme_extension.dart';
 
 class PageStyleCoverImage extends StatelessWidget {
   PageStyleCoverImage({
@@ -188,7 +189,7 @@ class PageStyleCoverImage extends StatelessWidget {
         );
       },
       title: LocaleKeys.pageStyle_presets.tr(),
-      backgroundColor: Theme.of(context).colorScheme.background,
+      backgroundColor: AFThemeExtension.of(context).background,
       builder: (_) {
         return BlocProvider.value(
           value: pageStyleBloc,
@@ -266,7 +267,7 @@ class PageStyleCoverImage extends StatelessWidget {
       showHeader: true,
       showRemoveButton: true,
       title: LocaleKeys.pageStyle_unsplash.tr(),
-      backgroundColor: Theme.of(context).colorScheme.background,
+      backgroundColor: AFThemeExtension.of(context).background,
       onRemove: () {
         pageStyleBloc.add(
           DocumentPageStyleEvent.updateCoverImage(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/page_style/_page_style_icon.dart

@@ -7,6 +7,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style
 import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_style_util.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -77,8 +78,7 @@ class _PageStyleIconState extends State<PageStyleIcon> {
       showDoneButton: true,
       showHeader: true,
       title: LocaleKeys.titleBar_pageIcon.tr(),
-      backgroundColor: Theme.of(context).colorScheme.background,
+      backgroundColor: AFThemeExtension.of(context).background,
-      isScrollControlled: true,
       enableDraggableScrollable: true,
       minChildSize: 0.6,
       initialChildSize: 0.61,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/page_style/_page_style_layout.dart

@@ -8,6 +8,7 @@ import 'package:appflowy/shared/feedback_gesture_detector.dart';
 import 'package:appflowy/util/font_family_extension.dart';
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -208,8 +209,7 @@ class _FontButton extends StatelessWidget {
       showDoneButton: true,
       showHeader: true,
       title: LocaleKeys.titleBar_font.tr(),
-      backgroundColor: Theme.of(context).colorScheme.background,
+      backgroundColor: AFThemeExtension.of(context).background,
-      isScrollControlled: true,
       enableDraggableScrollable: true,
       minChildSize: 0.6,
       initialChildSize: 0.61,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_option_action.dart

@@ -137,7 +137,7 @@ class TableColorOptionAction extends PopoverActionCell {
           colors: colors,
           selected: selectedColor,
           border: Border.all(
-            color: Theme.of(context).colorScheme.onBackground,
+            color: AFThemeExtension.of(context).onBackground,
           ),
           onTap: (option, index) async {
             final backgroundColor =

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart

@@ -15,6 +15,7 @@ import 'package:appflowy/workspace/application/settings/appearance/appearance_cu
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:collection/collection.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -42,6 +43,7 @@ class EditorStyleCustomizer {
 
   EditorStyle desktop() {
     final theme = Theme.of(context);
+    final afThemeExtension = AFThemeExtension.of(context);
     final appearanceFont = context.read<AppearanceSettingsCubit>().state.font;
     final appearance = context.read<DocumentAppearanceCubit>().state;
     final fontSize = appearance.fontSize;
@@ -60,8 +62,7 @@ class EditorStyleCustomizer {
       textStyleConfiguration: TextStyleConfiguration(
         text: baseTextStyle(fontFamily).copyWith(
           fontSize: fontSize,
-          color: theme.colorScheme.onBackground,
+          color: afThemeExtension.onBackground,
-          height: 1.5,
         ),
         bold: baseTextStyle(fontFamily, fontWeight: FontWeight.bold).copyWith(
           fontWeight: FontWeight.w600,
@@ -93,6 +94,7 @@ class EditorStyleCustomizer {
   }
 
   EditorStyle mobile() {
+    final afThemeExtension = AFThemeExtension.of(context);
     final pageStyle = context.read<DocumentPageStyleBloc>().state;
     final theme = Theme.of(context);
     final fontSize = pageStyle.fontLayout.fontSize;
@@ -108,10 +110,10 @@ class EditorStyleCustomizer {
       padding: padding,
       defaultTextDirection: defaultTextDirection,
       textStyleConfiguration: TextStyleConfiguration(
+        lineHeight: lineHeight,
         text: baseTextStyle.copyWith(
           fontSize: fontSize,
-          color: theme.colorScheme.onBackground,
+          color: afThemeExtension.onBackground,
-          height: lineHeight,
         ),
         bold: baseTextStyle.copyWith(fontWeight: FontWeight.w600),
         italic: baseTextStyle.copyWith(fontStyle: FontStyle.italic),
@@ -177,7 +179,7 @@ class EditorStyleCustomizer {
     return baseTextStyle(fontFamily).copyWith(
       fontSize: fontSize,
       height: 1.5,
-      color: Theme.of(context).colorScheme.onBackground,
+      color: AFThemeExtension.of(context).onBackground,
     );
   }
 
@@ -187,16 +189,17 @@ class EditorStyleCustomizer {
       fontFamily: defaultFontFamily,
       fontSize: fontSize,
       height: 1.5,
-      color: Theme.of(context).colorScheme.onBackground.withOpacity(0.6),
+      color: AFThemeExtension.of(context).onBackground.withOpacity(0.6),
     );
   }
 
   SelectionMenuStyle selectionMenuStyleBuilder() {
     final theme = Theme.of(context);
+    final afThemeExtension = AFThemeExtension.of(context);
     return SelectionMenuStyle(
       selectionMenuBackgroundColor: theme.cardColor,
-      selectionMenuItemTextColor: theme.colorScheme.onBackground,
+      selectionMenuItemTextColor: afThemeExtension.onBackground,
-      selectionMenuItemIconColor: theme.colorScheme.onBackground,
+      selectionMenuItemIconColor: afThemeExtension.onBackground,
       selectionMenuItemSelectedIconColor: theme.colorScheme.onSurface,
       selectionMenuItemSelectedTextColor: theme.colorScheme.onSurface,
       selectionMenuItemSelectedColor: theme.hoverColor,
@@ -205,10 +208,11 @@ class EditorStyleCustomizer {
 
   InlineActionsMenuStyle inlineActionsMenuStyleBuilder() {
     final theme = Theme.of(context);
+    final afThemeExtension = AFThemeExtension.of(context);
     return InlineActionsMenuStyle(
       backgroundColor: theme.cardColor,
-      groupTextColor: theme.colorScheme.onBackground.withOpacity(.8),
+      groupTextColor: afThemeExtension.onBackground.withOpacity(.8),
-      menuItemTextColor: theme.colorScheme.onBackground,
+      menuItemTextColor: afThemeExtension.onBackground,
       menuItemSelectedColor: theme.colorScheme.secondary,
       menuItemSelectedTextColor: theme.colorScheme.onSurface,
     );

frontend/appflowy_flutter/lib/shared/window_title_bar.dart

@@ -73,7 +73,7 @@ class _WindowTitleBarState extends State<WindowTitleBar> {
     return Container(
       height: 40,
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceVariant,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
       ),
       child: DragToMoveArea(
         child: Row(

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

@@ -154,20 +154,20 @@ class _DesktopSignInButton extends StatelessWidget {
           ),
         ),
         style: ButtonStyle(
-          overlayColor: MaterialStateProperty.resolveWith<Color?>(
+          overlayColor: WidgetStateProperty.resolveWith<Color?>(
             (states) {
-              if (states.contains(MaterialState.hovered)) {
+              if (states.contains(WidgetState.hovered)) {
                 return style.colorScheme.onSecondaryContainer;
               }
               return null;
             },
           ),
-          shape: MaterialStateProperty.all(
+          shape: WidgetStateProperty.all(
             const RoundedRectangleBorder(
               borderRadius: Corners.s6Border,
             ),
           ),
-          side: MaterialStateProperty.all(
+          side: WidgetStateProperty.all(
             BorderSide(
               color: style.dividerColor,
             ),

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

@@ -1,9 +1,8 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/shared/google_fonts_extension.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
+import 'package:flutter/material.dart';
 
 // the default font family is empty, so we can use the default font family of the platform
 // the system will choose the default font family of the platform
@@ -20,10 +19,10 @@ const builtInCodeFontFamily = 'RobotoMono';
 abstract class BaseAppearance {
   final white = const Color(0xFFFFFFFF);
 
-  final Set<MaterialState> scrollbarInteractiveStates = <MaterialState>{
+  final Set<WidgetState> scrollbarInteractiveStates = <WidgetState>{
-    MaterialState.pressed,
+    WidgetState.pressed,
-    MaterialState.hovered,
+    WidgetState.hovered,
-    MaterialState.dragged,
+    WidgetState.dragged,
   };
 
   TextStyle getFontStyle({

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

@@ -34,8 +34,6 @@ class DesktopAppearance extends BaseAppearance {
       // Editor: toolbarColor
       onTertiary: theme.toolbarColor,
       tertiaryContainer: theme.questionBubbleBG,
-      background: theme.surface,
-      onBackground: theme.text,
       surface: theme.surface,
       // text&icon color when it is hovered
       onSurface: theme.hoverFG,
@@ -44,7 +42,7 @@ class DesktopAppearance extends BaseAppearance {
       onError: theme.onPrimary,
       error: theme.red,
       outline: theme.shader4,
-      surfaceVariant: theme.sidebarBg,
+      surfaceContainerHighest: theme.sidebarBg,
       shadow: theme.shadow,
     );
 
@@ -76,13 +74,13 @@ class DesktopAppearance extends BaseAppearance {
         contentTextStyle: TextStyle(color: colorScheme.onSurface),
       ),
       scrollbarTheme: ScrollbarThemeData(
-        thumbColor: MaterialStateProperty.resolveWith((states) {
+        thumbColor: WidgetStateProperty.resolveWith((states) {
           if (states.any(scrollbarInteractiveStates.contains)) {
             return theme.shader7;
           }
           return theme.shader5;
         }),
-        thickness: MaterialStateProperty.resolveWith((states) {
+        thickness: WidgetStateProperty.resolveWith((states) {
           if (states.any(scrollbarInteractiveStates.contains)) {
             return 4;
           }
@@ -144,6 +142,8 @@ class DesktopAppearance extends BaseAppearance {
             fontWeight: FontWeight.w400,
             fontColor: theme.hint,
           ),
+          onBackground: theme.text,
+          background: theme.surface,
         ),
       ],
     );

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

@@ -1,11 +1,10 @@
-import 'package:flutter/material.dart';
-
 // ThemeData in mobile
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra/theme_extension.dart';
+import 'package:flutter/material.dart';
 
 class MobileAppearance extends BaseAppearance {
   static const _primaryColor = Color(0xFF00BCF0); //primary 100
@@ -49,14 +48,12 @@ class MobileAppearance extends BaseAppearance {
             tertiary: const Color(0xff858585), // for light text
             error: const Color(0xffFB006D),
             onError: const Color(0xffFB006D),
-            background: Colors.white,
-            onBackground: _onBackgroundColor,
             outline: const Color(0xffe3e3e3),
             outlineVariant: const Color(0xffCBD5E0).withOpacity(0.24),
             //Snack bar
             surface: Colors.white,
             onSurface: _onSurfaceColor, // text/body color
-            surfaceVariant: const Color.fromARGB(255, 216, 216, 216),
+            surfaceContainerHighest: const Color.fromARGB(255, 216, 216, 216),
           )
         : ColorScheme(
             brightness: brightness,
@@ -67,8 +64,6 @@ class MobileAppearance extends BaseAppearance {
             tertiary: const Color(0xff858585), // temp
             error: const Color(0xffFB006D),
             onError: const Color(0xffFB006D),
-            background: const Color(0xff121212), // temp
-            onBackground: Colors.white,
             outline: _hintColorInDarkMode,
             outlineVariant: Colors.black,
             //Snack bar
@@ -78,6 +73,10 @@ class MobileAppearance extends BaseAppearance {
     final hintColor = brightness == Brightness.light
         ? const Color(0x991F2329)
         : _hintColorInDarkMode;
+    final onBackground =
+        brightness == Brightness.light ? _onBackgroundColor : Colors.white;
+    final background =
+        brightness == Brightness.light ? Colors.white : const Color(0xff121212);
 
     return ThemeData(
       useMaterial3: false,
@@ -86,14 +85,14 @@ class MobileAppearance extends BaseAppearance {
       dividerColor: colorTheme.outline, //caption
       hintColor: hintColor,
       disabledColor: colorTheme.outline,
-      scaffoldBackgroundColor: colorTheme.background,
+      scaffoldBackgroundColor: background,
       appBarTheme: AppBarTheme(
         toolbarHeight: 44.0,
-        foregroundColor: colorTheme.onBackground,
+        foregroundColor: onBackground,
-        backgroundColor: colorTheme.background,
+        backgroundColor: background,
         centerTitle: false,
         titleTextStyle: TextStyle(
-          color: colorTheme.onBackground,
+          color: onBackground,
           fontSize: 18,
           fontWeight: FontWeight.w600,
           letterSpacing: 0.05,
@@ -101,8 +100,8 @@ class MobileAppearance extends BaseAppearance {
         shadowColor: colorTheme.outlineVariant,
       ),
       radioTheme: RadioThemeData(
-        fillColor: MaterialStateProperty.resolveWith((states) {
+        fillColor: WidgetStateProperty.resolveWith((states) {
-          if (states.contains(MaterialState.selected)) {
+          if (states.contains(WidgetState.selected)) {
             return colorTheme.primary;
           }
           return colorTheme.outline;
@@ -111,20 +110,20 @@ class MobileAppearance extends BaseAppearance {
       // button
       elevatedButtonTheme: ElevatedButtonThemeData(
         style: ButtonStyle(
-          fixedSize: MaterialStateProperty.all(const Size.fromHeight(48)),
+          fixedSize: WidgetStateProperty.all(const Size.fromHeight(48)),
-          elevation: MaterialStateProperty.all(0),
+          elevation: WidgetStateProperty.all(0),
-          textStyle: MaterialStateProperty.all(
+          textStyle: WidgetStateProperty.all(
             TextStyle(
               fontSize: 14,
               fontFamily: fontStyle.fontFamily,
               fontWeight: FontWeight.w600,
             ),
           ),
-          shadowColor: MaterialStateProperty.all(null),
+          shadowColor: WidgetStateProperty.all(null),
-          foregroundColor: MaterialStateProperty.all(Colors.white),
+          foregroundColor: WidgetStateProperty.all(Colors.white),
-          backgroundColor: MaterialStateProperty.resolveWith<Color>(
+          backgroundColor: WidgetStateProperty.resolveWith<Color>(
-            (Set<MaterialState> states) {
+            (Set<WidgetState> states) {
-              if (states.contains(MaterialState.disabled)) {
+              if (states.contains(WidgetState.disabled)) {
                 return _primaryColor;
               }
               return colorTheme.primary;
@@ -134,29 +133,29 @@ class MobileAppearance extends BaseAppearance {
       ),
       outlinedButtonTheme: OutlinedButtonThemeData(
         style: ButtonStyle(
-          textStyle: MaterialStateProperty.all(
+          textStyle: WidgetStateProperty.all(
             TextStyle(
               fontSize: 14,
               fontFamily: fontStyle.fontFamily,
               fontWeight: FontWeight.w500,
             ),
           ),
-          foregroundColor: MaterialStateProperty.all(colorTheme.onBackground),
+          foregroundColor: WidgetStateProperty.all(onBackground),
-          backgroundColor: MaterialStateProperty.all(colorTheme.background),
+          backgroundColor: WidgetStateProperty.all(background),
-          shape: MaterialStateProperty.all(
+          shape: WidgetStateProperty.all(
             RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
           ),
-          side: MaterialStateProperty.all(
+          side: WidgetStateProperty.all(
             BorderSide(color: colorTheme.outline, width: 0.5),
           ),
-          padding: MaterialStateProperty.all(
+          padding: WidgetStateProperty.all(
             const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
           ),
         ),
       ),
       textButtonTheme: TextButtonThemeData(
         style: ButtonStyle(
-          textStyle: MaterialStateProperty.all(fontStyle),
+          textStyle: WidgetStateProperty.all(fontStyle),
         ),
       ),
       // text
@@ -170,7 +169,7 @@ class MobileAppearance extends BaseAppearance {
           letterSpacing: 0.16,
         ),
         displayMedium: fontStyle.copyWith(
-          color: colorTheme.onBackground,
+          color: onBackground,
           fontSize: 32,
           fontWeight: FontWeight.w600,
           height: 1.20,
@@ -178,33 +177,33 @@ class MobileAppearance extends BaseAppearance {
         ),
         // H1 Semi 26
         displaySmall: fontStyle.copyWith(
-          color: colorTheme.onBackground,
+          color: onBackground,
           fontWeight: FontWeight.w600,
           height: 1.10,
           letterSpacing: 0.13,
         ),
         // body2 14 Regular
         bodyMedium: fontStyle.copyWith(
-          color: colorTheme.onBackground,
+          color: onBackground,
           fontWeight: FontWeight.w400,
           letterSpacing: 0.07,
         ),
         // Trash empty title
         labelLarge: fontStyle.copyWith(
-          color: colorTheme.onBackground,
+          color: onBackground,
           fontSize: 22,
           fontWeight: FontWeight.w600,
           letterSpacing: -0.3,
         ),
         // setting item title
         labelMedium: fontStyle.copyWith(
-          color: colorTheme.onSurface,
+          color: onBackground,
           fontSize: 18,
           fontWeight: FontWeight.w500,
         ),
         // setting group title
         labelSmall: fontStyle.copyWith(
-          color: colorTheme.onBackground,
+          color: onBackground,
           fontSize: 16,
           fontWeight: FontWeight.w600,
           letterSpacing: 0.05,
@@ -273,6 +272,8 @@ class MobileAppearance extends BaseAppearance {
             fontWeight: FontWeight.w400,
             color: theme.hint,
           ),
+          onBackground: onBackground,
+          background: background,
         ),
         ToolbarColorExtension.fromBrightness(brightness),
       ],

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart

@@ -211,7 +211,7 @@ class _SidebarState extends State<_Sidebar> {
     final userState = context.read<UserWorkspaceBloc>().state;
     return DecoratedBox(
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceVariant,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
         border: Border(
           right: BorderSide(color: Theme.of(context).dividerColor),
         ),

frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/flowy_tab.dart

@@ -86,7 +86,7 @@ class _FlowyTabState extends State<FlowyTab> {
       return AFThemeExtension.of(context).lightGreyHover;
     }
 
-    return Theme.of(context).colorScheme.surfaceVariant;
+    return Theme.of(context).colorScheme.surfaceContainerHighest;
   }
 
   void _closeTab([TapUpDetails? details]) => context

frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/tabs_manager.dart

@@ -59,7 +59,7 @@ class _TabsManagerState extends State<TabsManager>
               alignment: Alignment.bottomLeft,
               height: HomeSizes.tabBarHeigth,
               decoration: BoxDecoration(
-                color: Theme.of(context).colorScheme.surfaceVariant,
+                color: Theme.of(context).colorScheme.surfaceContainerHighest,
               ),
 
               /// TODO(Xazin): Custom Reorderable TabBar

frontend/appflowy_flutter/lib/workspace/presentation/home/toast.dart

@@ -57,7 +57,7 @@ void showSnackBarMessage(
 }) {
   ScaffoldMessenger.of(context).showSnackBar(
     SnackBar(
-      backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
+      backgroundColor: Theme.of(context).colorScheme.surfaceContainerHighest,
       duration: duration,
       action: !showCancel
           ? null

frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/inbox_action_bar.dart

@@ -81,30 +81,30 @@ class _ToggleUnreadsButtonState extends State<_ToggleUnreadsButton> {
       showSelectedIcon: false,
       style: ButtonStyle(
         tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-        side: MaterialStatePropertyAll(
+        side: WidgetStatePropertyAll(
           BorderSide(color: Theme.of(context).dividerColor),
         ),
-        shape: const MaterialStatePropertyAll(
+        shape: const WidgetStatePropertyAll(
           RoundedRectangleBorder(
             borderRadius: Corners.s6Border,
           ),
         ),
-        foregroundColor: MaterialStateProperty.resolveWith<Color>(
+        foregroundColor: WidgetStateProperty.resolveWith<Color>(
           (state) {
-            if (state.contains(MaterialState.selected)) {
+            if (state.contains(WidgetState.selected)) {
               return Theme.of(context).colorScheme.onPrimary;
             }
 
             return AFThemeExtension.of(context).textColor;
           },
         ),
-        backgroundColor: MaterialStateProperty.resolveWith<Color>(
+        backgroundColor: WidgetStateProperty.resolveWith<Color>(
           (state) {
-            if (state.contains(MaterialState.selected)) {
+            if (state.contains(WidgetState.selected)) {
               return Theme.of(context).colorScheme.primary;
             }
 
-            if (state.contains(MaterialState.hovered)) {
+            if (state.contains(WidgetState.hovered)) {
               return AFThemeExtension.of(context).lightGreyHover;
             }
 

frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_workspace_view.dart

@@ -930,7 +930,7 @@ class _CursorColorValueWidget extends StatelessWidget {
         FlowyText(
           LocaleKeys.appName.tr(),
           // To avoid the text color changes when it is hovered in dark mode
-          color: Theme.of(context).colorScheme.onBackground,
+          color: AFThemeExtension.of(context).onBackground,
         ),
       ],
     );
@@ -981,7 +981,7 @@ class _SelectionColorValueWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // To avoid the text color changes when it is hovered in dark mode
-    final textColor = Theme.of(context).colorScheme.onBackground;
+    final textColor = AFThemeExtension.of(context).onBackground;
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [

frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/af_dropdown_menu_entry.dart

@@ -21,12 +21,12 @@ DropdownMenuEntry<T> buildDropdownMenuEntry<T>(
   return DropdownMenuEntry<T>(
     style: ButtonStyle(
       foregroundColor:
-          MaterialStatePropertyAll(Theme.of(context).colorScheme.primary),
+          WidgetStatePropertyAll(Theme.of(context).colorScheme.primary),
-      padding: MaterialStateProperty.all(
+      padding: WidgetStateProperty.all(
         const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
       ),
-      minimumSize: const MaterialStatePropertyAll(Size(double.infinity, 29)),
+      minimumSize: const WidgetStatePropertyAll(Size(double.infinity, 29)),
-      maximumSize: const MaterialStatePropertyAll(Size(double.infinity, 29)),
+      maximumSize: const WidgetStatePropertyAll(Size(double.infinity, 29)),
     ),
     value: value,
     label: label,

frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/setting_value_dropdown.dart

@@ -1,7 +1,7 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 
 class SettingValueDropDown extends StatefulWidget {
   const SettingValueDropDown({
@@ -45,7 +45,7 @@ class _SettingValueDropDownState extends State<SettingValueDropDown> {
       child: widget.child ??
           FlowyTextButton(
             widget.currentValue,
-            fontColor: Theme.of(context).colorScheme.onBackground,
+            fontColor: AFThemeExtension.maybeOf(context)?.onBackground,
             fillColor: Colors.transparent,
             onPressed: () {},
           ),

frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/settings_dropdown.dart

@@ -59,14 +59,14 @@ class _SettingsDropdownState<T> extends State<SettingsDropdown<T>> {
                 ?.copyWith(fontFamily: fontFamilyUsed),
             menuStyle: MenuStyle(
               maximumSize:
-                  const MaterialStatePropertyAll(Size(double.infinity, 250)),
+                  const WidgetStatePropertyAll(Size(double.infinity, 250)),
-              elevation: const MaterialStatePropertyAll(10),
+              elevation: const WidgetStatePropertyAll(10),
               shadowColor:
-                  MaterialStatePropertyAll(Colors.black.withOpacity(0.4)),
+                  WidgetStatePropertyAll(Colors.black.withOpacity(0.4)),
-              backgroundColor: MaterialStatePropertyAll(
+              backgroundColor: WidgetStatePropertyAll(
                 Theme.of(context).cardColor,
               ),
-              padding: const MaterialStatePropertyAll(
+              padding: const WidgetStatePropertyAll(
                 EdgeInsets.symmetric(horizontal: 6, vertical: 8),
               ),
               alignment: Alignment.bottomLeft,

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/src/flowy_emoji_picker_config.dart

@@ -29,6 +29,6 @@ EmojiPickerConfig buildFlowyEmojiPickerConfig(BuildContext context) {
     noRecentsText: LocaleKeys.emoji_noRecent.tr(),
     noRecentsStyle: style.textTheme.bodyMedium,
     noEmojiFoundText: LocaleKeys.emoji_noEmojiFound.tr(),
-    scrollBarHandleColor: style.colorScheme.onBackground,
+    scrollBarHandleColor: style.colorScheme.onSurface,
   );
 }

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart

@@ -18,6 +18,7 @@ import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flowy_infra/theme_extension.dart';
 
 class AppFlowyCloudViewSetting extends StatelessWidget {
   const AppFlowyCloudViewSetting({
@@ -289,7 +290,7 @@ class CloudURLInputState extends State<CloudURLInput> {
             .copyWith(fontWeight: FontWeight.w400, fontSize: 16),
         enabledBorder: UnderlineInputBorder(
           borderSide:
-              BorderSide(color: Theme.of(context).colorScheme.onBackground),
+              BorderSide(color: AFThemeExtension.of(context).onBackground),
         ),
         focusedBorder: UnderlineInputBorder(
           borderSide: BorderSide(color: Theme.of(context).colorScheme.primary),

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_cloud.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/env/env.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
@@ -15,7 +13,9 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.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';
 
@@ -127,7 +127,7 @@ class CloudTypeSwitcher extends StatelessWidget {
             child: FlowyTextButton(
               padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 6),
               titleFromCloudType(cloudType),
-              fontColor: Theme.of(context).colorScheme.onBackground,
+              fontColor: AFThemeExtension.of(context).onBackground,
               fillColor: Colors.transparent,
               onPressed: () {},
             ),
@@ -159,7 +159,6 @@ class CloudTypeSwitcher extends StatelessWidget {
                 showHeader: true,
                 showDragHandle: true,
                 showDivider: false,
-                showCloseButton: false,
                 title: LocaleKeys.settings_menu_cloudServerType.tr(),
                 builder: (context) {
                   return Column(

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_supabase_cloud.dart

@@ -1,7 +1,3 @@
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/core/helpers/url_launcher.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/application/settings/supabase_cloud_setting_bloc.dart';
@@ -15,9 +11,13 @@ import 'package:appflowy_backend/protobuf/flowy-user/user_setting.pb.dart';
 import 'package:appflowy_result/appflowy_result.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class SettingSupabaseCloudView extends StatelessWidget {
@@ -293,7 +293,7 @@ class SupabaseInputState extends State<SupabaseInput> {
             .copyWith(fontWeight: FontWeight.w400, fontSize: 16),
         enabledBorder: UnderlineInputBorder(
           borderSide:
-              BorderSide(color: Theme.of(context).colorScheme.onBackground),
+              BorderSide(color: AFThemeExtension.of(context).onBackground),
         ),
         focusedBorder: UnderlineInputBorder(
           borderSide: BorderSide(color: Theme.of(context).colorScheme.primary),

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu.dart

@@ -32,7 +32,7 @@ class SettingsMenu extends StatelessWidget {
             padding: const EdgeInsets.symmetric(vertical: 8) +
                 const EdgeInsets.only(left: 8, right: 4),
             decoration: BoxDecoration(
-              color: Theme.of(context).colorScheme.surfaceVariant,
+              color: Theme.of(context).colorScheme.surfaceContainerHighest,
               borderRadius: const BorderRadius.only(
                 topLeft: Radius.circular(8),
                 bottomLeft: Radius.circular(8),

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/theme_upload_decoration.dart

@@ -1,4 +1,5 @@
 import 'package:dotted_border/dotted_border.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 
 import 'theme_upload_view.dart';
@@ -15,7 +16,7 @@ class ThemeUploadDecoration extends StatelessWidget {
         borderRadius: BorderRadius.circular(ThemeUploadWidget.borderRadius),
         color: Theme.of(context).colorScheme.surface,
         border: Border.all(
-          color: Theme.of(context).colorScheme.onBackground.withOpacity(
+          color: AFThemeExtension.of(context).onBackground.withOpacity(
                 ThemeUploadWidget.fadeOpacity,
               ),
         ),
@@ -26,7 +27,7 @@ class ThemeUploadDecoration extends StatelessWidget {
         dashPattern: const [6, 6],
         color: Theme.of(context)
             .colorScheme
-            .onBackground
+            .onSurface
             .withOpacity(ThemeUploadWidget.fadeOpacity),
         radius: const Radius.circular(ThemeUploadWidget.borderRadius),
         child: ClipRRect(

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/theme_upload_failure_widget.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/theme_upload/theme_upload.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 
@@ -24,7 +25,7 @@ class ThemeUploadFailureWidget extends StatelessWidget {
           FlowySvg(
             FlowySvgs.close_m,
             size: ThemeUploadWidget.iconSize,
-            color: Theme.of(context).colorScheme.onBackground,
+            color: AFThemeExtension.of(context).onBackground,
           ),
           FlowyText.medium(
             errorMessage,

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/theme_upload_learn_more_button.dart

@@ -8,6 +8,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/buttons/secondary_button.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
+import 'package:flowy_infra/theme_extension.dart';
 
 class ThemeUploadLearnMoreButton extends StatelessWidget {
   const ThemeUploadLearnMoreButton({super.key});
@@ -21,7 +22,7 @@ class ThemeUploadLearnMoreButton extends StatelessWidget {
       height: ThemeUploadWidget.buttonSize.height,
       child: IntrinsicWidth(
         child: SecondaryButton(
-          outlineColor: Theme.of(context).colorScheme.onBackground,
+          outlineColor: AFThemeExtension.of(context).onBackground,
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 8),
             child: FlowyText.medium(

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/theme_upload_loading_widget.dart

@@ -13,7 +13,7 @@ class ThemeUploadLoadingWidget extends StatelessWidget {
       padding: ThemeUploadWidget.padding,
       color: Theme.of(context)
           .colorScheme
-          .background
+          .surface
           .withOpacity(ThemeUploadWidget.fadeOpacity),
       constraints: const BoxConstraints.expand(),
       child: Column(

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/theme_upload/upload_new_theme_widget.dart

@@ -2,6 +2,7 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/theme_upload/theme_upload.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
@@ -13,7 +14,7 @@ class UploadNewThemeWidget extends StatelessWidget {
     return Container(
       color: Theme.of(context)
           .colorScheme
-          .background
+          .surface
           .withOpacity(ThemeUploadWidget.fadeOpacity),
       padding: ThemeUploadWidget.padding,
       child: Column(
@@ -23,7 +24,7 @@ class UploadNewThemeWidget extends StatelessWidget {
           FlowySvg(
             FlowySvgs.folder_m,
             size: ThemeUploadWidget.iconSize,
-            color: Theme.of(context).colorScheme.onBackground,
+            color: AFThemeExtension.of(context).onBackground,
           ),
           FlowyText.medium(
             LocaleKeys.settings_appearance_themeUpload_description.tr(),

frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart

@@ -214,7 +214,7 @@ class NavigatorOkCancelDialog extends StatelessWidget {
             ),
             VSpace(Insets.sm * 1.5),
             Container(
-              color: Theme.of(context).colorScheme.surfaceVariant,
+              color: Theme.of(context).colorScheme.surfaceContainerHighest,
               height: 1,
             ),
             VSpace(Insets.m * 1.5),

frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart

@@ -5,6 +5,9 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   static AFThemeExtension of(BuildContext context) =>
       Theme.of(context).extension<AFThemeExtension>()!;
 
+  static AFThemeExtension? maybeOf(BuildContext context) =>
+      Theme.of(context).extension<AFThemeExtension>();
+
   const AFThemeExtension({
     required this.warning,
     required this.success,
@@ -32,6 +35,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     required this.progressBarBGColor,
     required this.toggleButtonBGColor,
     required this.gridRowCountColor,
+    required this.background,
+    required this.onBackground,
   });
 
   final Color? warning;
@@ -64,6 +69,9 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   final TextStyle callout;
   final TextStyle caption;
 
+  final Color background;
+  final Color onBackground;
+
   @override
   AFThemeExtension copyWith({
     Color? warning,
@@ -92,6 +100,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     TextStyle? code,
     TextStyle? callout,
     TextStyle? caption,
+    Color? background,
+    Color? onBackground,
   }) =>
       AFThemeExtension(
         warning: warning ?? this.warning,
@@ -121,6 +131,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
         code: code ?? this.code,
         callout: callout ?? this.callout,
         caption: caption ?? this.caption,
+        onBackground: onBackground ?? this.onBackground,
+        background: background ?? this.background,
       );
 
   @override
@@ -165,6 +177,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
       code: other.code,
       callout: other.callout,
       caption: other.caption,
+      onBackground: Color.lerp(onBackground, other.onBackground, t)!,
+      background: Color.lerp(background, other.background, t)!,
     );
   }
 }

frontend/appflowy_flutter/packages/flowy_infra_ui/example/pubspec.yaml

@@ -4,7 +4,7 @@ description: Demonstrates how to use the flowy_infra_ui plugin.
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 
 environment:
-  flutter: ">=3.19.0"
+  flutter: ">=3.22.0"
   sdk: ">=3.1.5 <4.0.0"
 
 dependencies:

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/flowy_infra_ui.dart

@@ -1,22 +1,19 @@
 // Basis
+export '/widget/separated_flex.dart';
+export '/widget/spacing.dart';
 export 'basis.dart';
-
+export 'src/flowy_overlay/appflowy_popover.dart';
-// Keyboard
+export 'src/flowy_overlay/flowy_dialog.dart';
-export 'src/keyboard/keyboard_visibility_detector.dart';
-
 // Overlay
 export 'src/flowy_overlay/flowy_overlay.dart';
 export 'src/flowy_overlay/list_overlay.dart';
 export 'src/flowy_overlay/option_overlay.dart';
-export 'src/flowy_overlay/flowy_dialog.dart';
+// Keyboard
-export 'src/flowy_overlay/appflowy_popover.dart';
+export 'src/keyboard/keyboard_visibility_detector.dart';
+export 'style_widget/button.dart';
+export 'style_widget/color_picker.dart';
+export 'style_widget/icon_button.dart';
+export 'style_widget/scrolling/styled_list.dart';
+export 'style_widget/scrolling/styled_scroll_bar.dart';
 export 'style_widget/text.dart';
 export 'style_widget/text_field.dart';
-
-export 'style_widget/button.dart';
-export 'style_widget/icon_button.dart';
-export 'style_widget/scrolling/styled_scroll_bar.dart';
-export '/widget/spacing.dart';
-export '/widget/separated_flex.dart';
-export 'style_widget/scrolling/styled_list.dart';
-export 'style_widget/color_picker.dart';

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart

@@ -128,7 +128,7 @@ class FlowyButton extends StatelessWidget {
                 (Platform.isIOS || Platform.isAndroid)
             ? BoxDecoration(
                 border: Border.all(
-                color: Theme.of(context).colorScheme.surfaceVariant,
+                color: Theme.of(context).colorScheme.surfaceContainerHighest,
                 width: 1.0,
               ))
             : null);
@@ -210,12 +210,12 @@ class FlowyTextButton extends StatelessWidget {
         onPressed: onPressed ?? () {},
         focusNode: FocusNode(skipTraversal: onPressed == null),
         style: ButtonStyle(
-          overlayColor: const MaterialStatePropertyAll(Colors.transparent),
+          overlayColor: const WidgetStatePropertyAll(Colors.transparent),
           splashFactory: NoSplash.splashFactory,
           tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-          padding: MaterialStateProperty.all(padding),
+          padding: WidgetStateProperty.all(padding),
-          elevation: MaterialStateProperty.all(0),
+          elevation: WidgetStateProperty.all(0),
-          shape: MaterialStateProperty.all(
+          shape: WidgetStateProperty.all(
             RoundedRectangleBorder(
               side: BorderSide(
                 color: isDangerous
@@ -225,7 +225,7 @@ class FlowyTextButton extends StatelessWidget {
               borderRadius: radius ?? Corners.s6Border,
             ),
           ),
-          textStyle: MaterialStateProperty.all(
+          textStyle: WidgetStateProperty.all(
             TextStyle(
               fontWeight: fontWeight ?? FontWeight.w500,
               fontSize: fontSize,
@@ -233,9 +233,9 @@ class FlowyTextButton extends StatelessWidget {
               fontFamily: fontFamily,
             ),
           ),
-          backgroundColor: MaterialStateProperty.resolveWith(
+          backgroundColor: WidgetStateProperty.resolveWith(
             (states) {
-              if (states.contains(MaterialState.hovered)) {
+              if (states.contains(WidgetState.hovered)) {
                 return hoverColor ??
                     (isDangerous
                         ? Theme.of(context).colorScheme.error
@@ -248,9 +248,9 @@ class FlowyTextButton extends StatelessWidget {
                       : Theme.of(context).colorScheme.secondaryContainer);
             },
           ),
-          foregroundColor: MaterialStateProperty.resolveWith(
+          foregroundColor: WidgetStateProperty.resolveWith(
             (states) {
-              if (states.contains(MaterialState.hovered)) {
+              if (states.contains(WidgetState.hovered)) {
                 return fontHoverColor ??
                     (fontColor ?? Theme.of(context).colorScheme.onSurface);
               }

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/snap_bar.dart

@@ -9,7 +9,7 @@ void showSnapBar(BuildContext context, String title, {VoidCallback? onClosed}) {
   ScaffoldMessenger.of(context)
       .showSnackBar(
         SnackBar(
-          backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
+          backgroundColor: Theme.of(context).colorScheme.surfaceContainerHighest,
           duration: const Duration(milliseconds: 8000),
           content: FlowyText(
             title,

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/error_page.dart

@@ -1,3 +1,4 @@
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_svg/flowy_svg.dart';
 import 'package:flutter/material.dart';
@@ -155,7 +156,7 @@ class StackTracePreview extends StatelessWidget {
               Align(
                 alignment: Alignment.centerRight,
                 child: FlowyButton(
-                  hoverColor: Theme.of(context).colorScheme.onBackground,
+                  hoverColor: AFThemeExtension.of(context).onBackground,
                   text: const FlowyText(
                     "Copy",
                   ),

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/rounded_button.dart

@@ -83,7 +83,7 @@ class RoundedImageButton extends StatelessWidget {
       child: TextButton(
         onPressed: press,
         style: ButtonStyle(
-            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+            shape: WidgetStateProperty.all<RoundedRectangleBorder>(
                 RoundedRectangleBorder(borderRadius: borderRadius))),
         child: child,
       ),

frontend/appflowy_flutter/pubspec.lock

@@ -53,11 +53,11 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: b827d08
+      ref: "0c79b870586f4bc5c23b61b327c51fe6a8856b47"
-      resolved-ref: b827d089b6e97762806075953a433cfcbe697a73
+      resolved-ref: "0c79b870586f4bc5c23b61b327c51fe6a8856b47"
       url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
     source: git
-    version: "2.4.0"
+    version: "2.5.1"
   appflowy_editor_plugins:
     dependency: "direct main"
     description:
@@ -949,10 +949,10 @@ packages:
     dependency: "direct main"
     description:
       name: intl
-      sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d"
+      sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf
       url: "https://pub.dev"
     source: hosted
-    version: "0.18.1"
+    version: "0.19.0"
   intl_utils:
     dependency: transitive
     description:
@@ -1037,26 +1037,26 @@ packages:
     dependency: "direct main"
     description:
       name: leak_tracker
-      sha256: "78eb209deea09858f5269f5a5b02be4049535f568c07b275096836f01ea323fa"
+      sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.0"
+    version: "10.0.4"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
       name: leak_tracker_flutter_testing
-      sha256: b46c5e37c19120a8a01918cfaf293547f47269f7cb4b0058f21531c2465d6ef0
+      sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.3"
   leak_tracker_testing:
     dependency: transitive
     description:
       name: leak_tracker_testing
-      sha256: a597f72a664dbd293f3bfc51f9ba69816f84dcd403cdac7066cb3f6003f3ab47
+      sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.1"
   linked_scroll_controller:
     dependency: "direct main"
     description:
@@ -1149,10 +1149,10 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: d584fa6707a52763a52446f02cc621b077888fb63b93bbcb1143a7be5a0c0c04
+      sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136"
       url: "https://pub.dev"
     source: hosted
-    version: "1.11.0"
+    version: "1.12.0"
   mime:
     dependency: transitive
     description:
@@ -1525,10 +1525,10 @@ packages:
     dependency: "direct main"
     description:
       name: scaled_app
-      sha256: "3415fad16d1cf283112988985ccd14c4cd28bf48cbe6432d59e158f3b632d58d"
+      sha256: a2ad9f22cf2200a5ce455b59c5ea7bfb09a84acfc52452d1db54f4958c99d76a
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.0"
+    version: "2.3.0"
   screen_retriever:
     dependency: transitive
     description:
@@ -1860,10 +1860,10 @@ packages:
     dependency: "direct main"
     description:
       name: table_calendar
-      sha256: "1e3521a3e6d3fc7f645a58b135ab663d458ab12504f1ea7f9b4b81d47086c478"
+      sha256: b759eb6caa88dda8e51c70ee43c19d1682f8244458f84cced9138ee35b2ce416
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.9"
+    version: "3.1.1"
   term_glyph:
     dependency: transitive
     description:
@@ -1876,26 +1876,26 @@ packages:
     dependency: transitive
     description:
       name: test
-      sha256: a1f7595805820fcc05e5c52e3a231aedd0b72972cb333e8c738a8b1239448b6f
+      sha256: "7ee446762c2c50b3bd4ea96fe13ffac69919352bd3b4b17bac3f3465edc58073"
       url: "https://pub.dev"
     source: hosted
-    version: "1.24.9"
+    version: "1.25.2"
   test_api:
     dependency: transitive
     description:
       name: test_api
-      sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
+      sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f"
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.1"
+    version: "0.7.0"
   test_core:
     dependency: transitive
     description:
       name: test_core
-      sha256: a757b14fc47507060a162cc2530d9a4a2f92f5100a952c7443b5cad5ef5b106a
+      sha256: "2bc4b4ecddd75309300d8096f781c0e3280ca1ef85beda558d33fcbedc2eead4"
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.9"
+    version: "0.6.0"
   textstyle_extensions:
     dependency: transitive
     description:
@@ -2101,10 +2101,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: b3d56ff4341b8f182b96aceb2fa20e3dcb336b9f867bc0eafc0de10f1048e957
+      sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec"
       url: "https://pub.dev"
     source: hosted
-    version: "13.0.0"
+    version: "14.2.1"
   watcher:
     dependency: transitive
     description:
@@ -2203,4 +2203,4 @@ packages:
     version: "2.0.0"
 sdks:
   dart: ">=3.3.0 <4.0.0"
-  flutter: ">=3.19.0"
+  flutter: ">=3.22.0"

frontend/appflowy_flutter/pubspec.yaml

@@ -18,7 +18,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 version: 0.5.8
 
 environment:
-  flutter: ">=3.19.0"
+  flutter: ">=3.22.0"
   sdk: ">=3.3.0 <4.0.0"
 
 # Dependencies specify other packages that your package needs in order to work.
@@ -55,7 +55,7 @@ dependencies:
     path: packages/appflowy_popover
 
   #  third party packages
-  intl: ^0.18.0
+  intl: ^0.19.0
   time: ^2.1.3
   equatable: ^2.0.5
   freezed_annotation: ^2.2.0
@@ -135,7 +135,7 @@ dependencies:
   numerus: ^2.1.2
   flutter_animate: ^4.5.0
   permission_handler: ^11.3.1
-  scaled_app: ^2.2.0
+  scaled_app: ^2.3.0
 
 dev_dependencies:
   flutter_lints: ^3.0.1
@@ -172,7 +172,7 @@ dependency_overrides:
   appflowy_editor:
     git:
       url: https://github.com/AppFlowy-IO/appflowy-editor.git
-      ref: "b827d08"
+      ref: "0c79b870586f4bc5c23b61b327c51fe6a8856b47"
 
   sheet:
     git:

frontend/scripts/docker-buildfiles/Dockerfile

@@ -39,7 +39,7 @@ RUN source ~/.cargo/env && \
 RUN sudo pacman -S --noconfirm git tar gtk3
 RUN curl -sSfL \
       --output flutter.tar.xz \
-      https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.19.0-stable.tar.xz && \
+      https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.22.0-stable.tar.xz && \
     tar -xf flutter.tar.xz && \
     rm flutter.tar.xz
 RUN flutter config --enable-linux-desktop