fix: close popover after item selection in settings view (#3362)

* fix: close popover after item selection in settings view

* fix: add missing await before closing popover

* fix: find popover container by context instead of passing controllers around

* fix: add requested changes

* feat: close text direction settings popups after selection

* fix: clean up

* fix: restore theme value dropdown as StatefulWidget

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

@@ -3,6 +3,7 @@ import 'dart:io';
 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_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
@@ -27,7 +28,7 @@ class BrightnessSetting extends StatelessWidget {
           trailing: [
             ThemeValueDropDown(
               currentValue: _themeModeLabelText(currentThemeMode),
-              popupBuilder: (_) => Column(
+              popupBuilder: (context) => Column(
                 mainAxisSize: MainAxisSize.min,
                 children: [
                   _themeModeItemButton(context, ThemeMode.light),
@@ -52,7 +53,10 @@ class BrightnessSetting extends StatelessWidget {
         ],
       );
 
-  Widget _themeModeItemButton(BuildContext context, ThemeMode themeMode) {
+  Widget _themeModeItemButton(
+    BuildContext context,
+    ThemeMode themeMode,
+  ) {
     return SizedBox(
       height: 32,
       child: FlowyButton(
@@ -66,6 +70,7 @@ class BrightnessSetting extends StatelessWidget {
           if (currentThemeMode != themeMode) {
             context.read<AppearanceSettingsCubit>().setThemeMode(themeMode);
           }
+          PopoverContainer.of(context).close();
         },
       ),
     );

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

@@ -156,6 +156,7 @@ class ColorSchemeUploadPopover extends StatelessWidget {
                 if (currentTheme != theme) {
                   context.read<AppearanceSettingsCubit>().setTheme(theme);
                 }
+                PopoverContainer.of(context).close();
               },
             ),
           ),

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

@@ -2,6 +2,7 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy/workspace/application/appearance.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
@@ -25,7 +26,7 @@ class LayoutDirectionSetting extends StatelessWidget {
       trailing: [
         ThemeValueDropDown(
           currentValue: _layoutDirectionLabelText(currentLayoutDirection),
-          popupBuilder: (_) => Column(
+          popupBuilder: (context) => Column(
             mainAxisSize: MainAxisSize.min,
             children: [
               _layoutDirectionItemButton(context, LayoutDirection.ltrLayout),
@@ -54,6 +55,7 @@ class LayoutDirectionSetting extends StatelessWidget {
                 .read<AppearanceSettingsCubit>()
                 .setLayoutDirection(direction);
           }
+          PopoverContainer.of(context).close();
         },
       ),
     );
@@ -86,7 +88,7 @@ class TextDirectionSetting extends StatelessWidget {
         trailing: [
           ThemeValueDropDown(
             currentValue: _textDirectionLabelText(currentTextDirection),
-            popupBuilder: (_) => Column(
+            popupBuilder: (context) => Column(
               mainAxisSize: MainAxisSize.min,
               children: [
                 _textDirectionItemButton(context, null),
@@ -119,6 +121,7 @@ class TextDirectionSetting extends StatelessWidget {
                 .read<DocumentAppearanceCubit>()
                 .syncDefaultTextDirection(textDirection?.name);
           }
+          PopoverContainer.of(context).close();
         },
       ),
     );

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

@@ -148,7 +148,10 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> {
         .replaceAllMapped(camelCase, (m) => ' ${m.group(0)}');
   }
 
-  Widget _fontFamilyItemButton(BuildContext context, TextStyle style) {
+  Widget _fontFamilyItemButton(
+    BuildContext context,
+    TextStyle style,
+  ) {
     final buttonFontFamily = parseFontFamilyName(style.fontFamily!);
     return SizedBox(
       key: UniqueKey(),
@@ -179,6 +182,7 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> {
                   .syncFontFamily(fontFamily);
             }
           }
+          PopoverContainer.of(context).close();
         },
       ),
     );

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

@@ -32,6 +32,7 @@ class SettingsLanguageView extends StatelessWidget {
 
 class LanguageSelector extends StatelessWidget {
   final Locale currentLocale;
+  
   const LanguageSelector({
     super.key,
     required this.currentLocale,
@@ -49,9 +50,7 @@ class LanguageSelector extends StatelessWidget {
       ),
       popupBuilder: (BuildContext context) {
         final allLocales = EasyLocalization.of(context)!.supportedLocales;
-        return LanguageItemsListView(
-          allLocales: allLocales,
-        );
+        return LanguageItemsListView(allLocales: allLocales);
       },
     );
   }
@@ -74,7 +73,10 @@ class LanguageItemsListView extends StatelessWidget {
       child: ListView.builder(
         itemBuilder: (context, index) {
           final locale = allLocales[index];
-          return LanguageItem(locale: locale, currentLocale: state.locale);
+          return LanguageItem(
+            locale: locale,
+            currentLocale: state.locale,
+          );
         },
         itemCount: allLocales.length,
       ),
@@ -85,6 +87,7 @@ class LanguageItemsListView extends StatelessWidget {
 class LanguageItem extends StatelessWidget {
   final Locale locale;
   final Locale currentLocale;
+
   const LanguageItem({
     super.key,
     required this.locale,
@@ -105,6 +108,7 @@ class LanguageItem extends StatelessWidget {
           if (currentLocale != locale) {
             context.read<AppearanceSettingsCubit>().setLocale(context, locale);
           }
+          PopoverContainer.of(context).close();
         },
       ),
     );