Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you make a `TextFormField` `prefixIcon` stay aligned at the top when `maxLines` is null?

Tags:

flutter

I'm trying to make a TextFormField that has an unbounded input field, in the sense where if the user hits the enter key the box can be infinitely expanded. However, it seems that the prefixIcon attribute is wrapped in a Center, so whenever the user hits Enter the icon is realigned to the center of the text box, making for a particularly weird experience.

I've been trying to keep that icon from moving but nothing seems to work.

This is my form field:

TextFormField(
    maxLines: null,
    keyboardType: TextInputType.multiline,
    style: theme.textTheme.body1,
    decoration: InputDecoration(
        prefixIcon: Icon(
            Icons.description,
            color: theme.iconTheme.color,
        ),
        contentPadding: EdgeInsets.all(15.0),
        hintText: 'Enter description'
    ),
)
like image 819
Sam Markoe Avatar asked Jan 27 '23 17:01

Sam Markoe


2 Answers

you can use prefix: as instead of prefixIcon.

TextFormField(
                  maxLines: null,
                  keyboardType: TextInputType.multiline,
                  decoration: InputDecoration(
                      prefix: Icon(Icons.email),
                      hintText: 'Enter description'),
                ),
like image 132
Neha Bhardwaj Avatar answered Jan 29 '23 08:01

Neha Bhardwaj


I solved by adding padding to the prefixIcon

      prefixIcon: Padding(
        padding: const EdgeInsets.only(bottom: 80),
        child: Icon(
          icon,
          color: color,
        ),
      ),
like image 32
Vinicius Budel Avatar answered Jan 29 '23 06:01

Vinicius Budel