Search code examples
flutteruitextfieldflutter-layoutflutter-text

Flutter - why is my text is disappearing if i added to much text against its length


As said in the title; my text "disappears" when I added text too much against the length of the textfield, why does this happens??

Here's the code

Container(
                                 height: mediaSize.height * .075,
                                 decoration: BoxDecoration(
                                     borderRadius:
                                         BorderRadius.all(Radius.circular(12.5)),
                                     boxShadow: <BoxShadow>[
                                       BoxShadow(
                                           color: Colors.black54.withOpacity(0.45),
                                           spreadRadius: 1,
                                           blurRadius: 4,
                                           offset: Offset(3.5, 4))
                                     ]),
                                 child: TextFormField(
                                   decoration: InputDecoration(
                                       focusedBorder: OutlineInputBorder(
                                           borderSide:
                                               BorderSide(color: myLightOrangeColor),
                                           borderRadius: BorderRadius.all(
                                               Radius.circular(12.5))),
                                       enabledBorder: OutlineInputBorder(
                                           borderSide: BorderSide(
                                               color: myLightOrangeColor, width: 6),
                                           borderRadius: BorderRadius.all(
                                               Radius.circular(12.5))),
       
                                       labelStyle: TextStyle(color: Colors.black, fontSize: 15, fontWeight: FontWeight.bold),
                                       filled: true,
                                       fillColor: Colors.white),
                                   keyboardType: TextInputType.text,
                                   style: TextStyle(color: Colors.black, fontSize: 15, fontWeight: FontWeight.bold),
                                 ),
                               ),

When I add to much of text this happens: [first one ok] [next one ???] enter image description here

enter image description here


Solution

  • For the text of the TextField to appear normally it needs his normal height, in the image below an image without giving height to the Container:

    enter image description here

    But if you give it less height than it need to show the text this happen (in the example the height of the device multiplied by 0.075):

    enter image description here

    To reduce the height of the TextField you can change the property contentPadding or set the isDense to true:

    TextFormField(
      decoration: InputDecoration(
        isDense: true,
        //contentPadding: EdgeInsets.all(0), //or any padding you want
          ),
      keyboardType: TextInputType.text,
      style: TextStyle(
        color: Colors.black,
        fontSize: 15,
        fontWeight: FontWeight.bold,
      ),
    ),