79606899

Date: 2025-05-05 12:24:54
Score: 1
Natty:
Report link

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!

Reasons:
  • Blacklisted phrase (0.5): Thanks
  • RegEx Blacklisted phrase (1.5): fixIcon ??
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: Rajan