CODEWITHSUNDEEP
flutter
sojinLee
sojinLee

Reputation: 63

Flutter : When the number of textfield characters increases, the problem is that the characters are hidden at the bottom

                      Container( 
                        width: 350,
                        height: 40,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25),
                          color: const Color.fromRGBO(228, 228, 228, 1),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              //padding: EdgeInsets.fromLTRB(15, 0, 0, 10),
                              width:235,
                              height: 30,
                              child: 
                                TextField(
                                  keyboardType: TextInputType.text,
                                  controller:review,
                                  cursorColor: Colors.black,
                                  style: TextStyle(fontSize: 14)
                                ),
                            ),
                            IconButton(onPressed: null , icon: Icon(Icons.add_circle, size:20, color: Colors.black ))
                          ]
                        )
                      ),

If there are not many characters, the ui is as follows.

enter image description here

When the number of characters increases, the change of the ui is as follows. enter image description here

Any help would be appreciated.

Upvotes: 0

Views: 36

Answers (3)

Mahi
Mahi

Reputation: 1752

put maxLines:1

TextField(
    maxLines: 1,
 keyboardType: TextInputType.text,
   controller: review,
   cursorColor: Colors.black,
  
   style: TextStyle(fontSize: 14),
)

Upvotes: 0

Jahidul Islam
Jahidul Islam

Reputation: 12595

Just remove the fixed height from Container; otherwise, you can try with this autosizetext for the fixed height text box

Container(
            width: 350,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              color: const Color.fromRGBO(228, 228, 228, 1),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  //padding: EdgeInsets.fromLTRB(15, 0, 0, 10),
                  width: 235,
                  child: TextField(
                      keyboardType: TextInputType.text,
                      cursorColor: Colors.black,
                      style: TextStyle(fontSize: 14)),
                ),
                IconButton(
                    onPressed: null,
                    icon: Icon(Icons.add_circle, size: 20, color: Colors.black))
              ],
            ),
          )

Upvotes: 1

Leslie Joe
Leslie Joe

Reputation: 325

Add minLines and maxLines to TextField like this

TextField(
   keyboardType: TextInputType.text,
   controller: review,
   cursorColor: Colors.black,
   // Add here
   minLines: 1,
   maxLines: 10,
   style: TextStyle(fontSize: 14),
)

Upvotes: 0

Related Questions