'Flutter TextFormField text crops when width exceeds

I am using TextFormField for my flutter application search field. When i type a text bigger that the width of textformfield, then entered text it cropped to half an not visible completely. Please find my below code and attached image for more understanding of problem.

TextFormField(
      focusNode: focusNode,
      controller: textController,
      decoration: InputDecoration(
        border: InputBorder.none,
        icon: Icon(
          Icons.search,
        ),
        hintText: AppStrings.searchCatHint,
        hintStyle: TextStyle(
            fontSize: 17,),
      ),
      autovalidate: true,
      autocorrect: false,
      autofocus: true,
    );

Screen for problem:

Similar problem i have seen in another question also, but no solution provided. Similar issue link

Text display proper with @CarlosSR suggestion. But alignment issue as below.

Solution 1:^[1]

I found a solution for the issue.

Problem description: On entering new text, old text should move to left without any problem.

Solution: I have specified a height for my TextFormField with Wrapping with Container. Code looks like below.

Container(
height:40, 
child: TextFormFiled(...),
);

This worked for me. Thanks a lot for all your responses.

Solution 2:^[2]

wrapping textformfield with container:

error will not occur:

Container(
            color: Colors.black12,
            width: 280,
            height: 45,
            child: TextFormField(
              decoration: InputDecoration(
                border: InputBorder.none,
                icon: Icon(
                  Icons.search,
                ),
                hintStyle: TextStyle(
                  fontSize: 17,),
              ),
              autovalidate: true,
              autocorrect: false,
              autofocus: true,
            ),
          ),

error is with padding I guess if you are using:

Container(
            color: Colors.black12,
            width: 280,
            height: 45,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  icon: Icon(
                    Icons.search,
                  ),
                  hintStyle: TextStyle(
                    fontSize: 17,),
                ),
                autovalidate: true,
                autocorrect: false,
                autofocus: true,
              ),
            ),
          ),

Solution 3:^[3]

This way you can only scroll the widget in horizontal axis, plus you add a padding to get your text in the position you want. In other, I recommend you to check for Align widget.

SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
      focusNode: focusNode,
      controller: textController,
      decoration: InputDecoration(
        border: InputBorder.none,
        icon: Icon(
          Icons.search,
        ),
        hintText: AppStrings.searchCatHint,
        hintStyle: TextStyle(
            fontSize: 17,),
      ),
      autovalidate: true,
      autocorrect: false,
      autofocus: true,
    ),
),
),

Solution 4:^[4]

I too happend to have the exact issue.The thing that i noticed that when i have a textfield in an container of some hardcoded height you might encounter this issue.Try removing the height of the container or just remove the textfields bottom padding.This will help.

Solution 5:^[5]

The solution to this is using the CupertinoTextField widget. You can read about it here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	halfer
Solution 2	Sandeep Sharma
Solution 3	Raghu Mudem
Solution 4	Rutvik_110
Solution 5	Yernar Duisebai

'Flutter TextFormField text crops when width exceeds

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]