Flutter - Envelopper le texte en cas de dépassement, comme insérer des points de suspension ou fondu

J'essaie de créer une ligne dans laquelle le texte central a une taille maximale, et si le contenu du texte est trop grand, il s'adapte à la taille.

J'insère la TextOverflow.ellipsispropriété pour raccourcir le texte et insérer les points triples ...mais cela ne fonctionne pas.

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

résultat:

attendu:

Vous devriez envelopper votre Containerdans un Flexiblepour vous faire Rowsavoir qu'il est normal que le Containersoit plus étroit que sa largeur intrinsèque. Expandedfonctionnera également.

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

Utiliser les ellipses

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

Utilisation de fondu

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

Utilisation du clip

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

Remarque:

Si vous utilisez Text intérieur de a Row, vous pouvez mettre ci-dessus à l' Textintérieur Expandedcomme:

Expanded(
  child: AboveText(),
)

Vous pouvez utiliser ce code extrait pour afficher du texte avec des points de suspension

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

Tu peux le faire comme ça

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

d'abord, enveloppez votre Rowou Columndans un widget Flexibleou Expandedpuis

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

Une façon de corriger un débordement d'un widget texte dans une ligne si, par exemple, un message de discussion peut être une très longue ligne. Vous pouvez créer un conteneur et un BoxConstraint avec un maxWidth dedans.

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

L'emballage dont les éléments enfants sont dans une ligne ou une colonne, veuillez envelopper votre colonne ou ligne est nouveau Flexible ();

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

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

Enveloppez simplement dans un widget qui peut prendre une largeur spécifique pour qu'il fonctionne ou il prendra la largeur du conteneur parent.

Je pense que le conteneur parent doit recevoir un maxWidth de la taille appropriée. Il semble que la zone de texte remplisse l'espace donné ci-dessus.

Selon votre situation, je pense que c'est la meilleure approche ci-dessous.

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

Si vous placez simplement du texte comme enfant (s) d'une colonne, c'est le moyen le plus simple pour que le texte soit automatiquement enveloppé. En supposant que vous n'ayez rien de plus compliqué. Dans ces cas, je pense que vous créeriez votre conteneur de la taille que vous voulez et mettrez une autre colonne à l'intérieur, puis votre texte. Cela semble bien fonctionner. Les conteneurs veulent réduire la taille de leur contenu, ce qui semble naturellement entrer en conflit avec l'emballage, qui nécessite plus d'efforts.

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

Il y a beaucoup de réponses mais Will un peu plus de l'observation.

1. clip

Découpez le texte qui déborde pour corriger son conteneur.

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

Production:

2. fondu

Fondu le texte qui déborde en transparent.

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

Production:

3. ellipse

Utilisez des points de suspension pour indiquer que le texte a débordé.

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

Production:

4. visible

Rendre le texte débordant en dehors de son conteneur.

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

Production:

Essayer:

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

Cela montrera OVER FLOW. S'il y a un débordement, il sera traité.