Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter TextField width should match width of contained text

In flutter, TextField doesn't have an intrinsic width; it only knows how to size itself to the full width of its parent container. How do I set the width to the width of the contained text.

I tried putting the TextField inside a container

As outlined here How to update flutter TextField's height and width?

new Container(              
  width: 100.0,
  child: new TextField()
)

I expect the width of the TextField to match the width of the text it contains. The TextField should grow wider as text is typed, and shrink narrower as text is deleted.

like image 242
SteveM Avatar asked Jan 24 '19 16:01

SteveM


People also ask

How do you control the width of a TextField in Flutter?

Step 1: Inside the TextField, Add the style parameter and assign the TextStyle(). Step 2: Inside the TextStyle(), Add the fontSize parameter and set the appropriate value. Step 3: Run the app.

How do you change the text form field size in Flutter?

Change the font size to increase TextField's height.In TextField there is a property style:TextStyle(); Inside the textstyle there is a property called font size. Then give the appropriate font size.

How do I get rid of maxLength in TextField Flutter?

To hide counter value from TextField or TextFormField widget while using maxLength attribute, try following: TextField( decoration: InputDecoration( hintText: "Email", counterText: "", ), maxLength: 40, ), In this, I have set counterText attribute inside InputDecoration property with empty value. Hope it will help.

What is the default height of TextField Flutter?

Currently, TextFields are 40px high with default settings.


1 Answers

Flutter has IntrinsicWidth to do the calculation for you. Just wrap your TextField or TextFormField in it as follow:

IntrinsicWidth(child: TextField())
like image 124
Philip Ch'ng Avatar answered Oct 29 '22 20:10

Philip Ch'ng