feat: improve snackbar UI style (#3562)

frontend/appflowy_flutter/lib/plugins/document/document_page.dart

@@ -10,6 +10,7 @@ import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy/plugins/document/presentation/export_page_widget.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/util/base64_string.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-document2/protobuf.dart'
     hide DocumentEvent;
@@ -17,7 +18,6 @@ import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -145,18 +145,8 @@ class _DocumentPageState extends State<DocumentPage> {
     const encoder = JsonEncoder.withIndent('  ');
     final json = encoder.convert(data.toProto3Json());
     await File(path).writeAsString(json.base64.base64);
-
+    if (mounted) {
-    _showMessage('Export success to $path');
+      showSnackBarMessage(context, 'Export success to $path');
-  }
-
-  void _showMessage(String message) {
-    if (!mounted) {
-      return;
     }
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: FlowyText(message),
-      ),
-    );
   }
 }

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

@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -65,12 +66,9 @@ class _ImageMenuState extends State<ImageMenu> {
     final url = widget.node.attributes[ImageBlockKeys.url];
     if (url != null) {
       Clipboard.setData(ClipboardData(text: url));
-      ScaffoldMessenger.of(context).showSnackBar(
+      showSnackBarMessage(
-        SnackBar(
+        context,
-          content: FlowyText(
+        LocaleKeys.document_plugins_image_copiedToPasteBoard.tr(),
-            LocaleKeys.document_plugins_image_copiedToPasteBoard.tr(),
-          ),
-        ),
       );
     }
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/auto_completion_node_widget.dart

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/uti
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/discard_dialog.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/loading.dart';
 import 'package:appflowy/user/application/user_service.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -196,9 +197,13 @@ class _AutoCompletionBlockComponentState
         .then((value) => value.toOption().toNullable());
     if (userProfile == null) {
       loading.stop();
-      await _showError(
+      if (mounted) {
-        LocaleKeys.document_plugins_autoGeneratorCantGetOpenAIKey.tr(),
+        showSnackBarMessage(
-      );
+          context,
+          LocaleKeys.document_plugins_autoGeneratorCantGetOpenAIKey.tr(),
+          showCancel: true,
+        );
+      }
       return;
     }
 
@@ -231,7 +236,11 @@ class _AutoCompletionBlockComponentState
       },
       onError: (error) async {
         loading.stop();
-        await _showError(error.message);
+        showSnackBarMessage(
+          context,
+          error.message,
+          showCancel: true,
+        );
       },
     );
     await _updateGenerationCount();
@@ -282,9 +291,13 @@ class _AutoCompletionBlockComponentState
         .then((value) => value.toOption().toNullable());
     if (userProfile == null) {
       loading.stop();
-      await _showError(
+      if (mounted) {
-        LocaleKeys.document_plugins_autoGeneratorCantGetOpenAIKey.tr(),
+        showSnackBarMessage(
-      );
+          context,
+          LocaleKeys.document_plugins_autoGeneratorCantGetOpenAIKey.tr(),
+          showCancel: true,
+        );
+      }
       return;
     }
     final textRobot = TextRobot(editorState: editorState);
@@ -311,7 +324,11 @@ class _AutoCompletionBlockComponentState
       onEnd: () async {},
       onError: (error) async {
         loading.stop();
-        await _showError(error.message);
+        showSnackBarMessage(
+          context,
+          error.message,
+          showCancel: true,
+        );
       },
     );
     await _updateGenerationCount();
@@ -399,20 +416,6 @@ class _AutoCompletionBlockComponentState
     await editorState.apply(transaction);
   }
 
-  Future<void> _showError(String message) async {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        action: SnackBarAction(
-          label: LocaleKeys.button_Cancel.tr(),
-          onPressed: () {
-            ScaffoldMessenger.of(context).hideCurrentSnackBar();
-          },
-        ),
-        content: FlowyText(message),
-      ),
-    );
-  }
-
   void _subscribeSelectionGesture() {
     interceptor = SelectionGestureInterceptor(
       key: AutoCompletionBlockKeys.type,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_node_widget.dart

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/uti
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/discard_dialog.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_action.dart';
 import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -454,24 +455,14 @@ class _SmartEditInputWidgetState extends State<SmartEditInputWidget> {
           });
         },
         onError: (error) async {
-          await _showError(error.message);
+          showSnackBarMessage(
+            context,
+            error.message,
+            showCancel: true,
+          );
           await _onExit();
         },
       );
     }
   }
