Récupérer la valeur d’un TextField dans Flutter

• onTap : Il est appelé pour chaque tap unique, sauf pour chaque deuxième tap ou double tap. En interne, il construit un GestureDetector pour gérer ce type d’événement. Vous pouvez l’utiliser chaque fois que vous souhaitez déclencher une propriété de TextField basée sur les gestes.
• onSubmitted : il est appelé chaque fois que l’utilisateur indique qu’il a terminé d’éditer le texte. Principalement, chaque fois que le bouton terminé est enfoncé sur le clavier, il sera appelé et les données saisies seront stockées.
• onEditingComplete : C’est très similaire à onSubmitted . La seule différence est qu’il est appelé chaque fois que le bouton dans le coin inférieur droit du clavier est enfoncé. Il peut s’agir de « terminé », « envoyer », « aller » ou « rechercher ».

• 1- Utiliser un contrôleur de texte (TextEditingController) :
• Créer un contrôleur de texte : TextEditingController myController = TextEditingController();
• Associer le contrôleur de texte au TextField : TextField(controller: myController);
• Récupérer la valeur du TextField : String textValue = myController.text;
• 2- Utiliser la fonction onChanged() :
• Déclarer une variable : String textValue = '';
• Associer la fonction onChanged() au TextField : TextField(onChanged: (value) => textValue = value);
• Récupérer la valeur du TextField : print(textValue);
• 3- Utiliser la fonction onSubmitted() :
• Déclarer une variable : String textValue = '';
• Associer la fonction onSubmitted() au TextField : TextField(onSubmitted: (value) => textValue = value);
• Récupérer la valeur du TextField : print(textValue);
• 4- Utiliser un formulaire : vous pouvez utiliser un formulaire pour récupérer la valeur saisie dans le TextField.
• 5- Utiliser un GestureDetector :
  • vous pouvez utiliser un GestureDetector pour détecter un clic sur le bouton « Envoyer » et récupérer la valeur saisie dans le TextField à l’aide de la propriété « controller.text ».

L’approche la plus simple consiste à utiliser un rappel onChange() et une variable d’état.

Une autre approche consiste à utiliser une classe TextController pour gérer correctement tous les événements provenant de TextField.

Créez votre TextEditingController en tant que variable globale dans votre classe State et définissez-le dans votre widget TextField .

1. Étapes de réalisation

• 1- Créer un TextEditingController

TextEditingController nameController = TextEditingController();

ou encore

  final nameController = TextEditingController();

• 2- Associer le contrôleur de texte (TextEditingController) au TextField en utilisant la propriété « controller »

• TextField a une propriété controller , qui permet d’attribuer un TextEditingController , ce qui signifie passer le TextEditingController au contrôleur du TextField que nous avons créé à l’étape précédente.
• Fournir le TextEditingController à un TextField ou à un TextFormField. Une fois que vous associez ces deux classes, vous pouvez commencer à écouter les modifications apportées au champ de texte.

TextField(
                controller: myController,
                ),

• 3- Récupérez la valeur saisie en utilisant la méthode « text » du contrôleur de texte

String value = myController.text;

• 4- Utilisez la valeur récupérée comme nécessaire

• Vous avez besoin d’une fonction à exécuter chaque fois que le texte change. Créez une méthode dans la classe _MyCustomFormState qui imprime la valeur actuelle du champ de texte.

void _printLatestValue() {
                print('Second text field: ${myController.text}');
                }

• 5- Écouter le contrôleur pour les changements

• Enfin, écoutez le TextEditingController et appelez la méthode _printLatestValue() lorsque le texte change. Utilisez la méthode addListener() à cette fin.
• Commencez à écouter les modifications lorsque la classe _MyCustomFormState est initialisée et arrêtez d’écouter lorsque _MyCustomFormState est supprimé.

@override
                  void initState() {
                    super.initState();

                    // Start listening to changes.
                    myController.addListener(_printLatestValue);
                  }

• 6- Nettoyer le TextEditingController

