Multiline TextFormField : RenderFlex bug

Flutter
1

Bonjour à tous,

J’essai de faire un TextFormField multiligne dans un widget Dialog et Column :

Dialog(
child:Column(
children :[
Widget1(),
TextFormField(),
Widget3(),
]
)
)

J’aimerai rendre Flexible la hauteur de mon TextFormField : qu’il prenne la taille de l’écran disponible et que lorsque j’utilise le clavier que sa taille soit réduite. J’ai « wrappé » le TextFormField dans quelques Paddings :

Avec cette version ca affiche mais j’ai le bug de renderflex en sortant le clavier :

Padding(
                padding: EdgeInsets.all(_paddingTitle),
                child: Container(
                  decoration: BoxDecoration(
                    color: _colorBackgroundTextFormField,
                    borderRadius: BorderRadius.circular(_radiusTxtFormField),
                  ),
                  child: Padding(
                    padding: EdgeInsets.only(
                      right: _insideSidePadding,
                    ),
                    child: TextFormField(
                      keyboardType: TextInputType.multiline,
                      maxLines: _maxNbLineForDropdown,
                      decoration: InputDecoration(
                        prefixIcon: Icon(Icons.tips_and_updates),
                        border: InputBorder.none,
                        labelText: _descriptionLabelText,
                        hintText: _descriptionHintText,
                      ),
                    ),
                  ),
                ),
              ),

Avec cette version ca plante totalement :

 Padding(
                padding: EdgeInsets.all(_paddingTitle),
                child: Container(
                  decoration: BoxDecoration(
                    color: _colorBackgroundTextFormField,
                    borderRadius: BorderRadius.circular(_radiusTxtFormField),
                  ),
                  child: Padding(
                    padding: EdgeInsets.only(
                      right: _insideSidePadding,
                    ),
                    child: TextFormField(
                      keyboardType: TextInputType.multiline,
                      maxLines: null,
                      expands: true,
                      decoration: InputDecoration(
                        prefixIcon: Icon(Icons.tips_and_updates),
                        border: InputBorder.none,
                        labelText: _descriptionLabelText,
                        hintText: _descriptionHintText,
                      ),
                    ),
                  ),
                ),
              ),

Merci d’avance :slight_smile:

2

Bonjour @Xababa_Dalabama !

Sachant que les widgets parents donnent la taille utilisable aux enfants, il semblerait que ton widget Dialog n’a pas la place pour s’afficher dans la taille d’écran disponible au dessus de ton clavier.

As-tu essayé une ScrollView par example entre tes widgets Dialog et Column ?

Cédric

3

Hello @cedric06nice

Merci pour ton aide ! Effectivement ca semble régler le problème de rendexflex sur la version ou on fige la hauteur du TextFormField avec le maxline.

Enfait ce que j’aimerais c’est que le TextFormField s’étire / se replie pour prendre la totalité de la place restante (si l’écran est plus grands s’agrandir vers le bas, si on sort le clavier qu’il se réduise pour laisser visible les boutons en dessous et le titre au dessus :slight_smile:

4

Ah je vois !

J’avais mal compris alors.

Ce que tu recherches, c’est probablement le widget Expended, pour que ton TextFormField prenne toute la hauteur avec maxLines: null :

Dialog(
  child: Column(
    children: [
      const Text('Widget1'),
      Expanded(child:
        TextFormField(
          keyboardType: TextInputType.multiline,
          maxLines: null,
          decoration: const InputDecoration(
            prefixIcon: Icon(Icons.tips_and_updates),
            border: InputBorder.none,
            labelText: "Label",
            hintText: "Hint",
          ),
        ),
      ),
      const Text('Widget3'),
    ],
  ),
),

C’est bien ca ?

Cedric

5

Hello @cedric06nice

L’affichage fonctionne et semble bien allé. Ca ne ressemble pas tout à fait au comportement que j’attendais mais c’est pas grave :slight_smile: En ne mettant pas le minLines, ca le réduit à une ligne. Le scrollonechildvie que tu avais proposé fait bien l’affaire dans un premier temps !

Padding(
                  padding: EdgeInsets.all(_paddingTitle),
                  child: Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        color: _colorBackgroundTextFormField,
                        borderRadius:
                            BorderRadius.circular(_radiusTxtFormField),
                      ),
                      child: Padding(
                        padding: EdgeInsets.only(
                          right: _insideSidePadding,
                        ),
                        child: TextFormField(
                          controller: _controllerDescritpion,
                          keyboardType: TextInputType.multiline,
                          minLines: _minNbLineForDropdown,
                          maxLines: null,
                          decoration: InputDecoration(
                            prefixIcon: Icon(Icons.tips_and_updates),
                            border: InputBorder.none,
                            labelText: _descriptionLabelText,
                            hintText: _descriptionHintText,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),