Vertical Alignment of Icon in a TextField

[Reprevise]

Use case

I have a form and below it, I have an expandable details field (it's a shame that I can't do it with a TextFormField but that's for another time). I vertically aligned the text to the top using textAlignVertical: TextAlignVertical.top but I can't do the same for the prefixIcon.

Here's the code I used to make this field:

    Widget detailsField = SizedBox(
      height: 100,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 8),
        child: TextField(
          keyboardType: TextInputType.multiline,
          expands: true,
          minLines: null,
          maxLines: null,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: "Details",
            prefixIcon: Icon(Icons.subject, color: Theme.of(context).primaryIconTheme.color),
          ),
          textAlignVertical: TextAlignVertical.top,
        ),
      ),
    );

Proposal

It would be great if there was a property when you style the prefix or suffix icon that can vertically align it in an expandable text field so that the text and icon aren't misaligned.

[Menelphor]

#42936 does not mention this issue at all.

Would be awesome to have for suffix icon as well

[NiteshKumarPal]

I am also facing this issue, I have also the requirement to set prefix icon to be top-aligned with its text. I request to the core team, please add this feature in this API.

[ghost]

I solved this problem by adding a Padding to the Icon.
prefixIcon: Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 80), child: Icon(Icons.message), )

[hewa-jalal]

using textAlignVertical: TextAlignVertical.center easily fix it.

[comerc]

I want vertical alignment for prefixIcon & suffixIcon like Telegram:

[vitormnoel]

im also having this issue, padding worked for me.

prefixIcon: Padding(
padding: const EdgeInsets.all(8)..

8 because my container have height: 38

[alizera]

Any update?

[Purvik]

Is there any solution?

[MuhammadEbraheem]

any news about this issue?

[emrerdem1]

Default suffixIcon implementation in the doc

Here is my solution:

// suffixIcon use Center widget by default, this is to pin it to top.
 final clearIcon = Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
       IconButton(
          icon: Icon(
            Icons.clear,
            color: Theme.of(context).hintColor,
          ),
          onPressed: () => _yourController.clear(),
        )
      ],
    );

...
 TextFormField(
      maxLines: 9,
      decoration: InputDecoration(
       // Reduce default spaces assigned to icon. It is 48x48 by default.
        suffixIconConstraints: BoxConstraints.tight(
          Size.fromWidth(40),),
        suffixIcon:
            _yourController.text.isNotEmpty ? clearIcon : null,
      ),
      controller: _yourController,
    )

Simple prefix or suffix have the same baseline as texts, so using them also solves this misalignment issue. But do not forget they are designed to add paddings initially, not to build icons. So Icon used in suffix can also tweak the alignment of text when you try to extend clickable area of icon by paddings. You need to play around with it in that case.

[pratikgtam]

I manage to solve this by adding proper bottom padding

                    bottom: (maxLines - 1) * 18.0),

  prefixIcon: Padding(
                padding: EdgeInsets.only(
                    left: 25,
                    right: 18,
                    //https://github.com/flutter/flutter/issues/42651 The issue is opened in github. However, I manged to solve this problem with proper bottom padding.
                    bottom: (maxLines - 1) * 18.0),
                child: Icon(
                  prefixIcon,
                  color: AppColors.appPrimaryColorLight,
                ),
              ),

[hirensshinde]

Any Update on this topic?

[TaiTrien]

I just fix this issue. Just only use prefixIcon property instead of prefix property and use TextAlignVertical.center for textAlignVertical
TextField( textAlignVertical: TextAlignVertical.center, decoration: InputDecoration( contentPadding: EdgeInsets.zero, prefixIcon: Icon( Icons.add, size: 24, color: Colors.grey, ), hintText: 'Typing...', ), ),

[cedvdb]

Note that using prefixIcon instead of prefix , the alignment seems to be very sensible to any decoration in the input. It depends on the different paddings, the border width, is there a label or not, is there margin or not, and even the platform, is it ios or android or web.

Any solution using paddings, margins, etc won't work for other users with different values. This is especially problematic when building a widget library where the user is expected to have any arbitrary value.

The solution needs to come on the flutter side where the prefixIcon can be aligned with the text in the same vein prefix can be.

[TahaTesser]

This is now documented in #91998, you can get the desired alignment using the Align widget. with widthFactor & heightFactor , closing.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.