how to change the width of textfield dynamically while inputting value

Question

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.

Solution

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
              ],
              ),
)