fix: settings dropdown issue

lib/consts.dart

@@ -65,6 +65,7 @@ const kFormDataButtonLabelTextStyle = TextStyle(
   fontSize: 12,
   fontWeight: FontWeight.w600,
 );
+const kTextStylePopupMenuItem = TextStyle(fontSize: 16);
 
 const kBorderRadius4 = BorderRadius.all(Radius.circular(4));
 const kBorderRadius8 = BorderRadius.all(Radius.circular(8));

lib/screens/settings_page.dart

@@ -4,7 +4,7 @@ import '../providers/providers.dart';
 import '../widgets/widgets.dart';
 import '../common/utils.dart';
 import '../consts.dart';
-import 'package:apidash/extensions/extensions.dart';
+import '../extensions/extensions.dart';
 
 class SettingsPage extends ConsumerWidget {
   const SettingsPage({super.key});
@@ -76,27 +76,36 @@ class SettingsPage extends ConsumerWidget {
                     ),
                     borderRadius: kBorderRadius8,
                   ),
-                  child: DropdownButtonHideUnderline(
+                  child: URIPopupMenu(
-                    child: DropdownButton<String>(
+                    value: settings.defaultUriScheme,
-                      borderRadius: kBorderRadius8,
+                    onChanged: (value) {
-                      onChanged: (value) {
+                      ref
-                        ref
+                          .read(settingsProvider.notifier)
-                            .read(settingsProvider.notifier)
+                          .update(defaultUriScheme: value);
-                            .update(defaultUriScheme: value);
+                    },
-                      },
+                    items: kSupportedUriSchemes,
-                      value: settings.defaultUriScheme,
-                      items: kSupportedUriSchemes
-                          .map<DropdownMenuItem<String>>((String value) {
-                        return DropdownMenuItem<String>(
-                          value: value,
-                          child: Padding(
-                            padding: kP10,
-                            child: Text(value),
-                          ),
-                        );
-                      }).toList(),
-                    ),
                   ),
+                  // DropdownButtonHideUnderline(
+                  //   child: DropdownButton<String>(
+                  //     borderRadius: kBorderRadius8,
+                  //     onChanged: (value) {
+                  //       ref
+                  //           .read(settingsProvider.notifier)
+                  //           .update(defaultUriScheme: value);
+                  //     },
+                  //     value: settings.defaultUriScheme,
+                  //     items: kSupportedUriSchemes
+                  //         .map<DropdownMenuItem<String>>((String value) {
+                  //       return DropdownMenuItem<String>(
+                  //         value: value,
+                  //         child: Padding(
+                  //           padding: kP10,
+                  //           child: Text(value),
+                  //         ),
+                  //       );
+                  //     }).toList(),
+                  //   ),
+                  // ),
                 ),
               ),
               ListTile(
@@ -110,26 +119,35 @@ class SettingsPage extends ConsumerWidget {
                     ),
                     borderRadius: kBorderRadius8,
                   ),
