Le widget TextField dans Flutter

Le widget TextField dans Flutter

  1. Objectif

    • Apprendre à utiliser un widget TextField en flutter et ses propriétés en détail

  2. Présentation

    • Dans Flutter,le widget TextField est utilisé pour obtenir une entrée en caractères alphanumériques de l’utilisateur de l’application.
    • TextField permet à l’utilisateur de l’application d’entrer des données dans l’application.
    • Le widget TextField est le plus souvent utilisé pour créer des formulaires de saisie d’application où le développeur doit demander plusieurs types d’informations à l’utilisateur.
    • Nous pouvons également ajouter plusieurs attributs avec TextField, tels que l’étiquette, l’icône, le texte d’indication en ligne et le texte d’erreur en utilisant un InputDecoration comme décoration. Si nous voulons supprimer entièrement les propriétés de décoration, il est nécessaire de définir la décoration sur null .
    • Certains des attributs les plus couramment utilisés avec le widget TextField sont les suivants :
      • decoration : pour afficher la décoration autour du champ de texte.
      • border : crée une bordure rectangulaire arrondie par défaut autour du champ de texte.
      • labelText : pour afficher le texte de l’étiquette lors de la sélection du champ de texte.
      • hintText : pour afficher le texte de l’indice dans le champ de texte.

  3. Créer un TextField dans Flutter

    • Le code suivant explique un exemple de démonstration du widget TextFiled dans Flutter.
    • Commencer par créer un nouveau projet dont le nom “exemple_text_field”
    • Dans le fichier “main.dart” importer le package material.dart dans l’application .
        • import 'package:flutter/material.dart';
    • Appeler la classe principale MyApp en utilisant la fonction void main run app.
        • Ex01

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

        void main() => runApp(const MyApp());
    • Créer la classe de widget principale nommée MyApp qui s’étend avec le widget sans état.
        • class MyApp extends StatelessWidget {
.....
.....
}
    • Créer un widget Scaffold -> Widget center ->Widget column dans la zone de construction du widget dans la classe précédemment crée.
        • class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const []))));
  }
}
    • Créer un widget Conteneur puis placer-y le widget TextField .
    • Le widget TextField ne supportait pas directement la largeur et la hauteur.
      • Container(
            width: 300,
            child: TextField(
                decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Entrez le nom ici',
                hintText: 'Entrez le nom ici',
                 ),
                  autofocus: false,
                 )
               )
      Capture d’écran Avant sélection

      Le widget TextField dans Flutter

      Après sélection

      Le widget TextField dans Flutter

    • Ajouter un AppBar à l’exemple précédent
      • Capture d’écran

      Le widget TextField dans Flutter

      Code à ajouter

      home: Scaffold(
            appBar: AppBar(
              title: const Text('Application TextField'),
            ),
            body: Center(
                .........
    • Voyons le code source complet qui contient le widget TextField.
      import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Application TextField'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                  // ignore: sized_box_for_whitespace
                  Container(
                      width: 300,
                      child: const TextField(
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Entrez le nom ici',
                          hintText: 'Entrez le nom ici',
                        ),
                        autofocus: false,
                      ))
                ]))));
  }
}

  4. Applications

    • App 01

      • Travail demandé

        • 01- Réaliser une application flutter contenant une interface utilisateur similaire à la capture d’écran suivante :

          • Le widget TextField dans Flutter

      • Correction

          • import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

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

class _State extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Application 01 textField Flutter'),
        ),
        body: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              children: const [
                TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Utilisateur',
                  ),
                )
              ],
            )));
  }
}
      • App 02

        • Travail demandé

          • 01- Réaliser une application flutter contenant une interface utilisateur similaire à la capture d’écran suivante :

            • Le widget TextField dans Flutter

          • 02- Un clique à l’intérieur de l’une des zones de texte, permet d’afficher un clavier en bas de l’écran, l’étiquette va dans le coin supérieur gauche de la bordure et le texte d’indication affiché dans le champ. La capture d’écran ci-dessous l’explique plus clairement :

            • Le widget TextField dans Flutter

        • Correction

            • import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State {
  TextEditingController username = TextEditingController();
  TextEditingController password = TextEditingController();
  @override
  void initState() {
    username.text = ""; //innitail value of text field
    password.text = "";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Utiliser les TextField',
              style: TextStyle(color: Color.fromARGB(255, 7, 49, 233))),
          backgroundColor: const Color.fromARGB(255, 64, 249, 255),
        ),
        body: Container(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              TextField(
                  controller: username,
                  decoration: InputDecoration(
                    labelText: "Nom d'utilisateur",
                    prefixIcon: const Icon(Icons.people),
                    border: mes_bordures(),
                    enabledBorder: mes_bordures(),
                    focusedBorder: mes_focusborder(),
                  )),
              Container(height: 20),
              TextField(
                  controller: password,
                  decoration: InputDecoration(
                    prefixIcon: const Icon(Icons.lock),
                    labelText: "Mot de passe",
                    enabledBorder: mes_bordures(),
                    focusedBorder: mes_focusborder(),
                  )),
            ],
          ),
        ));
  }

  // ignore: non_constant_identifier_names
  OutlineInputBorder mes_bordures() {
    //return type is OutlineInputBorder
    return const OutlineInputBorder(
        //Outline border type for TextFeild
        borderRadius: BorderRadius.all(Radius.circular(10)),
        borderSide: BorderSide(
          color: Colors.redAccent,
          width: 3,
        ));
  }

  // ignore: non_constant_identifier_names
  OutlineInputBorder mes_focusborder() {
    return const OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        borderSide: BorderSide(
          color: Colors.greenAccent,
          width: 3,
        ));
  }

  //create a function like this so that you can use it wherever you want
}

Ces articles pourraient aussi vous intéresser

Architecture d’une application Flutter
27 mai, 2022

Qu’est-ce que Flutter ? Architecture d’une application Flutter Architecture d’une application Flutter Objectif Discuter de l’architecture du framework Flutter. Présentation Flutter a une architecture modulaire en couches. Cela vous permet d’écrire votre logique d’application une seule fois et d’avoir un comportement cohérent sur toutes les plates-formes, même si le code du moteur sous-jacent diffère selon la plate-forme. L’architecture en couches …

Qu’est-ce que Flutter ?
3 mai, 2022

Qu’est-ce que Flutter ? Architecture d’une application Flutter

Row et Column dans Flutter
21 février, 2022

Comment installer Flutter sous Windows Créez votre première application Flutter Row et Column dans Flutter Objectif Apprendre à organiser les widgets en lignes et en colonnes sur l’écran en Flutter Présentation Row et Column sont des widgets dans Flutter et la plupart du temps, chaque mise en page peut être décomposée en ligne et en colonne. La ligne et la …