CODEWITHSUNDEEP
flutterflutter-layout
Ali Behzadian Nejad
Ali Behzadian Nejad

Reputation: 9044

Flutter text overflow in a Row

I have a Row with two Text widgets in it:

Card(...
  Padding(...
    Column(...
      Padding(...
        Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('Text'),
                Text('Long text'),
              ],
              ...

The output is something like this:

+----------------------------+
 Text               Long text 
+----------------------------+

If the second text is larger than the available space, I want something like this:

+----------------------------+
 Text Loooooooooooooooooooong 
      texttttttttttt 
+----------------------------+

but I get overflow error:

+----------------------------+
 Text Loooooooooooooooooooong texttttttttttt 
+----------------------------+

What should I do?

Upvotes: 0

Views: 1977

Answers (2)

Elvis Salabarria Aquino
Elvis Salabarria Aquino

Reputation: 598

I would use flex to prevent it from taking the full size of the view

Row(
    children: [
      Text('Text'),
      Flexible(
        child: Text(
          'Loooooooooooooooooooong texttttttttttt ',
          textAlign: TextAlign.right,
        ),
      ),
    ],
),

Upvotes: 1

Kherel
Kherel

Reputation: 16185

Wrap the second text in the Expanded widget

Row(
    children: [
      Text('Text'),
      Expanded(
        child: Text(
          'Loooooooooooooooooooong texttttttttttt ',
          textAlign: TextAlign.right,
        ),
      ),
    ],
),

Upvotes: 4

Related Questions