I am using a DropdownButtonFormField
in Flutter, and I’d like the hint text to be centered within the dropdown field. Currently, the hint text aligns to the bottom, which doesn’t fit with the rest of my UI design.
Here is my code:
import 'package:clearcommish/utils/constant/app_style.dart';
import 'package:flutter/material.dart';
class CustomDropdown extends StatelessWidget {
final String labelText;
final String hintText;
final List<String> items;
final String? selectedItem;
final ValueChanged<String?> onChanged;
const CustomDropdown({
super.key,
required this.labelText,
required this.hintText,
required this.items,
required this.onChanged,
this.selectedItem,
});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: AppStyle.padding(context, vertical: 10),
child: Text(
labelText,
style: AppStyle.darkSlateGrayGilroy(fontSize: AppStyle.fontSize14),
),
),
DropdownButtonFormField<String>(
value: selectedItem,
decoration: InputDecoration(
hintText: hintText,
hintStyle:
AppStyle.lightSilverGilroy(fontSize: AppStyle.fontSize14),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: AppStyle.lightSilver),
borderRadius: BorderRadius.circular(15),
),
errorBorder: OutlineInputBorder(
borderSide: const BorderSide(color: AppStyle.lightSilver),
borderRadius: BorderRadius.circular(15),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: const BorderSide(color: AppStyle.lightSilver),
borderRadius: BorderRadius.circular(15),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: AppStyle.lightSilver),
borderRadius: BorderRadius.circular(15),
),
),
style: AppStyle.darkSlateGrayGilroy(fontSize: AppStyle.fontSize14),
dropdownColor: Colors.white,
items: items.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: onChanged,
),
],
);
}
}
Thank you in advance for any guidance!
I’ve tried adjusting the contentPadding
and setting alignLabelWithHint: true
within InputDecoration
, but these haven’t centered the hint text as I expected. Is there a way to center the hint text in a DropdownButtonFormField
, or are there any workarounds to achieve this effect?
2
Answers
try this
hintText: null, hint: Center( child: Text( hintText, style: AppStyle.lightSilverGilroy(fontSize: AppStyle.fontSize14), ), ),
Try isDense: false, property of DropdownButtonFormField.