Ajouter un compteur de caractères à un TextField dans Flutter
Ajouter un compteur de caractères à un TextField dans Flutter
-
Objectif
- Apprendre à ajouter un compteur de caractères personnalisé à un TextField
-
Présentation
- Nous afficherons le nombre de caractères saisis (y compris les espaces entre les mots) à l’aide de la propriété counterText de la classe InputDecoration.
- Le texte du compteur s’affichera en bas à droite du champ de texte. Vous pouvez styliser cette chose avec l’option counterStyle.
-
La propriété
counterText - La propriété counterText de la classe ‘InputInputDecoration‘ dans Flutter est utilisée pour personnaliser le texte affiché sous le champ de texte pour indiquer le nombre de caractères restants. Elle peut être définie en utilisant une chaîne de caractères statiques ou une expression de chaîne interpolée qui affiche une valeur dynamique, telle que le nombre de caractères restants.
- Lorsque vous utilisez la propriété ‘maxcounterText.
- Voici un exemple d’utilisation de la propriété counterText pour afficher le nombre de caractères restants sur un champ de texte:
- Dans cet exemple, la propriété counterText est définie en utilisant une expression de chaîne interpolée pour afficher la longueur actuelle du texte entré dans le champ de texte et le nombre maximal de caractères autorisés, ainsi qu’un message indiquant le nombre de caractères restants.
- Pour mettre à jour le compteur lorsque l’utilisateur saisit ou supprime un caractère, nous devrons appeler setState() chaque fois que la fonction onChanged est appelée,
- Exemple complet
-
Aperçu
- Dans cet exemple, nous allons créer une application simple contenant un champ de texte. Le nombre de caractères saisis dans le champ de texte change dès que l’utilisateur saisit quelque chose.
-
Le code
Code
TextField(
maxLength: 100,
decoration: InputDecoration(
counterText: '$_currentLength/100 caractères restants',
),
onChanged: (value) {
setState(() {
_currentLength = value.length;
});
},
),
Description
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("Compter charactères"),
),
body: CompterChar(),
),
);
}
}
class CompterChar extends StatefulWidget {
@override
_CompterCharState createState() => _CompterCharState();
}
class _CompterCharState extends State {
String _enteredText = '';
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: const EdgeInsets.all(32.0),
child: Column(
children: [
TextField(
onChanged: (String value) {
setState(() {
_enteredText = value;
});
},
decoration: InputDecoration(
prefixIcon: const Icon(Icons.send),
hintText: 'Hint Text',
helperText: 'Saisir un texte',
counterText: '${_enteredText.length.toString()} caractère(s)',
border: const OutlineInputBorder(),
),
),
],
),
),
);
}
} 
