Flutter: ajusta el texto cuando se desborda, como insertar puntos suspensivos o desvanecerse

Resuelto rafaelcb21 asked hace 54 años • 24 respuestas

Estoy intentando 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 ajuste al tamaño.

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

dardo.principal

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:

ingrese la descripción de la imagen aquí

esperado:

ingrese la descripción de la imagen aquí

rafaelcb21 avatar Jan 01 '70 08:01 rafaelcb21
Aceptado

Debes envolverlo Containeren una Flexiblepara hacerle Rowsaber que está bien que Containersea más angosto que su ancho intrínseco. Expandedtambién funcionará.

captura de pantalla

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,
      ),
    ),
  ),
),
Collin Jackson avatar Jun 16 '2017 02:06 Collin Jackson

Usando puntos suspensivos

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

ingrese la descripción de la imagen aquí


Usando desvanecimiento

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

ingrese la descripción de la imagen aquí


Usando clip

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

ingrese la descripción de la imagen aquí


Nota:

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

Expanded(
  child: AboveText(),
)
CopsOnRoad avatar Jan 16 '2019 17:01 CopsOnRoad