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,
          ),
        ),
      ],
    );
  }
}

Solution 1

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),
  ),
)

Solution 2

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->

Comments

[Anan Saadi]

There is a package called auto size text, might be helpful for you

[Shreyansh Sharma]

Thanks, but what if I want to add overflowed text to a new line.

[esentis]

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 ?

[Shreyansh Sharma]

ohhk, I got you, just a mistake. Thanks bro.