Flutter: ajusta el texto en desbordamiento, como insertar puntos suspensivos o atenuar

Estoy tratando de crear una línea en la que el texto central tenga un tamaño máximo y, si el contenido del texto es demasiado grande, se ajusta al tamaño.

Inserto la TextOverflow.ellipsispropiedad para acortar el texto e insertar los puntos triples ...pero no funciona.

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)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

resultado:

esperado:

Debes envolver tu Containeren un Flexiblepara hacerle Rowsaber que está bien Containerque sea más estrecho que su ancho intrínseco. Expandedtambién funcionará.

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,
      ),
    ),
  ),
),

Usar puntos suspensivos

Text(
  "This is a long text",
  overflow: TextOverflow.ellipsis,
),

Usando Fade

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

Usando Clip

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

Nota:

Si está utilizando Textdentro de a Row, puede poner arriba Textdentro Expandedcomo:

Expanded(
  child: AboveText(),
)

Puede utilizar este código recortado para mostrar texto con puntos suspensivos

Text(
    "Introduction to Very very very long text",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),

Puedes hacerlo asi

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)

primero, envuelve tu Rowo Columnen un widget Flexibleo Expandedluego

Text(
    'your long text here',
    overflow: TextOverflow.fade,
    maxLines: 1,
    softWrap: false,
    style: Theme.of(context).textTheme.body1,
)

Envolviendo cuyos elementos secundarios están en una fila o columna, envuelva su columna o fila es nueva Flexible ();

https://github.com/flutter/flutter/issues/4128

Una forma de arreglar un desbordamiento de un widget de texto dentro de una fila si, por ejemplo, un mensaje de chat puede ser una línea realmente larga. Puede crear un contenedor y un BoxConstraint con un maxWidth en él.

            Container(
              constraints: BoxConstraints(maxWidth: 200),
                child: Text(
                  (chatName == null) ? " ": chatName,
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Colors.black87,
                      fontSize: 17.0),
                )
            ),

SizedBox(
    width: 200.0,
    child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.body2))

Simplemente envuelva dentro de un widget que puede tomar un ancho específico para que funcione o asumirá el ancho del contenedor principal.

Creo que el contenedor principal debe recibir un ancho máximo del tamaño adecuado. Parece que el cuadro de texto llenará cualquier espacio que se le dé arriba.

Dependiendo de su situación, creo que este es el mejor enfoque a continuación.

final maxWidth = MediaQuery.of(context).size.width * 0.4;
Container(
        textAlign: TextAlign.center),
        child: Text('This is long text',
        constraints: BoxConstraints(maxWidth: maxWidth),
),

Si simplemente coloca el texto como hijo (s) de una columna, esta es la forma más fácil de ajustar el texto automáticamente. Suponiendo que no tenga nada más complicado. En esos casos, creo que crearía su contenedor del tamaño que mejor le parezca y pondría otra columna dentro y luego su texto. Esto parece funcionar muy bien. Los contenedores quieren encogerse al tamaño de su contenido, y esto parece naturalmente entrar en conflicto con el envoltorio, que requiere más esfuerzo.

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('This long text will wrap very nicely if there isn't room beyond the column\'s total width and if you have enough vertical space available to wrap into.',
      style: TextStyle(fontSize: 16, color: primaryColor),
      textAlign: TextAlign.center,),
  ],
),

Hay muchas respuestas, pero alguna observación más.

1. clip

Recorta el texto desbordado para arreglar su contenedor.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.clip,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Salida:

2.desvanecimiento

Difumina el texto desbordado para que sea transparente.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.fade,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ), 

Salida:

3.elipsis

Use una elipsis para indicar que el texto se ha desbordado.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Salida:

4.visible

Renderiza texto desbordado fuera de su contenedor.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.visible,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Salida:

Tratar:

 Expanded(
  child: Container(
      child: Text('OVER FLOW TEST TEXTTTT',
          overflow: TextOverflow.fade)),
),

Esto se mostrará OVER FLOW. Si hay un desbordamiento, se manejará.