Flutter - Wrap text on overflow like insert ellipsis or fade

Question

I'm trying to create a line in which center text has a maximum size, and if the text content is too large, it fits in size.

I insert the TextOverflow.ellipsis property to shorten the text and inserting the triple points ... but it is not working.

main.dart

import 'package:flutter/material.dart';

void main() {
runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '\$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R\$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

result:

expected:

Answer 1

Container(
  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
  child: Row(
    children: <Widget>[
      CircleAvatar(
        backgroundColor: Color(0xFFF5F5F5),
        radius: 16.0,
      ),
      SizedBox(width: 24.0),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Text large enough to overflow',
              style: TextStyle(
                fontSize: 13.0,
                fontFamily: 'Roboto',
                color: Color(0xFF212121),
                fontWeight: FontWeight.bold,
              ),
              overflow: TextOverflow.fade,
              maxLines: 1,
            ),
            SizedBox(height: 8.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  'Bill',
                  style: TextStyle(
                    fontSize: 12.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF9E9E9E),
                  ),
                ),
                Text(
                  '\$ -999.999.999,95',
                  style: TextStyle(
                    fontSize: 14.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF212121),
                  ),
                ),
              ],
            ),
            SizedBox(height: 4.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  'Limit',
                  style: TextStyle(
                    fontSize: 12.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF9E9E9E),
                  ),
                ),
                Text(
                  'R\$ 900.000.000,95',
                  style: TextStyle(
                    fontSize: 14.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF9E9E9E),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ],
  ),
);

In this solution, we use an Expanded widget to make the text take up as much space as possible. We set the overflow property of the Text widget to TextOverflow.fade to make the text fade out when it overflows. We also set the maxLines property to 1 to ensure that the text only takes up one line. We use SizedBox widgets with a specified height to create some space between the different elements. Finally, we use the mainAxisAlignment property of the Row widget to ensure that the different elements are aligned correctly.