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