-                  child: DropdownButtonHideUnderline(
+                  child: CodegenPopupMenu(
-                    child: DropdownButton<CodegenLanguage>(
+                    value: settings.defaultCodeGenLang,
-                      borderRadius: kBorderRadius8,
+                    onChanged: (value) {
-                      value: settings.defaultCodeGenLang,
+                      ref
-                      onChanged: (value) {
+                          .read(settingsProvider.notifier)
-                        ref
+                          .update(defaultCodeGenLang: value);
-                            .read(settingsProvider.notifier)
+                    },
-                            .update(defaultCodeGenLang: value);
+                    items: CodegenLanguage.values,
-                      },
-                      items: CodegenLanguage.values.map((value) {
-                        return DropdownMenuItem<CodegenLanguage>(
-                          value: value,
-                          child: Padding(
-                            padding: kP10,
-                            child: Text(value.label),
-                          ),
-                        );
-                      }).toList(),
-                    ),
                   ),
+                  // DropdownButtonHideUnderline(
+                  //   child: DropdownButton<CodegenLanguage>(
+                  //     borderRadius: kBorderRadius8,
+                  //     value: settings.defaultCodeGenLang,
+                  //     onChanged: (value) {
+                  //       ref
+                  //           .read(settingsProvider.notifier)
+                  //           .update(defaultCodeGenLang: value);
+                  //     },
+                  //     items: CodegenLanguage.values.map((value) {
+                  //       return DropdownMenuItem<CodegenLanguage>(
+                  //         value: value,
+                  //         child: Padding(
+                  //           padding: kP10,
+                  //           child: Text(value.label),
+                  //         ),
+                  //       );
+                  //     }).toList(),
+                  //   ),
+                  // ),
                 ),
               ),
               CheckboxListTile(

lib/widgets/popup_menu_codegen.dart

@@ -0,0 +1,53 @@
+import 'package:apidash/consts.dart';
+import 'package:apidash/extensions/extensions.dart';
+import 'package:flutter/material.dart';
+
+class CodegenPopupMenu extends StatelessWidget {
+  const CodegenPopupMenu({
+    super.key,
+    required this.value,
+    this.onChanged,
+    this.items,
+  });
+
+  final CodegenLanguage value;
+  final void Function(CodegenLanguage? value)? onChanged;
+  final List<CodegenLanguage>? items;
+  @override
+  Widget build(BuildContext context) {
+    final textClipLength = context.isCompactWindow ? 12 : 22;
+    final double boxLength = context.isCompactWindow ? 150 : 220;
+    return PopupMenuButton<CodegenLanguage>(
+      tooltip: "Select Code Generation Language",
+      surfaceTintColor: kColorTransparent,
+      constraints: BoxConstraints(minWidth: boxLength),
+      itemBuilder: (BuildContext context) => items!
+          .map((item) => PopupMenuItem<CodegenLanguage>(
+                value: item,
+                child: Text(
+                  item.label,
+                  style: kTextStylePopupMenuItem,
+                ),
+              ))
+          .toList(),
+      onSelected: onChanged,
+      child: Container(
+        width: boxLength,
+        padding: const EdgeInsets.all(8.0),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              value.label.clip(textClipLength),
+              style: kTextStylePopupMenuItem,
+            ),
+            const Icon(
+              Icons.unfold_more,
+              size: 16,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/popup_menu_uri.dart

@@ -0,0 +1,52 @@
+import 'package:apidash/consts.dart';
+import 'package:apidash/extensions/extensions.dart';
+import 'package:flutter/material.dart';
+
+class URIPopupMenu extends StatelessWidget {
+  const URIPopupMenu({
+    super.key,
+    required this.value,
+    this.onChanged,
+    this.items,
+  });
+
+  final String value;
+  final void Function(String? value)? onChanged;
+  final List<String>? items;
+  @override
+  Widget build(BuildContext context) {
+    final double boxLength = context.isCompactWindow ? 90 : 130;
+    return PopupMenuButton(
+      tooltip: "Select URI Scheme",
+      surfaceTintColor: kColorTransparent,
+      constraints: BoxConstraints(minWidth: boxLength),
+      itemBuilder: (BuildContext context) => items!
+          .map((item) => PopupMenuItem(
+                value: item,
+                child: Text(
+                  item,
+                  style: kTextStylePopupMenuItem,
+                ),
+              ))
+          .toList(),
+      onSelected: onChanged,
+      child: Container(
+        width: boxLength,
+        padding: const EdgeInsets.all(8.0),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              value,
+              style: kTextStylePopupMenuItem,
+            ),
+            const Icon(
+              Icons.unfold_more,
+              size: 16,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/widgets.dart

@@ -31,7 +31,9 @@ export 'json_previewer.dart';
 export 'markdown.dart';
 export 'menus.dart';
 export 'overlay_widget.dart';
-export 'popup_menus.dart';
+export 'popup_menu_codegen.dart';
+export 'popup_menu_env.dart';
+export 'popup_menu_uri.dart';
 export 'previewer.dart';
 export 'request_widgets.dart';
 export 'response_widgets.dart';