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

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

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

Tags:

2

Answers


  1. 0

    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,
)
    Login or Signup to reply.
  2. 0 
    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:

    enter image description here

    I hope I have helped. Enjoy your work.

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

Back To Top
Search