refactor: abstract suggestions menu box

lib/screens/common_widgets/env_trigger_field.dart

@@ -34,7 +34,7 @@ class EnvironmentTriggerField extends StatelessWidget {
       key: Key(keyId),
       textEditingController: controller,
       focusNode: focusNode,
-      optionsWidthFactor: optionsWidthFactor,
+      optionsWidthFactor: optionsWidthFactor ?? 1,
       autocompleteTriggers: [
         if (autocompleteNoTrigger != null) autocompleteNoTrigger!,
         AutocompleteTrigger(

lib/screens/common_widgets/env_trigger_options.dart

@@ -1,9 +1,8 @@
-import 'package:apidash/consts.dart';
-import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:apidash/models/models.dart';
 import 'package:apidash/providers/providers.dart';
+import 'package:apidash/widgets/widgets.dart';
 import 'package:apidash/utils/utils.dart';
 
 import 'envvar_indicator.dart';
@@ -26,28 +25,11 @@ class EnvironmentTriggerOptions extends ConsumerWidget {
         getEnvironmentTriggerSuggestions(query, envMap, activeEnvironmentId);
     return suggestions == null || suggestions.isEmpty
         ? const SizedBox.shrink()
-        : ClipRRect(
+        : SuggestionsMenuBox(
-            borderRadius: kBorderRadius8,
-            child: Material(
-              type: MaterialType.card,
-              elevation: 8,
-              child: ConstrainedBox(
-                constraints:
-                    const BoxConstraints(maxHeight: kSuggestionsMenuMaxHeight),
-                child: Ink(
-                  width: kSuggestionsMenuWidth,
-                  decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.surface,
-                    borderRadius: kBorderRadius8,
-                    border: Border.all(
-                      color: Theme.of(context).colorScheme.outlineVariant,
-                    ),
-                  ),
             child: ListView.separated(
               shrinkWrap: true,
               itemCount: suggestions.length,
-                    separatorBuilder: (context, index) =>
+              separatorBuilder: (context, index) => const Divider(height: 2),
-                        const Divider(height: 2),
               itemBuilder: (context, index) {
                 final suggestion = suggestions[index];
                 return ListTile(
@@ -59,9 +41,6 @@ class EnvironmentTriggerOptions extends ConsumerWidget {
                 );
               },
             ),
-                ),
-              ),
-            ),
           );
   }
 }

lib/widgets/field_header.dart

@@ -1,9 +1,8 @@
-import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:multi_trigger_autocomplete/multi_trigger_autocomplete.dart';
 import 'package:apidash/utils/utils.dart';
 import 'package:apidash/screens/common_widgets/common_widgets.dart';
-import 'package:apidash/consts.dart';
+import 'package:apidash/widgets/widgets.dart';
 
 class HeaderField extends StatefulWidget {
   const HeaderField({
@@ -112,28 +111,11 @@ class _HeaderSuggestionsState extends State<HeaderSuggestions> {
     }
     return suggestions!.isEmpty
         ? const SizedBox.shrink()
-        : ClipRRect(
+        : SuggestionsMenuBox(
-            borderRadius: kBorderRadius8,
-            child: Material(
-              type: MaterialType.card,
-              elevation: 8,
-              child: ConstrainedBox(
-                constraints:
-                    const BoxConstraints(maxHeight: kSuggestionsMenuMaxHeight),
-                child: Ink(
-                  width: kSuggestionsMenuWidth,
-                  decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.surface,
-                    borderRadius: kBorderRadius8,
-                    border: Border.all(
-                      color: Theme.of(context).colorScheme.outlineVariant,
-                    ),
-                  ),
             child: ListView.separated(
               shrinkWrap: true,
               itemCount: suggestions!.length,
-                    separatorBuilder: (context, index) =>
+              separatorBuilder: (context, index) => const Divider(height: 2),
-                        const Divider(height: 2),
               itemBuilder: (context, index) {
                 final suggestion = suggestions![index];
                 return ListTile(
@@ -143,9 +125,6 @@ class _HeaderSuggestionsState extends State<HeaderSuggestions> {
                 );
               },
             ),
-                ),
-              ),
-            ),
           );
   }
 }

lib/widgets/suggestions_menu_box.dart

@@ -0,0 +1,34 @@
+import 'package:apidash_design_system/apidash_design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:apidash/consts.dart';
+
+class SuggestionsMenuBox extends StatelessWidget {
+  final Widget child;
+  const SuggestionsMenuBox({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: kBorderRadius8,
+      child: Material(
+        type: MaterialType.card,
+        elevation: 8,
+        child: ConstrainedBox(
+          constraints:
+              const BoxConstraints(maxHeight: kSuggestionsMenuMaxHeight),
+          child: Ink(
+            width: kSuggestionsMenuWidth,
+            decoration: BoxDecoration(
+              color: Theme.of(context).colorScheme.surface,
+              borderRadius: kBorderRadius8,
+              border: Border.all(
+                color: Theme.of(context).colorScheme.outlineVariant,
+              ),
+            ),
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/widgets.dart

@@ -51,6 +51,7 @@ export 'splitview_drawer.dart';
 export 'splitview_dashboard.dart';
 export 'splitview_equal.dart';
 export 'splitview_history.dart';
+export 'suggestions_menu_box.dart';
 export 'tabbar_segmented.dart';
 export 'table_map.dart';
 export 'table_request_form.dart';