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

Question

enter image description here

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

Answer 1

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,
)

Answer 2

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.