-
-  Future<void> _showError(String message) async {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        action: SnackBarAction(
-          label: LocaleKeys.button_Cancel.tr(),
-          onPressed: () {
-            ScaffoldMessenger.of(context).hideCurrentSnackBar();
-          },
-        ),
-        content: FlowyText(message),
-      ),
-    );
-  }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_toolbar_item.dart

@@ -2,12 +2,12 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_action.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/user/application/user_service.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 
 final ToolbarItem smartEditItem = ToolbarItem(
@@ -71,7 +71,11 @@ class _SmartEditActionListState extends State<SmartEditActionList> {
             if (isOpenAIEnabled) {
               controller.show();
             } else {
-              _showError(LocaleKeys.document_plugins_smartEditDisabled.tr());
+              showSnackBarMessage(
+                context,
+                LocaleKeys.document_plugins_smartEditDisabled.tr(),
+                showCancel: true,
+              );
             }
           },
         );
@@ -111,18 +115,4 @@ class _SmartEditActionListState extends State<SmartEditActionList> {
       withUpdateSelection: false,
     );
   }
-
-  Future<void> _showError(String message) async {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        action: SnackBarAction(
-          label: LocaleKeys.button_Cancel.tr(),
-          onPressed: () {
-            ScaffoldMessenger.of(context).hideCurrentSnackBar();
-          },
-        ),
-        content: FlowyText(message),
-      ),
-    );
-  }
 }

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

@@ -1,4 +1,6 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/startup.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
@@ -40,9 +42,22 @@ void showMessageToast(String message) {
   );
 }
 
-void showSnackBarMessage(BuildContext context, String message) {
+void showSnackBarMessage(
+  BuildContext context,
+  String message, {
+  bool showCancel = false,
+}) {
   ScaffoldMessenger.of(context).showSnackBar(
     SnackBar(
+      action: !showCancel
+          ? null
+          : SnackBarAction(
+              label: LocaleKeys.button_Cancel.tr(),
+              textColor: Theme.of(context).colorScheme.onSurface,
+              onPressed: () {
+                ScaffoldMessenger.of(context).hideCurrentSnackBar();
+              },
+            ),
       content: FlowyText(
         message,
         color: Theme.of(context).colorScheme.onSurface,

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/color_scheme.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/application/appearance.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_appearance/theme_setting_entry_template.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/theme_upload/theme_upload_view.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
@@ -65,13 +66,9 @@ class ColorSchemeUploadOverlayButton extends StatelessWidget {
         ),
       ).then((value) {
         if (value == null) return;
-        ScaffoldMessenger.of(context).showSnackBar(
+        showSnackBarMessage(
-          SnackBar(
+          context,
-            content: FlowyText.medium(
+          LocaleKeys.settings_appearance_themeUpload_uploadSuccess.tr(),
-              color: Theme.of(context).colorScheme.onPrimary,
-              LocaleKeys.settings_appearance_themeUpload_uploadSuccess.tr(),
-            ),
-          ),
         );
       }),
     );

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

@@ -2,6 +2,7 @@ import 'dart:io';
 
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/export/document_exporter.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
 import 'package:appflowy/workspace/application/settings/settings_file_exporter_cubit.dart';
@@ -106,17 +107,24 @@ class _FileExporterWidgetState extends State<FileExporterWidget> {
                 final views = cubit!.state.selectedViews;
                 final result =
                     await _AppFlowyFileExporter.exportToPath(exportPath, views);
-                if (result.$1) {
+                if (result.$1 && mounted) {
                   // success
-                  _showToast(LocaleKeys.settings_files_exportFileSuccess.tr());
+                  showSnackBarMessage(
+                    context,
+                    LocaleKeys.settings_files_exportFileSuccess.tr(),
+                  );
                 } else {
-                  _showToast(
+                  showSnackBarMessage(
+                    context,
                     LocaleKeys.settings_files_exportFileFail.tr() +
                         result.$2.join('\n'),
                   );
                 }
               } else {
-                _showToast(LocaleKeys.settings_files_exportFileFail.tr());
+                showSnackBarMessage(
+                  context,
+                  LocaleKeys.settings_files_exportFileFail.tr(),
+                );
               }
               if (mounted) {
                 Navigator.of(context).popUntil(
@@ -129,17 +137,6 @@ class _FileExporterWidgetState extends State<FileExporterWidget> {
       ],
     );
   }
-
-  void _showToast(String message) {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: FlowyText(
-          message,
-          color: Theme.of(context).colorScheme.onSurface,
-        ),
-      ),
-    );
-  }
 }
 
 class _ExpandedList extends StatefulWidget {