Comment vider un TextField dans Flutter

• Utiliser la propriété “controller” : Il est possible de définir un “TextEditingController” pour un TextField et de vider la valeur en utilisant la méthode “clear()” de ce controller.
• Utiliser un “FormField” : Il est possible d’utiliser un “FormField” pour gérer les données d’un formulaire, y compris les TextFields. Il est alors possible de vider la valeur en utilisant la méthode “reset()” de ce FormField.
• Utiliser un “FocusNode” : Il est possible de définir un “FocusNode” pour un TextField et de vider la valeur en utilisant la méthode “unfocus” pour retirer le focus du TextField, ce qui déclenche un appel à “onChanged” avec une valeur vide.
• Utiliser un “TextField” : Il est possible de définir un “TextField” directement et de vider la valeur en utilisant la propriété “onChanged” pour récupérer la valeur lorsque celle-ci change, et la remplacer par une valeur vide.
• Utiliser un “StreamBuilder” : Il est possible d’utiliser un “StreamBuilder” pour écouter les changements de valeur d’un TextField et de vider la valeur en utilisant la méthode “add” avec une valeur vide pour ajouter une valeur vide dans le stream.

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State createState() => _HomeState();
}

class _HomeState extends State {
  TextEditingController valeurTextFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

Cliquez ici

import 'package:flutter/material.dart';

void main() => runApp(const Home());

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State createState() => _HomeState();
}

class _HomeState extends State {
  //TextEditingController valeurTextFieldController = TextEditingController();
  final valeurTextFieldController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Effacer le texte du TextField"),
          backgroundColor: Colors.deepPurpleAccent,
        ),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              TextField(
                controller: valeurTextFieldController,
                decoration: const InputDecoration(
                    hintText: "Saisissez vos remarques",
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            width: 2,
                            color: Color.fromARGB(255, 99, 82, 255)))),
              ),
              //Ajouter un espace
              const SizedBox(
                height: 10,
              ),
              ElevatedButton(
                  onPressed: () {
                    viderTextField();
                  },
                  child: const Text("Vider le contenu du TextField"))
            ],
          ),
        ),
      ),
    );
  }

  void viderTextField() {
    valeurTextFieldController.clear();
    //ou utilisez:
    //valeurTextFieldController.text = "";
  }
}

suffixIcon: IconButton(
icon: const Icon(Icons.clear), onPressed: viderTextField)
)

Cliquez ici

import 'package:flutter/material.dart';

void main() => runApp(const Home());

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State createState() => _HomeState();
}

class _HomeState extends State {
  //TextEditingController valeurTextFieldController = TextEditingController();
  final valeurTextFieldController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Effacer le texte du TextField"),
          backgroundColor: Colors.deepPurpleAccent,
        ),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  hintText: "Saisissez vos remarques",
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(
                        width: 2, color: Color.fromARGB(255, 99, 82, 255)),
                  ),
                  suffixIcon: IconButton(
                      icon: const Icon(Icons.clear), onPressed: viderTextField),
                ),
                controller: valeurTextFieldController,
                // clear text),
              ),
              //Ajouter un espace
              const SizedBox(
                height: 10,
              ),
              ElevatedButton(
                  onPressed: () {
                    viderTextField();
                  },
                  child: const Text("Vider le contenu du TextField"))
            ],
          ),
        ),
      ),
    );
  }

  void viderTextField() {
    valeurTextFieldController.clear();
    //ou utilisez:
    //valeurTextFieldController.text = "";
  }
}

FocusNode _focusNode = FocusNode();

TextField(
    focusNode: _focusNode,
    // ...
)

TextButton(
    child: Text("Vider"),
    onPressed: _clearTextField,
)

void _clearTextField() {
    _focusNode.unfocus();
    _textController.clear();
}

TextEditingController _textController = TextEditingController();
Et finalement, assignez-le à la propriété "controller" de notre TextField:
Copy code
TextField(
    focusNode: _focusNode,
    controller: _textController,
    // ...
)

• Pour vider un TextField dans Flutter, il est possible d’utiliser la propriété “controller” pour récupérer un objet de type TextEditingController et utiliser la méthode “clear()” pour vider le contenu du TextField. Il est également possible de remplacer le contenu par une chaîne vide en utilisant la propriété “text” du controller.
• Réaliser un exemple illustrant cette méthode
Cliquez ici

TextEditingController _textController = TextEditingController();

// ...

TextField(
  controller: _textController,
),

// ...

// Pour vider le TextField
_textController.clear();

// ou 

_textController.text = "";

• Il s’agit d’un exercice des plus classiques en programmation. L’objectif est de créer un container qui contient deux TextFields et un bouton de commande.
• Le fait de cliquer sur le bouton additionne le contenu des deux TextFields
• L’image ci-dessous est une représentation de ce qui est demandé



Solution

Visitez la page suivante