How to use ellipsis on Text widget spanning several lines?

Question

Text overflow with ellipsis cut text on first line, even if the text wraps several lines.
Overflow with fade on the other hand renders all lines of text before applying the fade on the last line.

I want the ellipsis to be applied to the last line in the text field.
left: ellipsis, right: fade

Code:

class _LockedCardState extends State<LockedCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 250,
      child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Stack(
          fit: StackFit.expand,
          children: [
            Image.network(
              widget.imgUrl,
              fit: BoxFit.cover,
            ),
            Container(color: Color(0x40000000)),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12.0),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 16.0),
                    child: Text(widget.cardTitle,
                        style: Theme.of(context).textTheme.title.copyWith(color: Colors.white)),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Text(
                        widget.cartBody,
                        style: Theme.of(context).textTheme.body1.copyWith(color: Colors.white),
                        softWrap: true,
                        overflow: TextOverflow.ellipsis, //Overflow breaks on first line, even if softWrap = true.
                        textAlign: TextAlign.justify,
                      ),
                    ),
                  ),
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0, bottom: 16.0),
                      child: Align(
                        alignment: Alignment.bottomRight,
                        child: AppButtonSmall(
                          onPress: widget.onPress,
                          title: widget.buttonTitle,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

How can i apply ellipsis only if the last line overflows?

Answer 1

Set the maxLines property in text widget.

Text(
  widget.cartBody,
  style: Theme.of(context).textTheme.body1.copyWith(color: Colors.white),
  softWrap: true,
  overflow: TextOverflow.ellipsis, //Overflow breaks on first line, even if softWrap = true.
  textAlign: TextAlign.justify,

  maxLines: 9,
),

Hope this helps!