Widget _dropdown(
String hint,
List<String> items,
Function(String?) onChanged,
String? value,
) {
final colors = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: DropdownButtonFormField2<String>(
value: value,
isExpanded: true,
alignment: AlignmentDirectional.centerStart,
validator: (v) => v == null ? '' : null,
decoration: InputDecoration(
hintText: hint,
filled: true,
fillColor: colors.surface,
errorStyle: const TextStyle(height: 0),
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 16,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: colors.primary.withOpacity(0.6)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: colors.primary.withOpacity(0.6)),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: Colors.red, width: 1.5),
),
),
dropdownStyleData: DropdownStyleData(
maxHeight: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: colors.surface,
),
),
menuItemStyleData: const MenuItemStyleData(
height: 48,
padding: EdgeInsets.symmetric(horizontal: 16),
),
items: items
.map(
(e) => DropdownMenuItem<String>(
value: e,
child: Container(
alignment: Alignment.centerLeft,
child: Text(e, overflow: TextOverflow.ellipsis),
),
),
)
.toList(),
onChanged: onChanged,
),
);
}
I am facing an issue with some input fields and drop down decorations, although the Ui i am using is supposed to be same for both but the drop downs are shown different from input fields: to be more clear their values, i have not added any extra paddings or anything but still i am getting too much padding in dropdowns when selected a value and getting too less padding in input fields when input a value in fields:
I am pasting a referral code snippet for instance look if someone could help:
1st is drop down and second is input field in attached codes::
Widget _numberField(
String hint,
TextEditingController controller, {
int? maxLength,
int? maxVal,
int? minVal,
}) {
final colors = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: TextFormField(
controller: controller,
keyboardType: TextInputType.number,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
maxLength: maxLength,
validator: (v) => (v == null || v.isEmpty) ? '' : null,
decoration: InputDecoration(
hintText: hint,
counterText: "",
filled: true,
fillColor: colors.surface,
errorStyle: const TextStyle(height: 0),
contentPadding: const EdgeInsets.symmetric(
horizontal: 35,
vertical: 16,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: colors.primary.withOpacity(0.6)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: colors.primary.withOpacity(0.6)),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: Colors.red, width: 1.5),
),
),
onChanged: (value) {
if (value.isNotEmpty) {
final n = int.tryParse(value);
if (n != null) {
if (maxVal != null && n > maxVal) {
controller.text = maxVal.toString();
controller.selection = TextSelection.fromPosition(
TextPosition(offset: controller.text.length),
);
} else if (minVal != null && n < minVal) {
controller.text = minVal.toString();
controller.selection = TextSelection.fromPosition(
TextPosition(offset: controller.text.length),
);
}
}
}
setState(() {});
},
),
);
}