Migrate DropdownButton => ADDropdownButton

lib/widgets/dropdown_codegen.dart

@@ -14,39 +14,12 @@ class DropdownButtonCodegenLanguage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final surfaceColor = Theme.of(context).colorScheme.surface;
+    return ADDropdownButton<CodegenLanguage>(
-    return DropdownButton<CodegenLanguage>(
-      isExpanded: true,
-      focusColor: surfaceColor,
       value: codegenLanguage,
-      icon: const Icon(
+      values: CodegenLanguage.values.map((e) => (e, e.label)),
-        Icons.unfold_more_rounded,
-        size: 16,
-      ),
-      elevation: 4,
-      style: kCodeStyle.copyWith(
-        color: Theme.of(context).colorScheme.primary,
-      ),
-      underline: Container(
-        height: 0,
-      ),
       onChanged: onChanged,
-      borderRadius: kBorderRadius12,
+      iconSize: 16,
-      items: CodegenLanguage.values
+      isExpanded: true,
-          .map<DropdownMenuItem<CodegenLanguage>>((CodegenLanguage value) {
-        return DropdownMenuItem<CodegenLanguage>(
-          value: value,
-          child: Padding(
-            padding: kPs8,
-            child: Text(
-              value.label,
-              style: kTextStyleButton,
-              overflow: TextOverflow.ellipsis,
-              maxLines: 1,
-            ),
-          ),
-        );
-      }).toList(),
     );
   }
 }

lib/widgets/dropdown_content_type.dart

@@ -14,36 +14,11 @@ class DropdownButtonContentType extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final surfaceColor = Theme.of(context).colorScheme.surface;
+    return ADDropdownButton<ContentType>(
-    return DropdownButton<ContentType>(
-      focusColor: surfaceColor,
       value: contentType,
-      icon: const Icon(
+      values: ContentType.values.map((e) => (e, e.name)),
-        Icons.unfold_more_rounded,
-        size: 16,
-      ),
-      elevation: 4,
-      style: kCodeStyle.copyWith(
-        color: Theme.of(context).colorScheme.primary,
-      ),
-      underline: Container(
-        height: 0,
-      ),
       onChanged: onChanged,
-      borderRadius: kBorderRadius12,
+      iconSize: 16,
-      items: ContentType.values
-          .map<DropdownMenuItem<ContentType>>((ContentType value) {
-        return DropdownMenuItem<ContentType>(
-          value: value,
-          child: Padding(
-            padding: kPs8,
-            child: Text(
-              value.name,
-              style: kTextStyleButton,
-            ),
-          ),
-        );
-      }).toList(),
     );
   }
 }

lib/widgets/dropdown_formdata.dart

@@ -14,35 +14,11 @@ class DropdownButtonFormData extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final surfaceColor = Theme.of(context).colorScheme.surface;
+    return ADDropdownButton<FormDataType>(
-    return DropdownButton<FormDataType>(
-      dropdownColor: surfaceColor,
-      focusColor: surfaceColor,
       value: formDataType,
-      icon: const Icon(
+      values: FormDataType.values.map((e) => (e, e.name)),
-        Icons.unfold_more_rounded,
-        size: 16,
-      ),
-      elevation: 4,
-      style: kCodeStyle.copyWith(
-        color: Theme.of(context).colorScheme.primary,
-      ),
-      underline: const IgnorePointer(),
       onChanged: onChanged,
-      borderRadius: kBorderRadius12,
+      iconSize: 16,
-      items: FormDataType.values
-          .map<DropdownMenuItem<FormDataType>>((FormDataType value) {
-        return DropdownMenuItem<FormDataType>(
-          value: value,
-          child: Padding(
-            padding: kPs8,
-            child: Text(
-              value.name,
-              style: kTextStyleButton,
-            ),
-          ),
-        );
-      }).toList(),
     );
   }
 }

lib/widgets/dropdown_http_method.dart

