Text Overflow in Flutter code not working

user_6280156 0
Viewed 6490

I am trying to ellipsis the text in Flutter app but I am not able to set it.

I design the view as below

Positioned(
            bottom: 20,
            left: 10,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  snapshot.data.results[index].title,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
                Text(
                  snapshot.data.results[index].release_date,
                  style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.w400,
                      color: Colors.white,
                      letterSpacing: 1.2),
                ),
              ],
            ))

Screen Shot Ellipsis

flutter-layout dart flutter
2 Answers

You should wrap your text with Flexible or Expanded widgets like below:

    Flexible(child:Text("Text goes here"),

for more info try out this link

user_114048830

I recently encountered something similar. If you inspect the constraints on the renderObject of your Text Widget using the DartDevTools, you are quite probably going to find the maxWidth constraint to be infinity. Therefore the Text Widget is not aware it is supposed to be wrapping (default behaviour) or appling ellipsis (in your case) to the text you provide.

The solution in my case was to wrap the Text Widget in an Expanded.

user_54556170
Related