• Il est important de noter que lorsque vous utilisez un TextEditingController, vous devez vous rappeler de le nettoyer correctement pour éviter les fuites de mémoire. Vous pouvez le faire en utilisant la méthode « dispose() » de TextEditingController.

@override
                void dispose() {
                // Nettoie le contrôleur lorsque le widget est supprimé de l'arborescence des widgets.
                  // Cela supprime également l'écouteur _printLatestValue.
                  myController.dispose();
                  super.dispose();
                }

2. Exercice d’application:

• Objectif :
• Créer une application Flutter qui contient un champ de texte (décorée avec la plupart des propriétés) et un bouton ElevatedButton (décoré).
• Récupérer la valeur du champ de texte à l’aide d’un contrôleur lorsque l’utilisateur appuie sur le bouton.
• Afficher la valeur récupérée dans un widget Text.
• Afficher la valeur récupérée dans un widget AlertDialog
• Étapes à suivre
• Créer un contrôleur pour le champ de texte en utilisant ‘TextEditingController()
• Créer un champ de texte en utilisant ‘TextField’
• Créer un bouton en utilisant ‘ElevatedButton’
• Récupérer la valeur du champ de texte à partir du contrôleur en utilisant la propriété ‘text’
• Afficher la valeur récupérée dans un widget Text
• Afficher la valeur récupérée dans un widget AlertDialog
• Code source complet pour le fichier main.dart
Cliquez ici

1. Étapes de réalisation

