From 1aa8707b8a5099a6b5f1b3eaceac388d2928f7ba Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Tue, 16 Apr 2024 08:53:20 +0200
Subject: [PATCH] chore(mobile): full width language change dropdown (#8806)

* chore(mobile): full width language change dropdown

* linting
---
 .../settings/ui/language_settings.dart        | 68 +++++++++++--------
 1 file changed, 39 insertions(+), 29 deletions(-)

diff --git a/mobile/lib/modules/settings/ui/language_settings.dart b/mobile/lib/modules/settings/ui/language_settings.dart
index c3cdde6859..ebe8673135 100644
--- a/mobile/lib/modules/settings/ui/language_settings.dart
+++ b/mobile/lib/modules/settings/ui/language_settings.dart
@@ -23,36 +23,46 @@ class LanguageSettings extends HookConsumerWidget {
     return ListView(
       padding: const EdgeInsets.all(16),
       children: [
-        DropdownMenu(
-          inputDecorationTheme: InputDecorationTheme(
-            border: OutlineInputBorder(
-              borderRadius: BorderRadius.circular(20),
-            ),
-            contentPadding: const EdgeInsets.only(left: 16),
-          ),
-          menuStyle: MenuStyle(
-            shape: MaterialStatePropertyAll<OutlinedBorder>(
-              RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(15),
-              ),
-            ),
-          ),
-          menuHeight: context.height * 0.5,
-          hintText: "Languages",
-          label: const Text('Languages'),
-          dropdownMenuEntries: locales.keys
-              .map(
-                (countryName) => DropdownMenuEntry(
-                  value: locales[countryName],
-                  label: countryName,
+        LayoutBuilder(
+          builder: (context, constraints) {
+            return DropdownMenu(
+              width: constraints.maxWidth,
+              inputDecorationTheme: InputDecorationTheme(
+                border: OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(20),
                 ),
-              )
-              .toList(),
-          controller: textController,
-          onSelected: (value) {
-            if (value != null) {
-              selectedLocale.value = value;
-            }
+                contentPadding: const EdgeInsets.only(left: 16),
+              ),
+              menuStyle: MenuStyle(
+                shape: MaterialStatePropertyAll<OutlinedBorder>(
+                  RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(15),
+                  ),
+                ),
+                backgroundColor: MaterialStatePropertyAll<Color>(
+                  context.isDarkTheme
+                      ? Colors.grey[900]!
+                      : context.scaffoldBackgroundColor,
+                ),
+              ),
+              menuHeight: context.height * 0.5,
+              hintText: "Languages",
+              label: const Text('Languages'),
+              dropdownMenuEntries: locales.keys
+                  .map(
+                    (countryName) => DropdownMenuEntry(
+                      value: locales[countryName],
+                      label: countryName,
+                    ),
+                  )
+                  .toList(),
+              controller: textController,
+              onSelected: (value) {
+                if (value != null) {
+                  selectedLocale.value = value;
+                }
+              },
+            );
           },
         ),
         const SizedBox(height: 16),