2
votes

DropdownButtonFormField, avec une largeur fixe mais des éléments de texte dynamiques

Je ne pense pas que je comprends bien les contraintes de Flutter, alors supportez-moi!

Je veux DropdownButtonFormField qui remplit ses éléments de DB. La chaîne peut être de n'importe quelle longueur dynamique. Donc, ce que j'ai décidé, c'est d'avoir une largeur fixe DropdownButtonFormField et DropdownMenuItem aura ellipsé Text.

Voici ce que J'ai essayé.

SizedBox(
  width: 136.0,
  child: DropdownButtonFormField<int>(
    hint: Text("hintText")
    decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(0.0),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
        ),
        isDense: true),
    items: [
        DropdownMenuItem<int>(
            value: 0,
            child: TextOneLine(
              "less character",
            ),
        ),
        DropdownMenuItem<int>(
            value: 0,
            child: TextOneLine(
              "mooooorrrrreeee character",
            ),
        )
    ]
  ),
);

class TextOneLine extends StatelessWidget {
  final String data;
  final TextStyle style;
  final TextAlign textAlign;
  final bool autoSize;

  TextOneLine(
    String data, {
    Key key,
    this.style,
    this.textAlign,
    this.autoSize = false,
  })  : this.data = data,
        assert(data != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
        data,
        style: style,
        textAlign: textAlign,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      );
  }
}

Je reçois une erreur de dépassement de capacité

mais lorsque je clique sur DropdownButtonFormField , la liste des DropdownMenuItem est ellipsée.

Comment puis-je me débarrasser de l'erreur de débordement? Je ne peux pas avoir de DropDownButtonFormField flexible ou étendu car la longueur de la chaîne peut être dynamique (peut être plus longue que ce qui pourrait convenir).

flutter dart flutter-layout

8 commentaires

utiliser - Widget FittedBox - docs.flutter.io/ flutter / widgets / FittedBox-class.html

J'ai essayé d'envelopper FittedBox autour de SizedBox - l'erreur de débordement ne va pas. Je peux voir le texte réduire la taille mais comme je l'ai dit, l'erreur persiste

pouvez-vous produire un code reproductible minimum du problème?

terminé. vérifie maintenant

Probablement le SizedBox le problème

très probablement, si vous modifiez TextOneLine - maxLines à 2 ou 3, vous n'obtiendrez pas de débordement. Si vous insistez pour afficher en 1 ligne, vous devez dimensionner le texte fontSize.

@ RémiRousselet J'utilise SizedBox pour limiter la largeur DropdownButtonFormField. Ou bien il occupe toute la largeur (ce que je ne veux pas)

@Nick changer maxLines en 2 ou 3 n'aide pas.

3 Réponses :

4
votes

Veuillez vous référer aux images ci-jointes, j'ai ajouté 3 images.

Image 1: c'est le problème que vous rencontrez.

Image 2: quand j'ai supprimé la largeur code> depuis SizedBox . Maintenant, il montre 3 cases 1 est le texte d'indication et l'autre est vide et 3 est la flèche déroulante. Je pense que le débordement est à cause du 2ème espace vide.

Image 3: Maintenant, dans ce cas, j'ai à nouveau ajouté une largeur à SizedBox de 136 et j'ai mis la SizedBox à l'intérieur d'un Container ayant une taille de largeur fixe de 100 (est la largeur du texte dans la liste déroulante et il enveloppera votre texte selon la largeur à coup sûr). Cela a résolu le problème de débordement selon le code que vous avez donné.

Je pense que vous avez ajouté un widget personnalisé qui est TextOneLine à l'origine du problème. Il peut y avoir d'autres solutions de contournement, mais cela a résolu le problème.

SizedBox(
        width: 136,
        child: DropdownButtonFormField<int>(
            hint: Text("hintText"),
            decoration: InputDecoration(
                contentPadding: const EdgeInsets.all(0.0),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
                isDense: true),
            items: [
              DropdownMenuItem<int>(
                value: 0,
                child: Container(
                  width: 100,
                  child: TextOneLine(
                    "less character",
                  ),
                ),
              ),
              DropdownMenuItem<int>(
                  value: 0,
                  child: Container(
                    width: 100,
                    child: TextOneLine(
                      "mooooorrrrreeee character",
                    ),
                  ))
            ]),
      )

Essayez ceci et faites-le moi savoir si c'était le problème (et résolu) et veuillez nous tenir au courant de toute autre solution de contournement que vous avez effectuée. Merci

1 commentaires

ça a du sens. c'est une solution très simple. je me sens stupide maintenant !! Merci quand même.

0
votes

c'est parce que vous avez un élément dans votre liste qui se compose d'un trop grand nombre de caractères comme "mooooorrrrreeee character" ou quelque chose comme ça

0 commentaires

3
votes

Je sais qu'il est peut-être un peu tard pour partager la réponse, mais j'ai trouvé une solution simple. Ajoutez simplement un isExpanded: true au DropdownButtonFormField.

  DropdownButtonFormField<int>(
        hint: Text("hintText"),
        isExpanded: true,
        decoration: InputDecoration(
            contentPadding: const EdgeInsets.all(0.0),
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
            ),
            isDense: true),
        items: [
          DropdownMenuItem<int>(
            value: 0,
            child: Container(
              width: 100,
              child: TextOneLine(
                "less character",
              ),
            ),
          ),
          DropdownMenuItem<int>(
              value: 0,
              child: Container(
                width: 100,
                child: TextOneLine(
                  "mooooorrrrreeee character",
                ),
              ))
        ])

Avant d'ajouter la propriété isExpanded Après l'ajout de la propriété isExpanded

0 commentaires