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

Text not set in center of container flutter

when text container size decrease with font size that time the text not set in center. it is gone below size of container how to solve it.

  Container(
              height: height,
              width: width,
              alignment: Alignment.center,
              decoration: _isSelected
                  ? BoxDecoration(
                color: Colors.transparent,
                border: Border.all(
                  width: 2,
                  color: Colors.black,
                ),
              )
                  : null,

              child: Align(
                alignment: Alignment.center,
                child: Text(
                  _displayText.isEmpty ? 'Enter Text' : _displayText,
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.visible,
                  maxLines: 1,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: fontSize,
                  ),
                ),
              ),
            ),

this is image of output

Tags:

2

Answers


  1. 0

    Try it with the help of Center() like below:

    Container(
          padding: EdgeInsets.all(8.0),
          decoration: _isSelected
              ? BoxDecoration(
            color: Colors.transparent,
            border: Border.all(
              width: 2,
              color: Colors.black,
            ),
          )
              : null,

          child: Center(
            child: Text(
              _displayText.isEmpty ? 'Enter Text' : _displayText,
              textAlign: TextAlign.center,
              overflow: TextOverflow.visible,
              maxLines: 1,
              style: TextStyle(
                color: Colors.black,
                fontSize: fontSize,
              ),
            ),
          ),
        ),
    Login or Signup to reply.
  2. 0

    Use the FittedBox widget to automatically scale the text to fit within the container while keeping it centred.

    Container(
  height: height,
  width: width,
  alignment: Alignment.center,
  decoration: _isSelected
      ? BoxDecoration(
          color: Colors.transparent,
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
        )
      : null,
  child: FittedBox(
    fit: BoxFit.scaleDown, // Scale down the text to fit within the container
    alignment: Alignment.center,
    child: Text(
      _displayText.isEmpty ? 'Enter Text' : _displayText,
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.black,
        fontSize: fontSize,
      ),
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search