• Voici les étapes à suivre pour récupérer la valeur d’un TextField avec une variable d’état :
• 1-Créez une variable d’état dans votre StatefulWidget :

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State {
  String _text = ''; // la variable d'état pour stocker la valeur du TextField
  ...

• 2-Ajoutez un TextField à votre Widget et utilisez l’attribut onChanged pour mettre à jour la variable d’état :

TextField(
  onChanged: (value) {
    setState(() {
      _text = value; // met à jour la variable d'état à chaque changement dans le TextField
    });
  },
),

• 3-Vous pouvez maintenant utiliser la variable d’état pour récupérer la valeur du TextField, par exemple en l’affichant dans un Text widget :

Text('La valeur saisie est : $_text'),

2. Exercices d’application:

• Créez une application Flutter qui permet à l’utilisateur de saisir son prénom et nom dans deux champs de texte distincts. Les champs de texte seront situés en haut de l’écran et auront une marge à gauche, à droite et en haut. L’application devra afficher le nom complet de l’utilisateur sous les deux champs de texte.
• Pour la première version de l’application, l’actualisation du nom complet sera effectuée en temps réel pendant que l’utilisateur saisit son prénom et son nom. Les valeurs des champs de texte seront récupérées en utilisant l’événement « onChanged » et stockées dans l’état de l’application.
• Pour la deuxième version de l’application, l’actualisation du nom complet ne sera effectuée qu’après l’appui sur un bouton « ElevatedButton ». Les valeurs des champs de texte seront récupérées en utilisant l’événement « onChanged » et stockées dans l’état de l’application.

• Version:01

Solution
Code Dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  String _firstName = '';
  String _lastName = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nom complet',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Nom complet'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.fromLTRB(16, 16, 16, 8),
              child: TextField(
                onChanged: (text) {
                  setState(() {
                    _firstName = text;
                  });
                },
                decoration: InputDecoration(
                  labelText: 'Prénom',
                  border: OutlineInputBorder(),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(16, 8, 16, 16),
              child: TextField(
                onChanged: (text) {
                  setState(() {
                    _lastName = text;
                  });
                },
                decoration: InputDecoration(
                  labelText: 'Nom',
                  border: OutlineInputBorder(),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(16, 8, 16, 16),
              child: Text(
                'Nom complet : $_firstName $_lastName',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Explication du code:
Dans cet exemple, on crée une application avec une AppBar et un Scaffold contenant un Column. Dans la Column, on ajoute deux champs de texte (TextField) pour permettre à l’utilisateur de saisir son prénom et son nom.
En utilisant l’événement onChanged, on récupère les valeurs des champs de texte et on les stocke dans les variables _firstName et _lastName de l’état de l’application à l’aide de la méthode setState.
Enfin, on affiche le nom complet de l’utilisateur sous les deux champs de texte à l’aide d’un Text dont le contenu est mis à jour en temps réel grâce à l’état de l’application.

• Version 02

Solution
Code Dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  String firstName = '';
  String lastName = '';
  String fullName = '';

  void updateFullName() {
    setState(() {
      fullName = '$firstName $lastName';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Name App'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 16.0),
              TextField(
                decoration: InputDecoration(
                  hintText: 'Enter your first name',
                  labelText: 'First Name',
                  border: OutlineInputBorder(),
                ),
                onChanged: (value) {
                  setState(() {
                    firstName = value;
                  });
                },
              ),
              SizedBox(height: 16.0),
              TextField(
                decoration: InputDecoration(
                  hintText: 'Enter your last name',
                  labelText: 'Last Name',
                  border: OutlineInputBorder(),
                ),
                onChanged: (value) {
                  setState(() {
                    lastName = value;
                  });
                },
              ),
              SizedBox(height: 16.0),
              ElevatedButton(
                onPressed: updateFullName,
                child: Text('Update Name'),
              ),
              SizedBox(height: 16.0),
              Text(
                fullName,
                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Explication du code:
Nous avons utilisé le widget StatefulWidget pour notre application et nous avons défini un état (_MyAppState) pour stocker les valeurs entrées par l’utilisateur.
Nous avons créé deux champs de texte (TextField) pour saisir le prénom et le nom de l’utilisateur. Nous avons ajouté la méthode onChanged pour chaque champ de texte afin de stocker les valeurs entrées dans l’état.
Nous avons ajouté un bouton élevé (ElevatedButton) pour mettre à jour le nom complet de l’utilisateur. Lorsque l’utilisateur appuie sur le bouton, la méthode updateFullName est appelée, qui utilise les valeurs stockées dans l’état pour mettre à jour le nom complet.
Nous avons ajouté un champ de texte (Text) pour afficher le nom complet de l’utilisateur. Le champ de texte est mis à jour chaque fois que l’utilisateur appuie sur le bouton de mise à jour.

1. Étapes de réalisation

• 1-Créer un TextEditingController pour contrôler le contenu du TextField.

TextEditingController _textEditingController = TextEditingController();

• 2-Créer un TextField et associer le contrôleur de texte et la fonction onSubmitted().

TextField(
  controller: _textEditingController,
  onSubmitted: (String value) {
    // récupérer la valeur saisie et la stocker dans une variable
    String textFieldValue = _textEditingController.text;
    print('La valeur saisie est : $textFieldValue');
  },
);

• Dans cet exemple, la fonction onSubmitted() est appelée lorsque l’utilisateur appuie sur la touche « Entrée » ou sur le bouton de validation du clavier. La fonction reçoit la valeur saisie dans le TextField en tant que paramètre.
• 3-Pour accéder à la valeur saisie, vous pouvez appeler la méthode text sur le contrôleur de texte.

String textFieldValue = _textEditingController.text;

• Cette ligne de code récupère la valeur saisie dans le TextField et la stocke dans la variable textFieldValue.

2. Exercices d’application:

• Créer une application Flutter permettant de récupérer des données saisies par l’utilisateur dans un TextField en utilisant la méthode onSubmitted() et de les afficher dans un widget Text lors de la soumission du formulaire.

• Critères de réussite :

• 1- L’application affiche un TextField et un widget Text.
• 2-Le TextField est décoré avec une bordure, un padding et un margin.
• 3-Le texte saisi par l’utilisateur est affiché dans le widget Text lorsqu’il appuie sur la touche « entrée ».
• 4-Le texte affiché dans le widget Text est coloré.

• Consignes :

• 1- Créez un nouveau projet Flutter en utilisant la commande flutter create my_app.
• 2- Ouvrez le fichier lib/main.dart et ajoutez un nouvel import pour le package flutter/material.dart.
• 3- Créez une classe MyApp qui hérite de StatelessWidget. Cette classe sera la page d’accueil de votre application.
• 4- Dans la méthode build() de la classe MyApp, créez un Scaffold avec un TextField et un widget Text. Le TextField utilisera la méthode onSubmitted() pour récupérer les données saisies par l’utilisateur. Le widget Text affichera ces données.
• 5- Appliquez une bordure au TextField en utilisant la propriété decoration et la classe InputDecoration. Ajoutez également un padding et un margin à gauche, en haut et droite en utilisant la propriété contentPadding et la propriété margin du Container qui contient le TextField.
• 6- Coloriez le texte en utilisant la propriété style de la classe Text.
• 7- Dans la méthode main(), instanciez la classe MyApp et exécutez votre application en appelant la méthode runApp().
• 8- Lancez votre application en exécutant la commande flutter run.
Solution
Code Dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  String _inputText = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Container(
                margin: const EdgeInsets.only(top: 16.0),
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: TextField(
                  onSubmitted: (String value) {
                    setState(() {
                      _inputText = value;
                    });
                  },
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: 'Entrez du texte ici',
                  ),
                  style: TextStyle(color: Colors.blue),
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                'Vous avez saisi : $_inputText',
                style: TextStyle(fontSize: 18.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Explication du code:
• Dans cet exemple, nous avons créé une classe StatefulWidget MyApp avec un champ _inputText qui sera utilisé pour stocker le texte saisi par l’utilisateur. Nous avons également créé un TextField avec la méthode onSubmitted() pour récupérer la valeur saisie par l’utilisateur et la stocker dans _inputText. Enfin, nous avons ajouté un widget Text pour afficher la valeur saisie.
• Lorsque l’utilisateur soumet le formulaire en appuyant sur la touche « Entrée » du clavier, la méthode setState() est appelée pour mettre à jour la valeur de _inputText. Cela déclenche une nouvelle construction du widget, ce qui met à jour la valeur affichée dans le widget Text.
• Remarque : pour que la méthode onSubmitted() fonctionne, le TextField doit être enveloppé dans un formulaire ou un widget SingleChildScrollView.

1. Étapes de réalisation

• 1-Créez une instance de TextEditingController en dehors de votre Widget.

final _textEditingController = TextEditingController();

• 2-Utilisez cet objet TextEditingController dans votre Widget pour contrôler le TextField et récupérer sa valeur.

TextField(
  controller: _textEditingController,
  decoration: InputDecoration(
    hintText: 'Enter your name',
  ),
),

• 3-Dans votre formulaire, vous pouvez utiliser la méthode onFormSubmitted pour récupérer la valeur du TextField à la soumission du formulaire.

final _formKey = GlobalKey();
...
TextField(
  decoration: InputDecoration(labelText: 'Email'),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
),
...
if (_formKey.currentState.validate()) {
  //Do something with the value
}

• Dans cet exemple, nous avons créé une instance de TextEditingController en dehors du Widget, puis nous l’avons passé au TextField à l’aide de la propriété controller. Dans notre formulaire, nous avons utilisé la méthode onFieldSubmitted pour déclencher _submitForm() lorsque l’utilisateur a soumis le formulaire. Dans cette méthode, nous avons récupéré la valeur du TextField à l’aide de textEditingController.text.
• Il est important de noter que vous devez appeler textEditingController.dispose() lorsque vous n’avez plus besoin de l’objet TextEditingController. Cela permet de libérer la mémoire utilisée par l’objet.

2. Exercices d’application:

• Créez une application Flutter qui permet à l’utilisateur de saisir son nom, son prénom et son âge dans des TextFormField bien décorés dans un formulaire. L’application doit afficher les informations saisies par l’utilisateur lorsqu’il appuie sur le bouton « Enregistrer » dans un widget Text avec une couleur verte et avec une marge gauche, haute et droite.
• Critères de réussite :
• L’application doit comporter un formulaire avec les champs « nom », « prénom » et « âge ».
• Les champs de saisie doivent être décorés de manière appropriée.
• Un bouton « Enregistrer » doit être présent sous le formulaire.
• Lorsque l’utilisateur appuie sur le bouton « Enregistrer », les informations saisies doivent être validées et affichées dans un widget Text avec une couleur verte.
• Un margin de 20 pixels doit être établi à gauche, en haut et à droite du formulaire.
• Consignes :
• Le code de l’application doit être écrit en Dart avec Flutter.
• L’application doit être fonctionnelle et répondre aux critères de réussite.
• Le code doit être bien structuré et facilement compréhensible.
• Des commentaires doivent être ajoutés au besoin pour expliquer le code.
• L’application doit être testée pour vérifier son fonctionnement.
Solution
Code Dart
import 'package:flutter/material.dart';

void main() => runApp(UserFormApp());

class UserFormApp extends StatefulWidget {
  @override
  _UserFormAppState createState() => _UserFormAppState();
}

class _UserFormAppState extends State {
  final _formKey = GlobalKey();
  final _firstNameController = TextEditingController();
  final _lastNameController = TextEditingController();
  final _ageController = TextEditingController();
  String _userInfo = '';

  void _saveUser() {
    if (_formKey.currentState!.validate()) {
      final firstName = _firstNameController.text;
      final lastName = _lastNameController.text;
      final age = _ageController.text;

      setState(() {
        _userInfo = 'Nom: $firstName $lastName, Âge: $age';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Application de formulaire utilisateur'),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 20),
                Text(
                  'Prénom',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                TextFormField(
                  controller: _firstNameController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Entrez votre prénom',
                  ),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Entrez votre prénom s\'il vous plait';
                    }
                    return null;
                  },
                ),
                SizedBox(height: 20),
                Text(
                  'Nom de famille',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                TextFormField(
                  controller: _lastNameController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Entrez votre nom de famille',
                  ),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Veuillez entrer votre nom de famille';
                    }
                    return null;
                  },
                ),
                SizedBox(height: 20),
                Text(
                  'Âge',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                TextFormField(
                  controller: _ageController,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Entrez votre âge',
                  ),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Veuillez entrer votre âge';
                    }
                    final age = int.tryParse(value);
                    if (age == null || age <= 0) {
                      return 'Veuillez entrer un âge valide';
                    }
                    return null;
                  },
                ),
                SizedBox(height: 20),
                Center(
                  child: ElevatedButton(
                    onPressed: _saveUser,
                    child: Text('Sauvegarder'),
                  ),
                ),
                SizedBox(height: 20),
                Text(
                  _userInfo,
                  style: TextStyle(
                    color: Colors.green,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Explication du code:

• Créer une application Flutter permettant de récupérer des données saisies par l'utilisateur dans un TextField et de les afficher dans la même page lors du clic sur un bouton.
• Cette fonctionnalité est illustrée dans l'image suivante :

• 1- Créez un nouveau projet Flutter en utilisant la commande flutter create my_app.
• 2- Ouvrez le fichier lib/main.dart et ajoutez un nouvel import pour le package flutter/material.dart.

import 'package:flutter/material.dart';

• 3- Créez une classe HomePage qui hérite de StatefulWidget. Cette classe sera la page d'accueil de votre application.
• 4- Dans la classe HomePage, créez un nouvel état mutable en ajoutant une classe HomePageState qui hérite de State.
• 5- Dans la classe HomePageState, créez un TextEditingController en utilisant la syntaxe suivante :

final _textFieldController = TextEditingController();

• 6- Ajoutez une méthode _navigateToResultPage() qui sera appelée lors du clic sur le bouton. Cette méthode récupérera la valeur du TextField en utilisant le TextEditingController et l'affichera dans une nouvelle page en utilisant la navigation. Voici un exemple de code :

void _navigateToResultPage(BuildContext context) {
  String value = _textFieldController.text;
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => ResultPage(value: value)),
  );
}

• 7- Créez une classe ResultPage qui hérite de StatelessWidget. Cette classe sera la page de résultat de votre application.
• 8- Dans la classe ResultPage, créez un constructeur qui prendra une valeur en paramètre et l'affichera dans un Text. Voici un exemple de code :

class ResultPage extends StatelessWidget {
  final String value;

  ResultPage({required this.value});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Result Page'),
      ),
      body: Center(
        child: Text('Data from TextField: $value'),
      ),
    );
  }
}

• 9- Dans la méthode build() de la classe HomePageState, ajoutez un Scaffold avec un TextField et un bouton. Le TextField utilisera le TextEditingController que vous avez créé précédemment. Le bouton appellera la méthode _navigateToResultPage() lorsqu'il sera cliqué. Voici un exemple de code :

class ResultPage extends StatelessWidget {
  final String value;

  ResultPage({required this.value});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Result Page'),
      ),
      body: Center(
        child: Text('Data from TextField: $value'),
      ),
    );
  }
}

• 10- Maintenant, dans la méthode main(), instanciez la classe HomePage et exécutez votre application en appelant la méthode runApp(). Voici un exemple de code :

void main() {
  runApp(MaterialApp(
    title: 'My App',
    home: HomePage(),
  ));
}

• 11- Lancez votre application en exécutant la commande flutter run.
• 12- Testez votre application en saisissant du texte dans le TextField et en cliquant sur le bouton.

• Code source complet pour le fichier main.dart :





Cliquez ici

import 'package:flutter/material.dart';

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

class MyTextField extends StatelessWidget {
  const MyTextField({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Récupérer le contenu d\'un textField'),
        ),
        body: const Center(child: RecupererValeurTextField()),
      ),
    );
  }
}

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

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

class _RecupererValeurTextFieldState extends State {
  final valeurTextFieldcontroller = TextEditingController();

  String resultat = '';

  recupererDonneesTextFields() {
    setState(() {
      resultat = valeurTextFieldcontroller.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
              width: 400,
              padding: const EdgeInsets.all(10.0),
              child: TextField(
                controller: valeurTextFieldcontroller,
                autocorrect: true,
                decoration:
                    const InputDecoration(hintText: 'Ecrivez du texte ici'),
              )),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color.fromARGB(255, 23, 58, 255),
              textStyle: const TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  fontStyle: FontStyle.normal),
              padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
            ),
            onPressed: recupererDonneesTextFields,
            child: const Text(
                'Cliquez ici pour récupérer les données saisies dans le champ de texte'),
          ),
          Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("Le texte saisi est = $resultat",
                  style: const TextStyle(fontSize: 20)))
        ],
      ),
    ));
  }
}

