Utiliser InputFormatter dans Flutter

Utiliser InputFormatter dans Flutter

1. Objectif

• Être capable d’utiliser InputFormatter sur Flutter TextField
• Apprendrez à formater des données dans un TextFormField et un TextField.

2. Présentation

• L’utilisation de la validation dans votre champ de texte pour restreindre certains caractères ou chiffres est indispensable pour réduire les erreurs de l’utilisateur.
• L’extraction de données formatées valides est essentielle lorsque votre application nécessite des informations de carte de crédit, des numéros de téléphone, des codes postaux, etc.
• Lorsque le formulaire contient plusieurs widgets TextField , chaque TextField n’accepte qu’un certain type de valeurs dans un certain format. Pour que TextField n’accepte que certains types de caractère la propriété InputFormatter est utilisée.
• Flutter peut prendre des données formatées valides à l’aide de la classe TextInputFormatter, qui nous fournit diverses contraintes.
• Il peut également être éventuellement saisi dans un TextFormField ou TextField en tant que validateur et corrige le format du texte lors de la modification du texte.





3. Utiliser inputFormatter

• Le paramètre inputFormatter dans TextFormField ou TextField permet aux développeurs de passer une liste de classes de type TextInputFormatter pour définir le comportement du champ.
• TextInputFormatter traduit la valeur du champ en texte et le texte en valeur du champ.

• Les types de TextInputFormatter

• Le framework Flutter nous fournit deux TextInputFormatter intégrés :
• FilteringTextInputFormatter: Crée un outil de formatage qui autorise ou bloque les caractères qui correspondent au modèle.
• LengthLimitingTextInputFormatter: Permet d’insérer uniquement un certain nombre de caractères.





4. Exemples

• interdire \et/
• Pour cela nous allons utiliser le constructeur FilteringTextInputFormatter.deny
Solution

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.deny(RegExp(r'[/\\]')),
  ],
)

5. Application

• App01



• Nous avons un champ de texte qui permet à l’utilisateur d’entrer son prénom. Seules les lettres de l’alphabet sont autorisées (minuscules et majuscules). Aucun chiffre, symbole, emoji n’est accepté, qu’il soit saisi au clavier ou copié/collé ailleurs.
• La capture d’écran suivante représente l’interface utilisateur proposée par l’application.
Solution

import 'package:flutter/material.dart';
import 'package:flutter/services.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(
        // Supprimer la bannière de débogage
        debugShowCheckedModeBanner: false,
        title: 'apcpedagogie.com',
        home: HomePage());
  }
}

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

  @override
  State createState() => _HomePageState();
}
class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('apcpedagogie.com'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(20),
            child: TextField(
              inputFormatters: [
                // n'accepte que les lettres de a à z
                FilteringTextInputFormatter(RegExp(r'[a-zA-Z]'), allow: true)
              ],
              decoration: InputDecoration(
                  labelText: 'Surnom',
                  helperText: 'N\'accepte que les lettres de a à z',
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20))),
            ),
          ),
        ],
      ),
    );
  }
}

• App02



• Disons que nous avons une application sociale où les utilisateurs peuvent faire des commentaires.
• Parce que nous ne voulons pas que des personnes toxiques disent des mots offensants sur notre plateforme, nous allons définir une liste de mots interdits.
• Lorsqu’un utilisateur tape un mot qui existe dans la liste noire, il sera remplacé par “***“.
• Par exemple, nous empêcherons les utilisateurs d’écrient : “imbécile”, “âne”, “idiot”, “mulet” de s’afficher. Cependant, vous pouvez ajouter autant de mots que vous le souhaitez.
Solution

...Padding(
            padding: const EdgeInsets.all(20),
            child: TextField(
              inputFormatters: [
                // Eveerything is allowed except banned words
                FilteringTextInputFormatter.deny(
                    RegExp(r'(imbécile|âne|idiot|mulet)', caseSensitive: false),
                    replacementString: '***')
              ],
              decoration: InputDecoration(
                  labelText: 'Laisser un commentaire',
                  helperText:
                      'S\'il vous plaît soyez poli et amical lorsque vous commentez',
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20))),
            ),
          ),...






---

Cours Flutter