CODEWITHSUNDEEP
flutter
Colin Ricardo
Colin Ricardo

Reputation: 17269

Wrapping text in column

I'm building an expenses app, and have: enter image description here

As you can see, I have a text overflow problem. I want that text to trim with ellipses, but I'm not sure how to do it. Currently I have: 


  Widget buildCardLeft() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          child: Text(
            this.transaction.title,
            style: TextStyle(fontSize: 24),
            overflow: TextOverflow.ellipsis,
          ),
        ),
        SizedBox(
          height: 8,
        ),
        Text(
          dateFormat.format(this.transaction.date),
          style: TextStyle(color: Colors.grey),
        )
      ],
    );

What's the correct way to get this text to truncate?

Upvotes: 0

Views: 49

Answers (2)

najdat Akkad
najdat Akkad

Reputation: 195

you can say like:

Text(
this.transaction.title.replaceRange(25, this.transaction.title.length, "...",
style: TextStyle(fontSize: 24),
            overflow: TextOverflow.ellipsis,
)

Upvotes: 2

Colin Ricardo
Colin Ricardo

Reputation: 17269

Solved with Flexible: 

  Widget buildCardLeft() {
    return Container(
      child: Flexible(
        flex: 1,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              this.transaction.title,
              style: TextStyle(fontSize: 24),
              overflow: TextOverflow.ellipsis,
            ),
            SizedBox(
              height: 8,
            ),
            Text(
              dateFormat.format(this.transaction.date),
              style: TextStyle(color: Colors.grey),
            )
          ],
        ),
      ),
    );
  }

Upvotes: 0

Related Questions