CODEWITHSUNDEEP
androidfluttertextfield
CHARITRA SHRESTHA
CHARITRA SHRESTHA

Reputation: 782

how to change the width of textfield dynamically while inputting value

I want to change the width of the text field dynamically to fit all the input text while inputting value. This is what i have tried.

var valueIncreaser = 30;
var textfieldSpanValue = 50.0;

Container(
  width: textfieldSpanValue,
  child: TextFormField(              
              onChanged: (text) {
                setState(() {
                  textfieldSpanValue = 20;
                  textfieldSpanValue = valueIncreaser + textfieldSpanValue * textfieldSpanValue;
                });
              },
              controller: myController,
              maxLength: 10,
              maxLengthEnforced: true,
              keyboardType: TextInputType.number,
              inputFormatters: <TextInputFormatter>[
                WhitelistingTextInputFormatter.digitsOnly
              ],
              ),
)

I want something that looks like this. Larger TextField

Smaller TextField

Upvotes: 2

Views: 705

Answers (1)

siddhartha sapkota
siddhartha sapkota

Reputation: 266

It looks like u have some simple logical mistake in your code. All u need to do is set the width incremental logic to this:

textfieldSpanValue = valueIncreaser + textfieldSpanValue * text.length;

var valueIncreaser = 30;
var textfieldSpanValue = 50.0;

Container(
  width: textfieldSpanValue,
  child: TextFormField(              
              onChanged: (text) {
                setState(() {
                   textfieldSpanValue = 20;
                  textfieldSpanValue =
                      valueIncreaser + textfieldSpanValue * text.length;
                });
              },
              controller: myController,
              maxLength: 10,
              maxLengthEnforced: true,
              keyboardType: TextInputType.number,
              inputFormatters: <TextInputFormatter>[
                WhitelistingTextInputFormatter.digitsOnly
              ],
              ),
)

Upvotes: 3

Related Questions