CODEWITHSUNDEEP
flutterdart
SUX
SUX

Reputation: 900

How to move TextField's labelText and icon to the right side

I want to move the icon and the label text to the right side of the Text Field. I tried textAlign: TextAlign.right but it's only for input text.

enter image description here

    TextFormField(
      textAlign: TextAlign.right,
      textDirection: TextDirection.rtl,
      keyboardType: TextInputType.multiline,
      maxLines: 2,
      decoration: const InputDecoration(
        icon: Icon(Icons.description),  
        labelText: 'details',
      ),
  ),

Upvotes: 4

Views: 10644

Answers (5)

Hamidreza Alizade
Hamidreza Alizade

Reputation: 1

you have to use of suffixIcon suffixIcon: Icon( Ionicons.ios_search, color: Colors.black, ),

Upvotes: 0

Shivam Chouhan
Shivam Chouhan

Reputation: 1

Try "suffixIcon: Icon(Icons.phone)" It will do the trick.

Upvotes: 0

SUX
SUX

Reputation: 900

i just found Directionality widget and it changes the direction for everything include label and icon 

Directionality(
 textDirection: TextDirection.rtl,
 child: TextFormField(
 textAlign: TextAlign.right,
 textDirection: TextDirection.rtl,
 keyboardType: TextInputType.multiline,
 maxLines: 2,
 decoration: const InputDecoration(
 icon: Icon(Icons.description),  
 labelText: 'details',),   
  ),
)

Upvotes: 3

Robin
Robin

Reputation: 5427

Use suffixIcon, An icon that appears after the editable part of the text field and after the suffix or suffixText, within the decoration's container.Official API Doc

TextFormField(
    textAlign: TextAlign.right,
    decoration: InputDecoration(
       hintText: "Enter a message",
       suffixIcon: Icon(Icons.description),
    ),
),

This exactly what you need, you need to customize some style

@override
  Widget build(BuildContext context) {
    return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200,
              child: TextFormField(
                textAlign: TextAlign.right,
                decoration: InputDecoration(
                  hintText: "Enter a message",
                ),
              ),
            ),
            Container(
              child: Icon(Icons.description),
            ),
          ],
    );
  }

Demo

Upvotes: 6

Sharad Paghadal
Sharad Paghadal

Reputation: 2154

Create a variable

var _controller = TextEditingController();

And your TextField: 

TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: "Enter a message",
    suffixIcon: IconButton(
      onPressed: (){},
      icon: Icon(Icons.phone),
    ),
  ),
)

Upvotes: 2

Related Questions