Question 184791 in Flutter Question posted in
The official Flutter documentation can be found here.

Text goes out of Textfield – Flutter

So I have a textfield that is positionned in the center of a Container. My problem is the more I decrease the height of my screen the more the text of the textfiled goes out of the boundaries. I wrapped the textfiled with a container and gave it a color and it seems that the textfield is correctly adapting to the changes to fit the container but the Text or the input of the textfiled behaves on its own and goes out of the boundaries the more i adjust the height. Any solution ?

Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Container(
                                      height: height * 0.076823398741207,
                                      width: width * 0.414674703803783,
                                      decoration: BoxDecoration(
                                        color: Color.fromARGB(212, 17, 19, 57),
                                        borderRadius: BorderRadius.circular(20),
                                      ),
                                      child: Center(
                                        child: Row(
                                          children: [
                                            Expanded(
                                              child: TextField(
                                                style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: width *
                                                      0.0103928497193931,
                                                ),
                                                decoration: InputDecoration(
                                                  filled: true,
                                                  fillColor: Colors.red,
                                                  constraints: BoxConstraints(
                                                      minHeight: 120),
                                                  contentPadding:
                                                      EdgeInsets.only(
                                                    left: width *
                                                        0.0166285595510289,
                                                  ),
                                                  border: InputBorder.none,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
)

Sampel of the problem

I tried a lot of solutions such as wrapping it with a SingleChildScrollView, setting maxlines and minlines but nothing. The only thing that seems to change a little bit the behaviour of the text is setting maxHeight and minheight in the constraints of the InputDecorator of the textfield.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution was to set isDense to true in the InputDecoration.


  2. 0

    Instead of giving fontSize: width * 0.01..., try doing like so in your build (or the context won’t be accessible)

    final cellHeight = MediaQuery.of(context).size.height / 100;
final cellWidht = MediaQuery.of(context).size.width / 100;

    By doing so you create 2 variables that represent 1/100 of your screen width or height (responsive).
    You can then multiply your cellHeight or cellWidth with the fontSize you prefer, grating the fontSize will be responsive.

    Column(
 mainAxisAlignment: MainAxisAlignment.center,
   children: [
      Container(
         height: cellHeight * 8, <-- EXAMPLE
         width: cellWidth * 20, <-- EXAMPLE
         decoration: BoxDecoration(
            color: Color.fromARGB(212, 17, 19, 57),
            borderRadius: BorderRadius.circular(20),
         ),
         ....
         child: TextField(
            style: TextStyle(
            color: Colors.white,
            fontSize: cellWidth * 7, <-- EXAMPLE
         ),
         decoration: InputDecoration(
         filled: true,
         ....
        contentPadding:EdgeInsets.only(
           left: 5 * cellWidth,  <-- EXAMPLE
        ),
        border: InputBorder.none,
       ),
      ),
     ),
    ],
   ),
  ),
 ),
)

    Let me know if this solve your problem, if not, update your question with more details about what’s wrong, happy coding!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search