Champ de texte multiligne dans flutter

Question

Cela peut sembler facile mais comment faire un champ de texte éditable de plusieurs lignes dans Flutter ? TextField ne fonctionne qu'avec une seule ligne.

Edit : quelques précisions car il semble que ce ne soit pas clair. Bien que vous puissiez définir le multiline pour envelopper virtuellement le contenu du texte, ce n'est toujours pas un multiline. Il s'agit d'une ligne unique affichée en plusieurs lignes. Si vous voulez faire quelque chose comme ça, vous ne pouvez pas. Parce que vous n'avez pas accès à ENTER bouton. Et pas de bouton d'entrée signifie pas de ligne multiple.

Answer 1

Pour utiliser l'enveloppement automatique, il suffit de définir maxLines comme null :

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
)

Si le maxLines la propriété est null il n'y a pas de limite au nombre de lignes et l'habillage est activé.

Answer 2

Si vous voulez que votre champ de texte s'adapte à la saisie de l'utilisateur, faites ceci :

TextField(
    keyboardType: TextInputType.multiline,
    minLines: 1,//Normal textInputField will be displayed
    maxLines: 5,// when user presses enter it will adapt to it
    );

Ici, réglez les lignes maximales sur ce que vous voulez et vous êtes prêt à partir. A mon avis, définir les lignes max à null n'est pas un bon choix, nous devrions le définir à une certaine valeur.

Answer 3

Depuis septembre 2017, une valeur d'enum a été ajoutée pour prendre en charge l'édition de texte multiligne.

new TextField(
  keyboardType: TextInputType.multiline,
  maxLines: whatever,
)

Answer 4

Utilisez expands et tu n'as pas besoin de donner minLines ou maxLines une valeur spécifique :

TextField(
  maxLines: null,
  expands: true, 
  keyboardType: TextInputType.multiline,
)

Answer 5

Bien que d'autres personnes aient déjà mentionné que le type de clavier "TextInputType.multiline" peut être utilisé, je voulais ajouter mon implémentation d'un TextField qui adapte automatiquement sa hauteur lorsqu'une nouvelle ligne est saisie, car on souhaite souvent imiter le comportement de saisie de WhatsApp et d'applications similaires.

J'analyse le nombre de \n Dans ce but, il est nécessaire d'insérer dans l'entrée des caractères de type '' à chaque fois que le texte est modifié. Cela semble exagéré, mais malheureusement, je n'ai pas trouvé de meilleure possibilité de réaliser ce béhavior dans Flutter jusqu'à présent et je n'ai pas remarqué de problèmes de performance, même sur les anciens smartphones.

class _MyScreenState extends State<MyScreen> {
  double _inputHeight = 50;
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(_checkInputHeight);
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  void _checkInputHeight() async {
    int count = _textEditingController.text.split('\n').length;

    if (count == 0 && _inputHeight == 50.0) {
      return;
    }
    if (count <= 5) {  // use a maximum height of 6 rows 
    // height values can be adapted based on the font size
      var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
      setState(() {
        _inputHeight = newHeight;
      });
    }
  }

  // ... build method here
  TextField(
    controller: _textEditingController,
    textInputAction: TextInputAction.newline,
    keyboardType: TextInputType.multiline,
    maxLines: null,
  )