Ellipsis in flutter not working as Expected

Question

**Below is the sample code, I am not able to see ellipsis at the end when the text reaches the maximum available space. it limit the the text length to one line. I need the text to take the full available space and at the end it should show ellipsis without cropping. Please let me know your suggestions.

Thanks in advance.**

    import 'package:flutter/material.dart';

    class Single extends StatefulWidget {
    @override
    _SingleState createState() => _SingleState();
    }

   class _SingleState extends State<Single> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
          child: new Column(
        children: <Widget>[
          Text(
            "test",
          ),
          Container(
              height: 80,
              child: new Text('Title',
                  style: new TextStyle(fontWeight: FontWeight.bold))),
          Expanded(
            child: Text(
              'Sometimes an article modifies a noun that is also modified by an adjective. The usual wordSometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference: order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference: Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:',
              overflow: TextOverflow.ellipsis,
              softWrap: true,
            ),
          ),
          Container(
            height: 52,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "12 comments",
                    style: TextStyle(
                      color: Color.fromRGBO(65, 64, 64, 1),
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                    ),
                  ),
                  Text(
                    "22 likes",
                    style: TextStyle(
                      color: Color.fromRGBO(65, 64, 64, 1),
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const <Widget>[
                      Icon(
                        Icons.favorite,
                        color: Colors.pink,
                        size: 24.0,
                        semanticLabel:
                            'Text to announce in accessibility modes',
                      ),
                      Icon(
                        Icons.audiotrack,
                        color: Colors.green,
                        size: 24.0,
                      ),
                      Icon(
                        Icons.beach_access,
                        color: Colors.blue,
                        size: 24.0,
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      )),
    );
  }
}

Answer 1

UPDATED

This is no easy feat. We must assign a GlobalKey to the Expanded widget wrapping the Text widget so that we can determine its height after it is drawn. Then we must update the maxLines property and rebuild. Calculating the number of lines by dividing the widget height by the font size.

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class Single extends StatefulWidget {
  @override
  _SingleState createState() => _SingleState();
}

class _SingleState extends State<Single> {
  final _key = GlobalKey();
  int numLines = 1;

  @override
  void initState() {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      setState(() {
        numLines = _key.currentContext.size.height ~/
            (Theme.of(context).textTheme.bodyText1.fontSize + 3);
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
          child: new Column(
        children: <Widget>[
          Text(
            "test",
          ),
          Container(
              height: 80,
              child: new Text('Title',
                  style: new TextStyle(fontWeight: FontWeight.bold))),
          Expanded(
            key: _key,
            child: Text(
              'Sometimes an article modifies a noun that is also modified by an adjective. The usual wordSometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference: order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference: Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:Sometimes an article modifies a noun that is also modified by an adjective. The usual word order is article + adjective + noun. If the article is indefinite, choose a or an based on the word that immediately follows it. Consider the following examples for reference:',
              overflow: TextOverflow.ellipsis,
              softWrap: true,
              maxLines: numLines,
            ),
          ),
          Container(
            height: 52,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "12 comments",
                    style: TextStyle(
                      color: Color.fromRGBO(65, 64, 64, 1),
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                    ),
                  ),
                  Text(
                    "22 likes",
                    style: TextStyle(
                      color: Color.fromRGBO(65, 64, 64, 1),
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const <Widget>[
                      Icon(
                        Icons.favorite,
                        color: Colors.pink,
                        size: 24.0,
                        semanticLabel:
                            'Text to announce in accessibility modes',
                      ),
                      Icon(
                        Icons.audiotrack,
                        color: Colors.green,
                        size: 24.0,
                      ),
                      Icon(
                        Icons.beach_access,
                        color: Colors.blue,
                        size: 24.0,
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      )),
    );
  }
}

Answer 2

I think, it is not possible for the Text widget to occupy the entire space in the column and also to support the ellipsis. Because, ellipsis property will be logically working based on the lines that needs to be displayed. This tells the widget, where exactly the ellipsis property should apply.

Like, when maxLines is 1, then property will be applied at the end of first line, or when maxLines is 5, then ellipsis will be applied at the end of the 5th line and so on.

If you want the Text widget to occupy the entire space(in Question, remaining space) in the Column, overflow property should be removed. In this case, you will not have ellipsis property and some of the text will be invisible to user.

So in above approach, you can wrap Text inside the SingleChildScrollView to make your text scrollable and can occupy the entire space. But if the text is short, there can be some empty space between.

If you literally wants the ellipsis property, then go for the maxLines field as mentioned by @Lee3.

This is how the snippet will look,

Expanded(
        child: SingleChildScrollView(
      child: Text(
        ' <-- Your Long Text here -->',
        softWrap: true,
      ),
    )),

Let me know for any queries. .