CODEWITHSUNDEEP
flutterandroid-edittextflutter-layouttextformfieldflutter-textformfield
Varun Jain
Varun Jain

Reputation: 155

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:

TextFormField(
            style:
                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(
                      SvgAssets.food_search_icon,
                      color: BrandColor.foodsearchViewTextColor,
                    ),
                    onPressed: null,
                  ),
                ),
                suffixIcon: Padding(
                  padding: const EdgeInsets.only(right: 14.0),
                  child: IconButton(
                    icon: SvgPicture.asset(
                      SvgAssets.food_searchview_suffix,
                      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

Upvotes: 3

Views: 9238

Answers (5)

Samet ÖZTOPRAK
Samet ÖZTOPRAK

Reputation: 3374

Use suffix and prefix properties. Here is the full example Code

  TextFormField(
  controller: controllerSearch,
  autofocus: true,
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp("[a-zA-Z0-9\u0020]"))
  ],
  textCapitalization: TextCapitalization.none,
  autocorrect: false,
  onChanged: (value) {
    debounce(
      () => onSearchChangedText(value.trim()),
    );
  },
  cursorColor: AppColors.appBarText,
  style: TextStyle(
    color: AppColors.appBarText,
    fontWeight: FontWeight.bold,
    fontSize: ConstSizes.font19(context),
  ),
  decoration: InputDecoration(
    prefix: Padding(
      padding: EdgeInsets.only(right: MediaQuery.of(context).size.width / 40),
      child: Icon(
        Icons.search,
        color: AppColors.appBarText,
        size: ConstSizes.sizeIcon(context),
      ),
    ),
    suffix: IconButton(
      icon: Icon(
        Icons.clear,
        color: AppColors.appBarText,
        size: ConstSizes.sizeIcon(context),
      ),
      highlightColor: Colors.pink,
      onPressed: () {
        onSearchCleanText();
        controllerSearch.clear();
      },
    ),
    floatingLabelBehavior: FloatingLabelBehavior.never,
    labelText: "Search...",
    labelStyle: TextStyle(
      color: AppColors.appBarText,
      fontSize: ConstSizes.font17(context),
    ),
    filled: true,
    fillColor: Colors.transparent,
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: AppColors.appBarText),
    ),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: AppColors.appBarText),
    ),
    isDense: true,
  ),
);

Upvotes: 0

Enos Okello
Enos Okello

Reputation: 121

For me the content padding and textAlign properties were not a solution cause i was also using a custom font.

My solution was to introduce padding around the prefix icon widget and make an adjustments on the offset values from left, right, top and bottom to find the perfect alignment between my TextFormField text and prefix icon.

Example :

TextFormField(
    style: TextStyle(
        color: darkBlueColor,
        fontWeight: FontWeight.w500,
        fontSize: 16.0,
        fontFamily: 'Neue'),
    textAlign: TextAlign.start,
    textAlignVertical: TextAlignVertical.center,
    decoration: InputDecoration(
      prefixIcon: const Padding(
        padding:
            EdgeInsets.only(left: 8.0, right: 8.0, top: 2.0, bottom: 8.0),
        child: Icon(
          Icons.email,
          color: Colors.white,
          size: 28.0,
        ),
      ),
      hintText: hintText,
      hintStyle: TextStyle(
          color: Colors.grey.shade400,
          fontWeight: FontWeight.normal,
          fontSize: 14.0,
          fontFamily: 'Neue'),
      border: const OutlineInputBorder(),
    ))

Upvotes: 0

Khaled Abu Shamat
Khaled Abu Shamat

Reputation: 1134

You can try to add the following properties to your text field:

1- textAlignVertical: TextAlignVertical.center

2- In InputDecoration add contentPadding: EdgeInsets.only(top: 0)

3- In IconButton add padding: EdgeInsets.only(top: 0)

enter image description here

TextField(
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.only(top: 0),
    prefixIcon: Icon(
      Icons.search,
    ),
    hintStyle: TextStyle(
      fontSize: 20,
    ),
    suffixIcon: IconButton(
      padding: EdgeInsets.only(top: 0),
      icon: Icon(Icons.cancel),
      onPressed: null,
    ),
    hintText: "Search"
  )
)

Upvotes: 0

kunj kanani
kunj kanani

Reputation: 1622

Finally, I found a proper way to handle it.

We can use TextButton as SuffixIcon. Most of the time we are required to apply text/loading to suffixes. We can provide any kind of widget to it.

Here is code sample,

                    TextFormField(
                        onSaved: (code) {
                          log(code!);
                        },

                        textAlign: TextAlign.center,
                        onChanged: (value) {},
                        decoration: InputDecoration(
                          hintText: "Enter your coupon code here",
                          suffixIcon: TextButton(
                            child: const Text(
                              "Apply",
                              style: TextStyle(color: primaryColor),
                            ),
                            onPressed: () {},
                          ),
                        ),
                      ),

OUTPUT:

enter image description here

Upvotes: 1

Hemal Moradiya
Hemal Moradiya

Reputation: 2077

You can use contentPadding parameter in InputDecoration like this

contentPadding: EdgeInsets.symmetric(vertical: 15)

or

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),
            ),
          ),

Upvotes: 10

Related Questions