CODEWITHSUNDEEP
androidflutter
Emir Bolat
Emir Bolat

Reputation: 1049

Ending with "..." when Flutter Text exceeds a certain length

I have an application like this:

enter image description here

As you can see, there is a talma here. The reason for this overflow is that the Text is long and does not fit in the Container.

I want the Text to end with "..." if its content exceeds 14 characters. So only 11 characters will appear in Text.

How can I do that?

Codes:

  SizedBox(
    height: MediaQuery.of(context).size.height * 0.25,
    child: ListView(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      children: [
        for (var i = 0; i < Products.length; i++)
        Padding(
          padding: const EdgeInsets.only(right: 15),
          child: GestureDetector(
            child: Card(
              elevation: 0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              child: Container(
                width: MediaQuery.of(context).size.width * 0.37,
                decoration: BoxDecoration(
                  color: Color(0xFF3F3F46),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(15),
                      child: Image.network(Products[i].data()["Image"], fit: BoxFit.cover, width: 110, height: 110),
                    ),
                    SizedBox(height: MediaQuery.of(context).size.height * 0.015),
                    // ********** NAME:
                    Text(Products[i].data()["Name"], style: TextStyle(fontSize: 18, fontFamily: "Inter Regular", color: Color(0xFFD4D4D8)), textAlign: TextAlign.center,),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),

Upvotes: 1

Views: 1364

Answers (4)

Michael
Michael

Reputation: 584

overflow: TextOverflow.ellipsis

I know this answer is already mentioned which is correct, but to make it work you should wrap your Text with Flexible or with Container that has fixed width. So the widget tree will look like this :

              Container(
                width: 150,
                child: Text(
                  title,
                  overflow: TextOverflow.ellipsis,
                ),
              ),

Upvotes: 0

Robert Sandberg
Robert Sandberg

Reputation: 8637

If it is not mandatory to have exactly 11 characters, but instead let the UI fit as best as you can, by adding the following property to the Text widget:

overflow: TextOverflow.ellipsis

If you want it to be excactly 11 characters + three '.' if it is longer than 14 characters, then you can instead do the following:

text.length > 14 ? '${text.substring(0, 11)}...' : text

where text in your case is Products[i].data()["Name"]

Upvotes: 3

Sabahat Hussain Qureshi
Sabahat Hussain Qureshi

Reputation: 1364

Use overflow: TextOverflow.ellipsis,

Text(
 'Lorem ipsum dolor sit amet',
  overflow: TextOverflow.ellipsis,
  style: new TextStyle(
    fontSize: 16
  ),
),

Upvotes: 1

MohitJadav
MohitJadav

Reputation: 954

Flexible(
child: new Container(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
  'Text largeeeeeeeeeeeeeeeeeeeeeee',
  overflow: TextOverflow.ellipsis,
  style: new TextStyle(
    fontSize: 13.0,
    fontFamily: 'Roboto',
    color: new Color(0xFF212121),
    fontWeight: FontWeight.bold,
  ),
),

), ),

use overflow: TextOverflow.ellipsis,

Upvotes: 1

Related Questions