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

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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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.