Hinttext in the TextFormField is not aligned with the prefix and suffix Icon


Some how the Hint text in the textformfield is a little bit elevated(feels as if it is upward incomparison to the two icons) in comparison to the prefix and suffix Icon.

enter image description here

I am also attaching the code that I am using for this TextFormfield:

                w400.size12.copyWith(color: BrandColor.foodsearchViewTextColor),
            cursorColor: BrandColor.foodsearchViewTextColor,
            decoration: InputDecoration(
                prefixIcon: Padding(
                  padding: const EdgeInsets.only(right: 18.0),
                  child: IconButton(
                    icon: SvgPicture.asset(
                      color: BrandColor.foodsearchViewTextColor,
                    onPressed: null,
                suffixIcon: Padding(
                  padding: const EdgeInsets.only(right: 14.0),
                  child: IconButton(
                    icon: SvgPicture.asset(
                      color: BrandColor.foodsearchViewTextColor,
                    onPressed: null,
                focusedBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
                errorBorder: InputBorder.none,
                disabledBorder: InputBorder.none,
                focusedErrorBorder: InputBorder.none,
                border: InputBorder.none,
                hintText: foodSearchText,
                hintStyle: w400.size12.copyWith(
                    color: BrandColor.foodsearchViewTextColor, fontSize: 13)),

I have also tried wrapping the textformfield with the center widget but it did not solve the problem.
I would really appreciate if someone can help


You can use contentPadding parameter in InputDecoration like this

contentPadding: EdgeInsets.symmetric(vertical: 15)


contentPadding: EdgeInsets.only(top: 15)

You can set contentPadding globally with the help of theme in MaterialApp

theme: ThemeData(
            inputDecorationTheme: InputDecorationTheme(
              contentPadding: EdgeInsets.symmetric(vertical: 15),

Answered By – Hemal Moradiya

Answer Checked By – Willingham (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *