Le widget TextField dans Flutter
Le widget TextField dans Flutter
-
Objectif
- Apprendre à utiliser un widget TextField en flutter et ses propriétés en détail
-
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.-
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 . - Appeler la classe principale
MyApp
en utilisant la fonction void main run app. - Créer la classe de widget principale nommée
MyApp
qui s’étend avec le widget sans état. - Créer un widget
Scaffold
-> Widgetcenter
->Widgetcolumn
dans la zone de construction du widget dans la classe précédemment crée. - Créer un widget
Conteneur
puis placer-y le widgetTextField
. - Le widget TextField ne supportait pas directement la largeur et la hauteur.
- Ajouter un AppBar à l’exemple précédent
- Voyons le code source complet qui contient le widget TextField.
-
Applications
-
App 01
-
Travail demandé
- 01- Réaliser une application flutter contenant une interface utilisateur similaire à la capture d’écran suivante :
-
Correction
-
App 02
-
Travail demandé
- 01- Réaliser une application flutter contenant une interface utilisateur similaire à la capture d’écran suivante :
- 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 :
-
Correction
import 'package:flutter/material.dart';
Ex01
void main() {
runApp(const MyApp());
}
Ex02
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
.....
.....
}
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 []))));
}
}
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
Après sélection
Capture d’écran
Code à ajouter
home: Scaffold(
appBar: AppBar(
title: const Text('Application TextField'),
),
body: Center(
.........
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,
))
]))));
}
}
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',
),
)
],
)));
}
}
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
}