Abstract InputDecoration for TextField

Author: ashitaprasad

lib/screens/common_widgets/envfield_cell.dart

@@ -27,22 +27,9 @@ class EnvCellField extends StatelessWidget {
       style: kCodeStyle.copyWith(
         color: clrScheme.onSurface,
       ),
-      decoration: InputDecoration(
-        hintStyle: kCodeStyle.copyWith(
-          color: clrScheme.outlineVariant,
-        ),
+      decoration: getTextFieldInputDecoration(
+        clrScheme,
         hintText: hintText,
-        contentPadding: const EdgeInsets.only(bottom: 12),
-        focusedBorder: UnderlineInputBorder(
-          borderSide: BorderSide(
-            color: clrScheme.outlineVariant,
-          ),
-        ),
-        enabledBorder: UnderlineInputBorder(
-          borderSide: BorderSide(
-            color: clrScheme.surfaceContainerHighest,
-          ),
-        ),
       ),
       onChanged: onChanged,
     );

packages/apidash_design_system/lib/widgets/decoration_input_textfield.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import '../tokens/tokens.dart';
+
+InputDecoration getTextFieldInputDecoration(
+  ColorScheme clrScheme, {
+  Color? fillColor,
+  String? hintText,
+  TextStyle? hintTextStyle,
+  double? hintTextFontSize,
+  Color? hintTextColor,
+  EdgeInsetsGeometry? contentPadding,
+  Color? focussedBorderColor,
+  Color? enabledBorderColor,
+  bool? isDense,
+}) {
+  return InputDecoration(
+    filled: true,
+    fillColor: fillColor ?? clrScheme.surfaceContainerLowest,
+    hintStyle: hintTextStyle ??
+        kCodeStyle.copyWith(
+          fontSize: hintTextFontSize,
+          color: hintTextColor ?? clrScheme.outlineVariant,
+        ),
+    hintText: hintText,
+    contentPadding: contentPadding ?? kP10,
+    focusedBorder: OutlineInputBorder(
+      borderSide: BorderSide(
+        color: focussedBorderColor ?? clrScheme.outline,
+      ),
+    ),
+    enabledBorder: OutlineInputBorder(
+      borderSide: BorderSide(
+        color: enabledBorderColor ?? clrScheme.surfaceContainerHighest,
+      ),
+    ),
+    isDense: isDense,
+  );
+}

packages/apidash_design_system/lib/widgets/textfield_outlined.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import '../tokens/tokens.dart';
+import 'decoration_input_textfield.dart';
 
 class ADOutlinedTextField extends StatelessWidget {
   const ADOutlinedTextField({
@@ -65,26 +66,16 @@ class ADOutlinedTextField extends StatelessWidget {
             fontSize: textFontSize,
             color: textColor ?? clrScheme.onSurface,
           ),
-      decoration: InputDecoration(
-        filled: true,
-        fillColor: fillColor ?? clrScheme.surfaceContainerLowest,
-        hintStyle: hintTextStyle ??
-            kCodeStyle.copyWith(
-              fontSize: hintTextFontSize,
-              color: hintTextColor ?? clrScheme.outlineVariant,
-            ),
+      decoration: getTextFieldInputDecoration(
+        clrScheme,
+        fillColor: fillColor,
         hintText: hintText,
-        contentPadding: contentPadding ?? kP10,
-        focusedBorder: OutlineInputBorder(
-          borderSide: BorderSide(
-            color: focussedBorderColor ?? clrScheme.outline,
-          ),
-        ),
-        enabledBorder: OutlineInputBorder(
-          borderSide: BorderSide(
-            color: enabledBorderColor ?? clrScheme.surfaceContainerHighest,
-          ),
-        ),
+        hintTextStyle: hintTextStyle,
+        hintTextFontSize: hintTextFontSize,
+        hintTextColor: hintTextColor,
+        contentPadding: contentPadding,
+        focussedBorderColor: focussedBorderColor,
+        enabledBorderColor: enabledBorderColor,
         isDense: isDense,
       ),
       onChanged: onChanged,

packages/apidash_design_system/lib/widgets/widgets.dart

@@ -2,6 +2,7 @@ export 'button_filled.dart';
 export 'button_icon.dart';
 export 'button_text.dart';
 export 'checkbox.dart';
+export 'decoration_input_textfield.dart';
 export 'dropdown.dart';
 export 'popup_menu.dart';
 export 'snackbar.dart';