InputDecoration pour TextField et TextFormField
Sommaire
- 1- Objectif
- 2- Décoration
- 2.1- Pas de décoration
- 2.2- Icon
- 2.2.1- Icon
- 2.2.2- Prefix icon
- 2.2.3- Suffix icon
- 2.3- Prefix
- 2.3.1- Prefix
- 2.3.2- Prefix text
- 2.4- Hint text
- 2.5- Suffix text
- 2.6- Label text
- 2.6.1- Label text
- 2.6.2- Floating label behavior: Auto
- 2.6.3- Floating label behavior: Always
- 2.6.4- Floating label behavior: Never
- 2.7- errorText
- 2.8- Helper text
- 2.9- Counter
- 2.10- Counter text
- 2.11- Définissez le texte de l'étiquette et de l'indice sur le widget TextFiled :
- 3- Style
- 3.1.1- Couleur du texte
- 3.1.2- Couleur d'arrière plan
- 3.1.3- Hover color
- 4- Application
- 4.1- App01
- 4.2- App02
- 4.2.1- Cours Flutter
InputDecoration pour TextField et TextFormField
-
Objectif
- Être capable d’utiliser le texte d’indication et d’étiquette sur le widget TextField
-
Décoration
-
Pas de décoration
-
Icon
-
Icon
-
Prefix icon
-
Suffix icon
-
Prefix
-
Prefix
-
Prefix text
-
Hint text
-
Suffix text
-
Label text
-
Label text
-
Floating label behavior: Auto
-
Floating label behavior: Always
-
Floating label behavior: Never
-
errorText
-
Helper text
-
Counter
-
Counter text
-
Définissez le texte de l’étiquette et de l’indice sur le widget TextFiled :
-
Style
-
Couleur du texte
- L’exemple ci-dessous montre
hintStyle
, mais il fonctionne de la même manière pour définir unTextStyle
pourlabelStyle
,counterStyle
,errorStyle
,prefixStyle
,suffixStyle
ethelperStyle
. -
Couleur d’arrière plan
-
Hover color
-
Application
-
App01
- Réaliser une application flutter simple basée sur l’image ci-dessous
-
App02
- Réaliser une application flutter simple basée sur l’image ci-dessous
const TextField(),
TextField(
decoration: const InputDecoration(
icon: Icon(Icons.favorite) //label style
),
),
TextField(
decoration: const InputDecoration(
prefixIcon: Icon(Icons.favorite) //label style
),
),
TextField(
suffixIcon: const InputDecoration(
prefixIcon: Icon(Icons.favorite) //label style
),
),
TextField(
decoration: InputDecoration(
prefix: Container(
width: 30,height: 10,color: Colors.blueAccent,)),
),
TextField(
decoration: InputDecoration(
prefixText: 'Utilisateur: '
),
TextField(
decoration: InputDecoration(
hintText: "Entrer votre Email",
),
TextField(
decoration: InputDecoration(
suffixText: 'Email',
),
TextField(
decoration: InputDecoration(
labelText: "Nom d'utilisateur", //babel text
),
TextField(
decoration: InputDecoration(
labelText: "Nom d'utilisateur",
floatingLabelBehavior: FloatingLabelBehavior.auto,
),
TextField(
decoration: InputDecoration(
labelText: "Nom d'utilisateur",
floatingLabelBehavior: FloatingLabelBehavior.always,
),
TextField(
decoration: InputDecoration(
labelText: "Nom d'utilisateur",
floatingLabelBehavior: FloatingLabelBehavior.never,
),
TextField(
decoration: InputDecoration(
errorText: "Nom d'utilisateur",
),
TextField(
decoration: InputDecoration(
helperText: 'Nom d'utilisateur',
),
TextField(
decoration: InputDecoration(
counter: Container(width: 30, height: 10, color: Colors.blueAccent,),
),
TextField(
decoration: InputDecoration(
counterText:'Nom d'utilisateur',
),
TextField(
decoration: InputDecoration(
labelText: "Username", //babel text
hintText: "Entrer votre Email", //hint text
prefixIcon: Icon(Icons.people), //prefix iocn
hintStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), //hint text style
labelStyle: TextStyle(fontSize: 13, color: Colors.redAccent), //label style
)
)
TextField(
decoration: InputDecoration(
hintText: "Entrer votre Email",
hintStyle: TextStyle(color: Colors.blueAccent),
),
TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.blue.shade100,
),
TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.blue.shade100,
border: OutlineInputBorder(),
),
Travail demandé
Solution
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatefulWidget {
const Home({super.key});
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State {
TextEditingController username = TextEditingController();
TextEditingController password = TextEditingController();
@override
void initState() {
username.text = ""; //initail value of text field
password.text = "";
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Hint et Label d'un TextField"),
backgroundColor: const Color.fromARGB(255, 67, 64, 255),
),
body: Container(
padding: const EdgeInsets.all(20),
child: Column(
children: [
TextField(
controller: username,
decoration: const InputDecoration(
labelText: "Nom d'utilisateur", //babel text
hintText: "Entrer votre Email", //hint text
prefixIcon: Icon(Icons.people), //prefix iocn
hintStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold), //hint text style
labelStyle: TextStyle(
fontSize: 13, color: Colors.blueAccent), //label style
),
),
Container(height: 20), //space between text field
TextField(
controller: password,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "Mot de passe",
hintText: "Saisir votre mot de passe",
hintStyle:
TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
labelStyle:
TextStyle(fontSize: 13, color: Colors.deepPurpleAccent),
)),
],
),
));
}
}
Travail demandé
Solution
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatefulWidget {
const Home({super.key});
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State {
TextEditingController username = TextEditingController();
TextEditingController password = TextEditingController();
@override
void initState() {
username.text = ""; //initail value of text field
password.text = "";
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Hint et Label d'un TextField"),
backgroundColor: const Color.fromARGB(255, 67, 64, 255),
),
body: Container(
padding: const EdgeInsets.all(20),
child: Column(
children: [
TextField(
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(40),
filled: true,
fillColor: Colors.blue.shade100,
border: const OutlineInputBorder(),
labelText: 'label',
labelStyle: const TextStyle(color: Colors.redAccent),
hintText: 'hint',
hintStyle: const TextStyle(color: Colors.blueAccent),
helperText: 'help',
helperStyle: const TextStyle(color: Colors.greenAccent),
counterText: 'counter',
counterStyle: const TextStyle(color: Colors.purpleAccent),
icon: const Icon(Icons.star),
prefixIcon: const Icon(Icons.favorite),
suffixIcon: const Icon(Icons.park),
),
),
Container(height: 20), //space between text field
TextField(
controller: password,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.lock),
labelText: "Mot de passe",
hintText: "Saisir votre mot de passe",
hintStyle:
TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
labelStyle:
TextStyle(fontSize: 13, color: Colors.deepPurpleAccent),
)),
],
),
));
}
}