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

Spacer cause overflow issue – Flutter

I have two texts in a row, and one of them is way longer than the other one. I use spacer to give more spaces to one of the texts. If the text gets really long, it causes an overflow. How do I fix this?

title: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Spacer(),
          Text(
            "Longer text",
            style: Theme.of(context).textTheme.bodyText1?.copyWith(
                  color:
                      Theme.of(context).colorScheme.white.withOpacity(0.85),
                ),
            overflow: TextOverflow.fade,
            softWrap: false,
            textAlign: TextAlign.right,
          ),
          const SizedBox(width: 10),
          Text(
            "smaller text",
            style: Theme.of(context).textTheme.bodyText1?.copyWith(
                  color:
                      Theme.of(context).colorScheme.white.withOpacity(0.85),
                ),
            overflow: TextOverflow.fade,
            softWrap: false,
            textAlign: TextAlign.left,
          ),
          Spacer(),
        ],
      ),

enter image description here

Tags:

2

Answers


  1. 0

    wrap the text widget with the Expanded widget and give them spacing whatever you want

    Expanded(
  flex: 1,// if you give them 1 flex value to Expanded widget both they take equal space and if you give one widget 2 flex value and one 1 flex value the one with 2 flex value will get double the space of the other 
  child:Text("Longer text")
)
    Login or Signup to reply.
  2. 0

    You need to use RichText like this:

    Center(
    child: RichText(
      textAlign: TextAlign.center,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      text: TextSpan(
        text: 'smaller text',
        style: TextStyle(
          color: Colors.black.withOpacity(0.85),
        ),
        children: [TextSpan(text: 'Longer text ')],
      ),
    ),
  ),

    enter image description here

    enter image description here

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

Back To Top
Search