Prevent text overflow in nested row/column widget

Question

I have a sample layout as following:

3 containers of fixed size (red, blue, green, container labels are height x width)
a text widget that may have variable size (based on the text content):

The overall height of the widget is 300px. The layout is roughly as follows:

Row(
    [
        red,
        Column(
            [
                Row([green, text]),
                Spacer(),
                blue,
            ]
        ),
    ]
)

The problem is if I increase the text length, it overflows the screen as follows:

The text has already been styled to be maxLines:1 and overflow:TextOverflow.ellipsis. Moreover, I have tried adding Expanded at various levels (to the text widget, to the row containing it, to the column containing it, to the overall outer box), but no avail.

Can you please suggest how to go about this?

Here's the source code:

import 'package:flutter/material.dart';

class SampleWidget extends StatelessWidget {
  const SampleWidget({Key? key}) : super(key: key);

  Container getContainer({h, w, color}) => Container(
        color: color,
        height: h,
        width: w,
        child: Center(
          child: Text(
            '$h x $w',
            textAlign: TextAlign.center,
          ),
        ),
      );

  Text getText(text) => Text(
        text,
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
      );

  Widget applyBorder(widget) => Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.white,
            width: 1,
          ),
        ),
        child: widget,
      );

  @override
  Widget build(BuildContext context) {
    double overallHeight = 300;

    var red = getContainer(h: overallHeight, w: 150, color: Colors.red);
    var green = getContainer(h: 100, w: 60, color: Colors.green);
    var blue = getContainer(h: 100, w: 150, color: Colors.blue);
    var text = getText('hello! ' * 10);

    Widget row1 = Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [green, text],
    );
    row1 = applyBorder(row1);

    Widget col1 = Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [row1, Spacer(), blue],
    );
    col1 = applyBorder(col1);
    col1 = SizedBox(height: overallHeight, child: col1);

    Widget row2 = Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [red, col1],
    );
    row2 = applyBorder(row2);

    return row2;
  }
}

Thanks!

Try wrapping your Text widget with Wrap widget or place it in a SizedBox and assign Custom width — Prashant
– Prashant, Commented Aug 4, 2022 at 11:15
@Prashant: Wrapping it inside Wrap or Expanded doesn't work. I can't assign custom width since I may not know it beforehand. The red container may also shrink expand based on user data. Thanks! — abhinavkulkarni
– abhinavkulkarni, Commented Aug 4, 2022 at 11:20

Kaushik Chandru · Accepted Answer · 2022-08-04 11:55:10Z

7

Wrap the text with a flexible widget and add overflow if required

Flexible(
 child: Text(
  "Some big text here",
  overflow: TextOverflow.ellipsis,
  maxLines : 3//add any max line here
 )
)

Also wrap the col1's column widget with a flexible so the row gets its bounds

edited Aug 4, 2022 at 11:55

answered Aug 4, 2022 at 11:22

Kaushik Chandru

18k4 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

abhinavkulkarni Over a year ago

Unfortunately, it doesn't work. Thanks!

Kaushik Chandru Over a year ago

Wrap col1's column also in a flexible

abhinavkulkarni Over a year ago

Thanks that does work (wrapping text and col1 inside Expanded). Care to explain why this work? Thanks!

Kaushik Chandru Over a year ago

You had a row - column then again a row. The text in inside the last row. The column has no horizontal bound. So additing a flexible to column made sure that it is bound to the end of the screen the row also is bound till that extent so the text overflow worked

abhinavkulkarni Over a year ago

Please edit your answer, I'll be happy to accept it.

|

mohammad esmaili · Accepted Answer · 2022-08-04 11:50:29Z

2

Wrap your Row with Flexible:

Widget row1 = Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [green, Flexible(child: text)],
    );

Widget row2 = Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [red, Flexible(child: col1)],
    );

answered Aug 4, 2022 at 11:50

mohammad esmaili

1,7572 gold badges7 silver badges18 bronze badges

Comments

General Grievance · Accepted Answer · 2022-08-10 12:38:45Z

1

Wrap your text into flexible widget and then try to expand some of its properties

    Flexible(
     child: Text(
      'Your text...!',
     )
    )

edited Aug 10, 2022 at 12:38

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Aug 4, 2022 at 13:27

Muhammad Awais

1792 silver badges5 bronze badges

Collectives™ on Stack Overflow

Prevent text overflow in nested row/column widget

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related