Show the suffixIcon after the suffixText in a textField

Question

I just wanted to show the suffixIcon after the suffixText. Now I know that in the InputDecoration documentation says explicitly that it will show the suffixText before the suffixIcon.

What would I like to do is:

the '*' represents that it's a mandatory field.

And I'm getting this :

is there a way for me to change the order of the suffixes in my TextField?

I tried using SizedBox, or Container widgets but never got the result I wanted.

Solution

You can use suffix (edit: suffixIcon) property and pass in a Row widget instead. Put both elements in the Row, and you can decide exactly how you want them to appear. For example:

Soure code:

TextField(
  decoration: InputDecoration(
    suffixIcon: Row(
      mainAxisSize: MainAxisSize.min, // <-- important
      children: const [
        Icon(Icons.visibility, color: Colors.grey),
        SizedBox(width: 4), // add a small gap
        Text('*'), // second element
      ],
    ),
  ),
)

Comments

[Robin Opinião]

Now I have the problem that it only shows the suffix when the TextFieldis focused. After looking for a solution to that problem I've found that using SuffixIcon would solve this issue, but It would bring me right back to my first problem of the Suffix's order, because SuffixIcon always comes before ´Suffix` or SuffixText.

[WSBT]

@RobinOpinião Ah sorry, suffix only shows when it's focused. You can use the same idea with suffixIcon tho - please see my updated code.