@@ -16,35 +16,19 @@ class DropdownButtonHttpMethod extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final surfaceColor = Theme.of(context).colorScheme.surface;
+    return ADDropdownButton<HTTPVerb>(
-    return DropdownButton<HTTPVerb>(
-      focusColor: surfaceColor,
       value: method,
-      icon: const Icon(Icons.unfold_more_rounded),
+      values: HTTPVerb.values.map((e) => (e, e.name.toUpperCase())),
-      elevation: 4,
-      underline: Container(
-        height: 0,
-      ),
-      borderRadius: kBorderRadius12,
       onChanged: onChanged,
-      items: HTTPVerb.values.map<DropdownMenuItem<HTTPVerb>>((HTTPVerb value) {
+      dropdownMenuItemPadding:
-        return DropdownMenuItem<HTTPVerb>(
+          EdgeInsets.only(left: context.isMediumWindow ? 8 : 16),
-          value: value,
+      dropdownMenuItemtextStyle: (HTTPVerb v) => kCodeStyle.copyWith(
-          child: Padding(
+        fontWeight: FontWeight.bold,
-            padding: EdgeInsets.only(left: context.isMediumWindow ? 8 : 16),
+        color: getHTTPMethodColor(
-            child: Text(
+          v,
-              value.name.toUpperCase(),
+          brightness: Theme.of(context).brightness,
-              style: kCodeStyle.copyWith(
+        ),
-                fontWeight: FontWeight.bold,
+      ),
-                color: getHTTPMethodColor(
-                  value,
-                  brightness: Theme.of(context).brightness,
-                ),
-              ),
-            ),
-          ),
-        );
-      }).toList(),
     );
   }
 }

lib/widgets/dropdown_import_format.dart

@@ -14,39 +14,11 @@ class DropdownButtonImportFormat extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final surfaceColor = Theme.of(context).colorScheme.surface;
+    return ADDropdownButton<ImportFormat>(
-    return DropdownButton<ImportFormat>(
-      isExpanded: false,
-      focusColor: surfaceColor,
       value: importFormat,
-      icon: const Icon(
+      values: ImportFormat.values.map((e) => (e, e.label)),
-        Icons.unfold_more_rounded,
-        size: 16,
-      ),
-      elevation: 4,
-      style: kCodeStyle.copyWith(
-        color: Theme.of(context).colorScheme.primary,
-      ),
-      underline: Container(
-        height: 0,
-      ),
       onChanged: onChanged,
-      borderRadius: kBorderRadius12,
+      iconSize: 16,
-      items: ImportFormat.values
-          .map<DropdownMenuItem<ImportFormat>>((ImportFormat value) {
-        return DropdownMenuItem<ImportFormat>(
-          value: value,
-          child: Padding(
-            padding: kPs8,
-            child: Text(
-              value.label,
-              style: kTextStyleButton,
-              overflow: TextOverflow.ellipsis,
-              maxLines: 1,
-            ),
-          ),
-        );
-      }).toList(),
     );
   }
 }

packages/apidash_design_system/lib/apidash_design_system.dart

@@ -1,4 +1,5 @@
 library apidash_design_system;
 
 export 'package:google_fonts/google_fonts.dart';
+export 'widgets/widgets.dart';
 export 'consts.dart';

packages/apidash_design_system/lib/widgets/dropdown.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import '../consts.dart';
+
+class ADDropdownButton<T> extends StatelessWidget {
+  const ADDropdownButton({
+    super.key,
+    this.value,
+    required this.values,
+    this.onChanged,
+    this.isExpanded = false,
+    this.iconSize,
+    this.dropdownMenuItemPadding = kPs8,
+    this.dropdownMenuItemtextStyle,
+  });
+
+  final T? value;
+  final Iterable<(T, String?)> values;
+  final void Function(T?)? onChanged;
+  final bool isExpanded;
+  final double? iconSize;
+  final EdgeInsetsGeometry dropdownMenuItemPadding;
+  final TextStyle? Function(T)? dropdownMenuItemtextStyle;
+
+  @override
+  Widget build(BuildContext context) {
+    final surfaceColor = Theme.of(context).colorScheme.surface;
+    return DropdownButton<T>(
+      isExpanded: isExpanded,
+      focusColor: surfaceColor,
+      value: value,
+      icon: Icon(
+        Icons.unfold_more_rounded,
+        size: iconSize,
+      ),
+      elevation: 4,
+      style: kCodeStyle.copyWith(
+        color: Theme.of(context).colorScheme.primary,
+      ),
+      underline: Container(
+        height: 0,
+      ),
+      onChanged: onChanged,
+      borderRadius: kBorderRadius12,
+      items: values.map<DropdownMenuItem<T>>(((T, String?) value) {
+        return DropdownMenuItem<T>(
+          value: value.$1,
+          child: Padding(
+            padding: dropdownMenuItemPadding,
+            child: Text(
+              value.$2 ?? value.$1.toString(),
+              style:
+                  dropdownMenuItemtextStyle?.call(value.$1) ?? kTextStyleButton,
+              overflow: isExpanded ? TextOverflow.ellipsis : null,
+              maxLines: isExpanded ? 1 : null,
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

packages/apidash_design_system/lib/widgets/widgets.dart

@@ -0,0 +1 @@
+export 'dropdown.dart';