Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text Overflow in Flutter code not working

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

like image 802
Ankit Tale Avatar asked Aug 27 '26 15:08

Ankit Tale


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

like image 148
A R Avatar answered Aug 30 '26 08:08

A R


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.

like image 24
artofbeinghuman Avatar answered Aug 30 '26 06:08

artofbeinghuman



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!