Show the suffixIcon after the suffixText in a textField

user_18144324 0
Viewed 338

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:

enter image description here

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

And I'm getting this :

enter image description here

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.

suffix flutter textfield icons text
3 Answers

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:

demo

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

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-> image

user_139972100

You can modify your suffixIcon property to:

suffixIcon: Center(
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Icon(Icons.remove_red_eye),
                              Text(
                                "*",
                                style: TextStyle(color: Colors.red),
                              )
                            ],
                          ),
                        ),

The alignments here are important to maintain.

user_135276830
Related