How to remove text overflow while using text in column in flutter

Question

I am using a row, inside it, each text is a column and I want that whenever my text overflows, it should automatically go to next line, I tried everything, but it won't work. When I tried to use expanded or flexible, it gave error. I tried to make maxlines 2 and then use expanded/flexible, I also gave it a container as a parent widget and made it's height big enough, still error.

Here is the code snippet -

class RouteItems extends StatelessWidget {
  final int index;
  final NodeElement data;

  RouteItems({required this.index, required this.data});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Column(
              children: [
                SvgPicture.asset(
                  'assets/icons/road-straight-line-top-view.svg',
                  height: 15,
                  width: 80,
                ),
                SvgPicture.asset(
                  filterRoutesIcon("${data.node?.type}"),
                  height: 30,
                  width: 30,
                ),
                SvgPicture.asset(
                  'assets/icons/road-straight-line-top-view.svg',
                  height: 15,
                  width: 80,
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: Container(
                //height: 60,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(
                          '${data.node?.name}',
                          style: TextStyle(fontSize: 12.0),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                    Text(
                      data.eta!.getFormattedDate('hh:mm a, d MMM'),
                      style: TextStyle(fontSize: 10.0, color: colorDarkGrey),
                    )
                  ],
                ),
              ),
            ),

          ],
        ),
        Align(
          alignment: Alignment.centerRight,
          child: Icon(
            Icons.timer,
          ),
        ),
      ],
    );
  }
}

There is a package called `auto size text`, might be helpful for you — Anan Saadi, Dec 22 '21 at 19:15

esentis · Accepted Answer · 2021-12-22T17:57:37.823

2

This Row can be removed, what is the purpose of it ?

Row(
  children: [
    Text(
      '${data.node?.name}',
      style: TextStyle(fontSize: 12.0),
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    ),
  ],
)

You can try removing the maxLines: 1, and adding width constraints to your Text e.g wrapping it with a SizedBox, this way the text will wrap to the next line :

SizedBox(
  width: 200,
  child: Text(
    '${data.node?.name}',
    style: TextStyle(fontSize: 12.0),
  ),
)

edited Dec 22 '21 at 17:57

answered Dec 22 '21 at 17:54

esentis

4,190
2
12
28

Thanks, but what if I want to add overflowed text to a new line. – Shreyansh Sharma Dec 22 '21 at 17:57
That's what I'm saying, there will be no text overflowing, it will be constrained to a specific `width` and will go to a new line. Am I misinterpreting something ? – esentis Dec 22 '21 at 17:58
1

ohhk, I got you, just a mistake. Thanks bro. – Shreyansh Sharma Dec 22 '21 at 18:00

score 1 · Answer 2 · answered Dec 23 '21 at 05:17

Try below code hope its helpful to you. Just wrap your Text widget inside Expanded of Flexible

Refer Expanded here

Refer Flexible here

Or Try to add your Inside Row widgets wrap it with Expanded or Flexible refer my answer here or here or here hope its helpful to you

       Row(
            children: [
              Expanded(
                child: Text(
                  '{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
                  '{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
                  '{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
                  '{data.node?.name}{data.node?.name}',
                  style: TextStyle(fontSize: 12.0),
                   
                ),
              ),
            ],
          ),

Your result Screen->

score 0 · Answer 3 · answered Dec 22 '21 at 17:51

0

Try wrapping the text you want to not overflow in a Flexible() widget. That will make sure it doesn't take up more space in the row than is available.

answered Dec 22 '21 at 17:51

Kris

3,091
20
28

score 0 · Answer 4 · answered Dec 22 '21 at 19:56

0

You can also add or replace width paramater of SizedBox widget with

width: MediaQuery.of(context).size.width,

to constraint the Text child to the device screen width.

answered Dec 22 '21 at 19:56

NarvaezJorge

1
3

score 0 · Answer 5 · answered Dec 22 '21 at 20:32

0

You can try this aproach

Expanded(
Row(
children: [
Card(
child: Text(" My awseome no overflow text"),),
..Other Widgets
]
),
);

answered Dec 22 '21 at 20:32

Zekai Demir

143
1
10

How to remove text overflow while using text in column in flutter

5 Answers5