If you're using the prefixIcon
, it's important to set the suffixIcon
as well (even if it's just an empty SizedBox
) to ensure the hint text and label are centered correctly.
Here’s a modified version of your AppSearchTextField
widget with a fix that keeps the label and hint text properly aligned when a prefixIcon
is provided:
class AppSearchTextField extends StatelessWidget {
const AppSearchTextField({
super.key,
required this.controller,
this.onChanged,
this.hintText = 'Search',
this.suffixIcons = const [],
this.prefixIcon,
});
final TextEditingController controller;
final Function(String)? onChanged;
final String hintText;
/// List of suffix icons (can be GestureDetectors or IconButtons)
final List<Widget> suffixIcons;
/// Optional prefix icon (e.g., search icon)
final Widget? prefixIcon;
@override
Widget build(BuildContext context) {
return Container(
height: 36.h,
padding: EdgeInsets.symmetric(horizontal: 12.w),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: BorderRadius.circular(12.w),
),
child: Row(
children: [
Expanded(
child: TextField(
controller: controller,
onChanged: onChanged,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: hintText,
hintStyle: AppTextStyles.size15.copyWith(
color: Theme.of(context).colorScheme.onPrimary,
),
border: InputBorder.none,
prefixIconColor: Theme.of(context).colorScheme.onPrimary,
prefixIconConstraints: BoxConstraints(
minHeight: 24.h,
minWidth: 24.w,
),
prefixIcon: Padding(
padding: const EdgeInsets.only(right: 6.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
prefixIcon ?? const Icon(Icons.search),
],
),
),
suffixIcon: suffixIcons.isNotEmpty
? Row(
mainAxisSize: MainAxisSize.min,
children: suffixIcons
.map((icon) => Padding(
padding: const EdgeInsets.only(right: 4.0),
child: icon,
))
.toList(),
)
: const SizedBox(),
),
),
),
],
),
);
}
}
Please do try and vote this answer.
Thanks!