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.

CodePudding user response：

You can use suffix 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(
    suffix: Row(
      mainAxisSize: MainAxisSize.min, // <-- important
      children: const [
        Icon(Icons.search), // first element
        SizedBox(width: 4), // add a small gap
        Text('*'), // second element
      ],
    ),
  ),
)

CodePudding user response：

Try below code, use Row() widget for suffixIcon

TextField(
      decoration: InputDecoration(
        suffix: Row(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Icon(
              Icons.visibility,
              color: Colors.green,
            ),
            SizedBox(width: 5),
            Text(
              '*',
              style: TextStyle(
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    ),

Your result screen->