• Voici un exercice de création d'une application Flutter qui comprend les étapes suivantes :
• 1- Nous devons créer deux TextFields décorés pour permettre à l'utilisateur de saisir son nom d'utilisateur et son mot de passe.
• 2-Ensuite, nous devons ajouter un RaisedButton pour permettre à l'utilisateur de soumettre ses informations. Lorsque l'utilisateur clique sur le bouton, nous devons récupérer les valeurs saisies dans les champs de texte.
• 3-Pour cela, nous allons utiliser la propriété onPressed() du bouton pour définir une fonction qui va récupérer les valeurs saisies dans les champs de texte et les stocker dans des variables.
• 4-Ensuite, nous devons créer un widget texte et l'afficher à l'écran avec les valeurs saisies dans les champs de texte en utilisant la couleur verte.
• 5-Enfin, le résultat final souhaité est une application qui affiche les informations saisies par l'utilisateur dans un widget texte en couleur verte, comme illustré dans l'image fournie.

• Pour récupérer la valeur d'un TextField dans Flutter, vous pouvez utiliser la propriété "controller" de TextField. Vous pouvez définir un "TextEditingController" pour le TextField, puis utiliser la propriété "text" de ce contrôleur pour récupérer la valeur entrée dans le TextField.
• Vous pouvez également utiliser la propriété "onChanged" pour définir une fonction qui sera appelée chaque fois que la valeur du TextField change. Cela vous permet de récupérer la valeur sans avoir besoin d'utiliser un "TextEditingController".
• Réalisez deux exemples flutter ou vous utilisez chacune des deux méthodes
Solution

