Text in TextField of flutter is overflow the parent Container, Cannot align Vertical center for text in Textfield

Question

Container(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        margin: const EdgeInsets.only(bottom: 16),
        height: 60,
        decoration: BoxDecoration(
            color: AppColors.boxColor, borderRadius: BorderRadius.circular(8)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              category.name,
              style: const TextStyle(fontSize: 18),
            ),
            isSelected
                ? Container(
                    width: 130,
                    height: 40,
                    alignment: Alignment.center,

                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(color: Colors.grey),
                    ),
                    // alignment: Alignment.centerRight,
                    child: ConstrainedBox(
                      constraints: const BoxConstraints.expand(),
                      child: TextField(
                        controller: _controller.textController,
                        maxLines: 1,
                        textDirection: TextDirection.rtl,
                        textAlignVertical: TextAlignVertical.bottom,
                        focusNode: _controller.focusNode,
                        autofocus: isSelected,
                        keyboardType: const TextInputType.numberWithOptions(
                            decimal: true),
                        style: const TextStyle(fontSize: 18),
                        decoration: const InputDecoration(
                          contentPadding: EdgeInsets.symmetric(horizontal: 5),
                          hintTextDirection: TextDirection.rtl,
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                  )

Text is jump out side the box of container and not what I expected to align it at vertical center of the container. I have try many way of wrapping TextField with Align widget or using Alignment.center ... but does not work. please help me with that. Image for more detail

Welcome to SO! please [edit] your question to include an image. (it seems like you mentioned that, but forgot to place the actual image) — MendelG, Aug 18 '23 at 16:34

score 0 · Answer 1 · answered Aug 18 '23 at 17:12

It seems like you are trying to display a TextField inside a Container and the text inside the TextField is overflowing the Container. You can try using an Expanded widget as a parent of the TextField widget. This will allow the TextField to take up all the available space inside the Container. Here is an example:

Expanded(
  child: TextField(
    expands: true,
    maxLines: null,
  ),
)

You can also try setting the overflow property of the Text widget inside the TextField to TextOverflow.visible. This will display overflowing text outside of its container. Here is an example:

TextField(
  decoration: InputDecoration(
    hintText: 'Enter your text here',
  ),
  maxLines: null,
  overflow: TextOverflow.visible,
)

score 0 · Answer 2 · answered Aug 18 '23 at 17:49

Container(
                    width: 130,
                    height: 40,
                    alignment: Alignment.center,

                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(color: Colors.grey),
                    ),
                    // alignment: Alignment.centerRight,
                    child: ConstrainedBox(
                      constraints: const BoxConstraints.expand(),
                      child: TextField(
                        controller: _controller,
                        maxLines: 1,
                        textDirection: TextDirection.rtl,
                        //textAlignVertical: TextAlignVertical.bottom,
                        //focusNode: _controller.focusNode,
                        //autofocus: isSelected,
                        keyboardType: const TextInputType.numberWithOptions(
                            decimal: true),
                        style: const TextStyle(fontSize: 18,color: Colors.black),
                        decoration: const InputDecoration(
                          contentPadding: EdgeInsets.symmetric(horizontal: 5),
                          hintTextDirection: TextDirection.rtl,
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                  )

textAlignVertical: TextAlignVertical.bottom this command causes your text to overflow from the container. When we remove it, the output of the code is as follows:

I hope I have helped. Enjoy your work.

Text in TextField of flutter is overflow the parent Container, Cannot align Vertical center for text in Textfield

2 Answers2