how to set textfield width based on it's text in flutter

Question

I want to size the textfield based on text length...while typing it's length should be changed according to text..I was suggested to use IntrinsicWidth but its not working..

Container(
              height: 300,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(30)
              ),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 40.0),
                      child: IntrinsicWidth(
                        child: TextField(
                          keyboardType: TextInputType.number,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 30,
                          ),

                          decoration: InputDecoration(
                              hintStyle: TextStyle(fontSize: 20,color: Colors.grey[400]),
                              hintText: 'Enter Income Amount'
                          ),
                        ),
                      ),
                    ),

Maybe this could help..[FractionallySizedBox](https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html) — BlazingRSj, Nov 15 '22 at 18:29
@eamirho3ein, it works but what I want is...when I start typing, its length should be as per text length...here it is set minimum length to hint text length...hope got it what I want exactly — Irfan Ganatra, Nov 15 '22 at 18:52

Md. Yeasin Sheikh · Accepted Answer · 2022-11-15T18:54:38.390

2

Create a TextEditingController instance and call setState to update the UI. I am changing hintText to null based on userInput.

 final TextEditingController controller = TextEditingController();
 .....

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 40.0),
  child: IntrinsicWidth(
    child: TextField(
      textAlign: TextAlign.center,
      controller: controller,
      onChanged: (value) {
        setState(() {});
      },
      style: TextStyle(
        fontSize: 30,
      ),
      decoration: InputDecoration(
        hintStyle: TextStyle(fontSize: 20, color: Colors.grey[400]),
        hintText:
            controller.text.isEmpty ? 'Enter Income Amount' : null,
      ),
    ),
  ),
),

edited Nov 15 '22 at 18:54

answered Nov 15 '22 at 18:25

Md. Yeasin Sheikh

54,221
7
29
56

Both are working , the hint text will get initial width – Md. Yeasin Sheikh Nov 15 '22 at 18:28
but when I start typing it's width should be set to length of typed characters...here it starts with length of hint text – Irfan Ganatra Nov 15 '22 at 18:49
Inshore,, it fixes minimum width to hint length..that I don't want..it should be based on text length while typing starts – Irfan Ganatra Nov 15 '22 at 18:51
We can do some trick with controller and calling setState to update ui – Md. Yeasin Sheikh Nov 15 '22 at 18:52
try update answer – Md. Yeasin Sheikh Nov 15 '22 at 18:54

score 1 · Answer 2 · answered Nov 15 '22 at 19:00

Base on what @YeasinSheikh said we can do this on click on the textfield, first define this variable:

bool isActive = false;

then use it like this:

 Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40.0),
        child: IntrinsicWidth(
          child: TextField(
            textAlign: TextAlign.center,
            controller: controller,
            onTap: () {
              setState(() {
                isActive = true;
              });
            },
            onSubmitted: (value) {
              setState(() {
                isActive = false;
              });
            },
            style: TextStyle(
              fontSize: 30,
            ),
            decoration: InputDecoration(
              hintStyle: TextStyle(fontSize: 20, color: Colors.grey[400]),
              hintText: isActive ? " " : 'Enter Income Amount',
            ),
          ),
        ),
      ),

or you can wrap your main widget with gesture detecter and make isActive false when click on screen.

my questions are may be baseless, but what I am exactly getting is that...everything is flexible....like the way u applied logic to hint text..Thanks... — Irfan Ganatra, Nov 15 '22 at 19:47

how to set textfield width based on it's text in flutter

2 Answers2