CODEWITHSUNDEEP
flutterdartflutter-layout
Ankit Tale
Ankit Tale

Reputation: 2004

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

Upvotes: 6

Views: 10614

Answers (3)

Ali Altiyev
Ali Altiyev

Reputation: 11

You shuld wrap your widget with Expanded

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      ("Mortal Kombat"),
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Text(
                      ("12/10/2022"),
                      style:
                          TextStyle(color: Colors.black.withOpacity(0.4)),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    const Text(
                      ("Express yourself with a custom text design created just fo`r you by a professional designer. Need ideas? We’ve collected some amazing examples of text images from our global community of designers. Get inspired and start planning the perfect text design today."),
                      // style: TextStyle(overflow: TextOverflow.ellipsis),

                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ],

Upvotes: 1

artofbeinghuman
artofbeinghuman

Reputation: 63

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.

Upvotes: 4

Aamil Silawat
Aamil Silawat

Reputation: 8229

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

Upvotes: 11

Related Questions