CODEWITHSUNDEEP
androidiosflutterdart
Shreyansh Sharma
Shreyansh Sharma

Reputation: 1824

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

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

enter image description here

Upvotes: 2

Views: 1333

Answers (5)

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

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

Upvotes: 1

Zekai Demir
Zekai Demir

Reputation: 172

You can try this aproach

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

Upvotes: 0

NarvaezJorge
NarvaezJorge

Reputation: 11

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.

Upvotes: 0

esentis
esentis

Reputation: 4666

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

Upvotes: 2

Kris
Kris

Reputation: 3361

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.

Upvotes: 0

Related Questions