Chathuranga CPM
Chathuranga CPM

Reputation: 43

How to position change flutter TextFormField prefix icon?

I have tried to change TextFormField prefix icon positions but I don't understand how to do it anyone has a any idea I'm used code as below

child: TextFormField(
  autocorrect: false,
  maxLines: 4,
  decoration: InputDecoration(
    border: new OutlineInputBorder(
        borderSide: new BorderSide(
            style: BorderStyle.solid)),
    hintStyle: TextStyle(
        color: Color.fromRGBO(0, 0, 0, 0.1)),
    prefixIcon: Icon(Icons.edit),
    hintText: "Onion 1kg",
    labelText: 'Item Description (Optional)',
  ),
  style: TextStyle(
    color: Color.fromRGBO(25, 25, 35, 1),
    fontSize:18,
  ),
)

enter image description here

Upvotes: 2

Views: 5077

Answers (2)

Xingjia Luo
Xingjia Luo

Reputation: 381

prefixIcon: Padding(
                    padding: EdgeInsetsDirectional.only(start: 20),
                    child: Image.asset(
                      "assets/images/user-form-icon.svg",
                    ), // myIcon is a 48px-wide widget.
                  ),

Does this output what you want? You can also try using:

prefix: Container()

Upvotes: 0

Abdullah Bahattab
Abdullah Bahattab

Reputation: 716

I think you are trying to change the icon position in your TextFormField to right position, so just use suffixIcon: Icon(Icons.edit), instead of prefixIcon: Icon(Icons.edit), so your code will be come like below:

child: TextFormField(
  autocorrect: false,
  maxLines: 4,
  decoration: InputDecoration(
    border: new OutlineInputBorder(
        borderSide: new BorderSide(
            style: BorderStyle.solid)),
    hintStyle: TextStyle(
        color: Color.fromRGBO(0, 0, 0, 0.1)),
    //prefixIcon: Icon(Icons.edit), // this is left side
      suffixIcon: Icon(Icons.edit), // this is right side.
    hintText: "Onion 1kg",
    labelText: 'Item Description (Optional)',
  ),
  style: TextStyle(
    color: Color.fromRGBO(25, 25, 35, 1),
    fontSize:18,
  ),
)

Upvotes: 5

Related Questions