Flutter - Avvolgi il testo in caso di overflow, come inserire puntini di sospensione o dissolvenza

Sto cercando di creare una riga in cui il testo centrale abbia una dimensione massima e se il contenuto del testo è troppo grande, si adatta alle dimensioni.

Inserisco la TextOverflow.ellipsisproprietà per accorciare il testo e inserendo i tripli punti ...ma non funziona.

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

risultato:

previsto:

Dovresti avvolgerlo Containerin un Flexibleper farti Rowsapere che va bene Containerche sia più stretto della sua larghezza intrinseca. Expandedfunzionerà anche.

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

Utilizzo di ellissi

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

Utilizzo di Fade

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

Utilizzando Clip

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

Nota:

Se stai usando Textdentro a Row, puoi mettere sopra Textdentro Expandedcome:

Expanded(
  child: AboveText(),
)

Puoi utilizzare questo codice ritagliato per mostrare il testo con i puntini di sospensione

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

Puoi farlo così

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

prima, racchiudi il tuo Rowo Columnin un widget Flexibleo Expandedpoi

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

Mettere a capo i cui elementi secondari sono in una riga o colonna, avvolgere la colonna o la riga è nuovo Flessibile ();

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

Un modo per correggere un overflow di un widget di testo all'interno di una riga se, ad esempio, un messaggio di chat può essere una riga molto lunga. Puoi creare un Container e un BoxConstraint con maxWidth al suo interno.

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

Basta avvolgere all'interno di un widget che può richiedere una larghezza specifica per funzionare o assumerà la larghezza del contenitore genitore.

Penso che al contenitore principale debba essere assegnata una larghezza massima della dimensione corretta. Sembra che la casella di testo riempirà tutto lo spazio indicato sopra.

A seconda della tua situazione, penso che questo sia l'approccio migliore di seguito.

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

Se inserisci semplicemente il testo come figlio / i di una colonna, questo è il modo più semplice per disporre il testo automaticamente a capo. Supponendo che tu non abbia niente di più complicato in corso. In quei casi, penserei che creeresti il ​​tuo contenitore delle dimensioni che ritieni opportuno e inseriresti un'altra colonna all'interno e poi il tuo testo. Questo sembra funzionare bene. I contenitori vogliono ridursi alle dimensioni del loro contenuto e questo sembra essere naturalmente in conflitto con il confezionamento, che richiede uno sforzo maggiore.

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

Ci sono molte risposte ma Will ancora qualche osservazione.

1. clip

Ritaglia il testo in eccesso per fissarne il contenitore.

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

Produzione:

2.fade

Dissolvi il testo traboccante in trasparente.

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

Produzione:

3.ellipsis

Utilizza i puntini di sospensione per indicare che il testo è traboccato.

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

Produzione:

4.visible

Rende il testo in eccesso al di fuori del suo contenitore.

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

Produzione:

Provare:

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

Questo mostrerà OVER FLOW. Se c'è un trabocco, verrà gestito.