Exemple 01
TextEditingController _controller = TextEditingController();
...
TextField(
  controller: _controller,
),
...
String value = _controller.text;
exemple02
TextField(
  onChanged: (String value) {
    // utilisez la variable `value` ici
  },
),

• Écrire un programme Flutter qui affiche un TextField et un bouton "Valider". Lorsque l'utilisateur tape une valeur dans le TextField et appuie sur le bouton "Valider", le programme doit afficher cette valeur dans un widget Text.
Solution
Code
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final myController = TextEditingController();
  String valueText = "";

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField Exemple'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(32.0),
              child: TextField(
                controller: myController,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Entrez une valeur',
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  valueText = myController.text;
                });
              },
              child: Text('Valider'),
            ),
            SizedBox(height: 16.0),
            Text(
              'Valeur saisie : $valueText',
              style: TextStyle(fontSize: 20.0),
            ),
          ],
        ),
      ),
    );
  }
}
Explication
Premièrement, nous avons déclaré un TextEditingController pour gérer le champ de texte et une variable _value pour stocker la valeur saisie.
deuxièmment, a méthode _handleSubmitted est appelée lorsque l’utilisateur appuie sur le bouton "Valider". Elle récupère la valeur saisie dans le TextEditingController, stocke la valeur dans la variable TextEditingController, et vide le champ de texte en appelant _valueclear() sur le TextEditingController.
Nous avons utilisé un Column pour afficher le TextField, le bouton "Valider", et le widget Text qui affiche la valeur saisie.
Le controller est passé en tant que paramètre du TextField, pour gérer l’entrée de l’utilisateur.
Enfin, lorsque l’utilisateur appuie sur le bouton "Valider", la méthode _handleSubmitted est appelée via onPressed.

