Aligning Rows and Columns in Flutter with Overflowing Long Text

Question

I am styling a card and have these multiple icon elements and text in it. I am having issues arranging the rows and columns to solve this problem here;

Image 1

And this is what I am trying to achieve;

Image 2

Here is my code for that row giving me issues;

Row(
                  children: [
                    ClipRect(
                      child: Container(
                        height: 11,
                        width: 11,
                        child: Image.asset('assets/info.png'),
                      ),
                    ),
                    Container(
                      height: 48,
                      child: Column(
                        children: [
                          Text(
                            "Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
                            style: GoogleFonts.poppins(
                              textStyle: TextStyle(
                                color: Color(0x80484848),
                                fontWeight: FontWeight.w400,
                                fontSize: 8,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),

I thought that text always align properly if fit into a column. I want the overflowing text to go over to the next line.

MendelG · Accepted Answer · 2022-07-21T16:03:55.520

EDIT: to make the text wrap to the next line, wrap your Column with an Expanded():

Row(
          children: [
            ClipRect(
              child: Container(
                height: 11,
                width: 11,
                child: Image.asset('assets/info.png'),
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  Text(
                    "Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
                    style: TextStyle(
                      overflow: TextOverflow.visible,
                      color: Color(0x80484848),
                      fontWeight: FontWeight.w400,
                      fontSize: 30,
                    ),
                  ),
                ],
              ),
            ),
          ],
        )

To avoid an overflow, wrap your Container() with a Flexible() and your Text() with a FittedBox().

The docs on FittedBox():

Scales and positions its child within itself according to fit.

So, fittedBox will scale the font size to fit accordingly.

Your code should look like this:

Row(
          children: [
            ClipRect(
              child: Container(
                height: 11,
                width: 11,
                child: Image.asset(
                    'assets/info.png'),
              ),
            ),
            Flexible(
              child: Container(
                height: 48,
                child: Column(
                  children: [
                    FittedBox(
                      child: Text(
                        "Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
                        style: TextStyle(
                          color: Color(0x80484848),
                          fontWeight: FontWeight.w400,
                          fontSize: 30,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        )

Result (notice the text size scales):

As an alternative, you can also use a TextOverflow instead of FittedBox() which will add an ellipsis (...) to the overflowing text:

 Row(
          children: [
            ClipRect(
              child: Container(
                height: 11,
                width: 11,
                child: Image.asset(
                    'assets/info.png'),
              ),
            ),
            Flexible(
              child: Container(
                height: 48,
                child: Column(
                  children: [
                    Text(
                      "Now that you've finished a plan, it's essential to measure your growth. We've included assessments and activities to do just that.",
                      style: TextStyle(
                        overflow: TextOverflow.ellipsis,
                        color: Color(0x80484848),
                        fontWeight: FontWeight.w400,
                        fontSize: 30,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        )

Result (notice the elipsis):

I'm sorry if my question was not really clear, I wanted the text to go to the next line instead of overflowing. This information is useful, but it does not solve my problem. — Lucky Ugwu, Jul 21 '22 at 15:55
@LuckyUgwu See my edit at the beginning of my answer. Does that solve your problem? — MendelG, Jul 21 '22 at 16:04

Aligning Rows and Columns in Flutter with Overflowing Long Text

1 Answers1