• Écrire un programme Flutter qui affiche deux TextFields et un bouton "Valider". Lorsque l’utilisateur tape une valeur dans les deux TextFields et appuie sur le bouton "Valider", le programme doit afficher la somme des deux valeurs saisies dans un widget Text.
• Un texte n'est pas valide considéré comme 0 exemple si l'utilisateur tape "apc" le contenu du TextFields sera 0
Solution

Code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final _textController1 = TextEditingController();
  final _textController2 = TextEditingController();
  String _result = '';

  @override
  void dispose() {
    _textController1.dispose();
    _textController2.dispose();
    super.dispose();
  }

  void _handleSubmitted() {
    final int value1 = int.tryParse(_textController1.text) ?? 0;
    final int value2 = int.tryParse(_textController2.text) ?? 0;
    final int sum = value1 + value2;
    setState(() {
      _result = 'La somme de $value1 et $value2 est $sum';
      _textController1.clear();
      _textController2.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                controller: _textController1,
                decoration: InputDecoration(
                  hintText: 'Entrez un nombre',
                ),
              ),
              SizedBox(height: 20),
              TextField(
                controller: _textController2,
                decoration: InputDecoration(
                  hintText: 'Entrez un nombre',
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _handleSubmitted,
                child: Text('Valider'),
              ),
              SizedBox(height: 20),
              Text(_result),
            ],
          ),
        ),
      ),
    );
  }
}

Explication

Nous avons déclaré deux TextEditingController pour gérer les deux champs de texte et une variable _result pour stocker la somme.

La méthode _handleSubmitted est appelée lorsque l’utilisateur appuie sur le bouton « Valider ». Elle récupère les valeurs saisies dans les deux TextEditingController, calcule leur somme, stocke la somme dans la variable _result, et vide les deux champs de texte en appelant clear() sur les TextEditingController.

Nous avons utilisé un pour afficher les deux , le bouton « Valider », et le widget qui affiche la somme.ColumnTextFieldText
Les deux sont passés en tant que paramètres des deux , pour gérer l’entrée de l’utilisateur.TextEditingControllercontrollerTextField
Lorsque l’utilisateur appuie sur le bouton « Valider », la méthode est appelée via ._handleSubmittedonPressed