06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

[the_ad_placement id="before-content"]
Maison › Battement › Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD

Concevoir un formulaire Flutter et un widget ListView

pour le fonctionnement CRUD
14 mai 2020 | Article flottant | 5 commentaires

Table des matières

→ Introduction

→ Commençons

→ Mettre à jour l'écran d'accueil

→ Comment concevoir un formulaire dans Flutter

→ Validation et soumission du formulaire

→ Afficher la liste des enregistrements dans le widget ListView



https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 1/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

Introduction
Dans ce didacticiel Flutter, nous allons créer une application Flutter pour concevoir un
formulaire et une liste d'enregistrements insérés à partir du formulaire. Ainsi, les données à
l'intérieur de l'application seront stockées dans l'objet d'état du widget. Dans les prochains
articles, nous inclurons l'API / base de données back-end connectée à cette application
Flutter.

J'espère que vous avez déjà configuré un développement Flutter. Comme condition
préalable à ce didacticiel, vous devez connaître les bases du développement d'applications
Flutter, pour cela, vous pouvez consulter le didacticiel précédent  ici .

J'ai créé cette application à partir du système d'exploitation Windows avec VS Code.

Commençons
Nous allons commencer par créer une nouvelle application Flutter, alors exécutez les
commandes suivantes à partir du dossier du projet.

Frapper Copie
flutter create App_Name
cd App_Name
code .

Remplacez  App_Name  par un nom significatif. Après avoir exécuté ci-dessus 3 lignes une par
une, une toute nouvelle application flutter sera créée et ouverte dans VS Code. Ouvrez
maintenant votre émulateur. Pour exécuter votre application Flutter, appuyez sur F5 .
L'application par défaut est une application de compteur avec un bouton flottant en bas.

Commençons à personnaliser l'application, comme vous le savez, le fichier lib/main.dart est

le point de départ. Tout d'abord, changeons  primaryColor  de thème Material et  title  de
l'App. Pour ce  MyApp  widget de mise à jour comme suit.

Dard Copie
const darkBlueColor = Color(0xff486579);

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Contact App',
theme: ThemeData(
primaryColor: darkBlueColor,
), 
home: MyHomePage(title: 'Contact List'),
);

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 2/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

}
}

nous avons défini la constante  darkBlueColor  avec une couleur personnalisée et défini la
couleur sur  primaryColor  la propriété. Par défaut, ce serait  primarySwatch  , mais cela ne
permet pas une couleur personnalisée.

Dans cette application, nous allons traiter les informations de contact des personnes
contenant des informations telles que le nom complet et le numéro de téléphone portable.
Donc, dans un premier temps, créons une classe de modèle.

lib/models/contact.dart

Dard Copie
class Contact {

Contact({this.id,this.name,this.mobile});

int id;
String name;
String mobile;
}

Dans cette  Contact  classe de modèle, nous avons trois propriétés avec un identifiant unique
avec un constructeur nommé.

Mettre à jour l'écran d'accueil

L'écran d'accueil de l'application est conçu avec  MyHomePage  un widget avec état. Alors
mettons à jour  _MyHomePageState  la classe avec ce qui suit.

Dard Copie
import 'package:ref_sqlite_crud/models/contact.dart';

class _MyHomePageState extends State<MyHomePage> {

Contact _contact= Contact();
List<Contact> _contacts = [];

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
backgroundColor: Colors.white,
title: Center(
child: Text(
widget.title,

style: TextStyle(color: darkBlueColor),
),
),
),

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 3/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[_form(), _list()],
),
),
);
}

_form() => Text('form goes here');

_list() => Text('list of contacts goes here');

Dans ce widget, nous avons deux propriétés d'état -  _contact  et  _contacts  .  _contact  est
utilisé pour stocker les valeurs des champs de formulaire et la liste des contacts sera
enregistrée dans la propriété state  _contacts  . Plus important encore, nous avons deux
fonctions -  _form()  et  _list() pour afficher respectivement le formulaire et une liste de
contacts insérés. Maintenant, l'application devrait ressembler à ceci.

Comment concevoir un formulaire dans Flutter

Le formulaire est un élément important dans toute application pour accepter les entrées de
l'utilisateur dans n'importe quelle application. Maintenant, pour concevoir un formulaire,
mettons à jour le _form() comme suit.

Dard Copie
class _MyHomePageState extends State<MyHomePage> {
//other state properties
final _formKey = GlobalKey<FormState>();

_form() => Container(

color: Colors.white,
padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
child: Form(
key: _formKey,

child: Column(
children: <Widget>[
TextFormField(

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 4/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

decoration: InputDecoration(labelText: 'Full Name'),

),
TextFormField(
decoration: InputDecoration(labelText: 'Mobile'),
),
Container(
margin: EdgeInsets.all(10.0),
child: RaisedButton(
onPressed: () {},
child: Text('Submit'),
color: darkBlueColor,
textColor: Colors.white,
),
),
],
),
),
);
}

Tout d'abord, vous pouvez voir la  _formKey  propriété avec d'autres propriétés d'état, qui est
initialisée en appelant  GlobalKey() la fonction. À l'intérieur  Form  du widget, le  _formKey  est
affecté à  key la propriété. Dans Flutter, une clé de widget nous permet d'identifier un widget
de manière unique. Vous pourrez le voir plus tard dans cette application.

Fondamentalement, à l'intérieur du formulaire, nous avons deux  TextFormField  widgets pour

les contrôles de nom complet et de saisie mobile. Enfin, nous avons un  RaisedButton  widget
pour soumettre le formulaire. Jusqu'à présent, notre formulaire ressemble à ceci.

Validation et soumission du formulaire

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 5/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

Avant de soumettre le formulaire, nous avons quelques règles de validation - le nom

complet et le champ de texte mobile ne doivent pas être vides et il doit y avoir au moins 10
caractères dans le champ de saisie mobile. Mettons donc à jour les widgets pour la
soumission et la validation du formulaire.

Dard Copie
...

TextFormField(
decoration: InputDecoration(labelText: 'Full Name'),
validator: (val) =>
(val.length == 0 ? 'This field is mandatory' : null),
onSaved: (val) => setState(() => _contact.name = val),
),
TextFormField(
controller: _ctrlMobile,
decoration: InputDecoration(labelText: 'Mobile'),
validator: (val) =>
val.length < 10 ? '10 characters required' : null,
onSaved: (val) => setState(() => _contact.mobile = val),
),
Container(
margin: EdgeInsets.all(10.0),
child: RaisedButton(
onPressed: () => _onSubmit(),
...
),
),
...

Pour le nom complet et le mobile, nous avons défini la validation avec  validator  la propriété
du widget. l'appel à validation se fera avant la soumission du formulaire. Maintenant, avec
ceux-ci  validator  , vous pouvez voir une autre fonction définie avec  onSaved  la propriété. il
enregistre simplement la valeur du champ de texte dans la propriété d'état du modèle
correspondante  _contact  . Enfin, définissons la fonction  _onSubmit()  , qui est déjà câblée
pour soumettre  onPressed  un événement de bouton.

Dard Copie
_onSubmit() async {
var form = _formKey.currentState;
if (form.validate()) {
form.save();
print('''
Full Name : ${_contact.name}
Mobile : ${_contact.mobile}
''');
_contacts.add(Contact(id:null,name:_contact.name,mobile:_contact.mobile));
form.reset();

}
}

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 6/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

Pour obtenir la référence du formulaire, nous avons stocké  _formKey.currentState la propriété

dans  form  la variable. Pour vérifier si le formulaire dans son ensemble est valide ou non,
nous avons appelé la fonction  validat()  . si la validation est réussie, il renvoie 
true  .otherwise  false  est renvoyé, les champs de texte correspondants seront mis en
surbrillance avec le message d'erreur correspondant.

lorsque  form.save()  la fonction est appelée, l'événement de champs de texte du formulaire 
onSave  sera déclenché et sa valeur de champ sera enregistrée dans  _contact  les propriétés
respectives. Le même  _contact  objet est ajouté à la liste  _contacts  . Pour réinitialiser le
formulaire, nous avons appelé  reset()  function.

Maintenant, si vous vous demandez pourquoi n'ajoutons-nous pas directement  _contact  un
objet dans  _contacts  la liste ? Si nous faisons cela, nous ajoutons en fait une référence d' 
_contact  objet dans la liste. par conséquent, lors du changement  _contact  d'objet, le même
changement sera reflété dans  ListView  le widget. nous avons donc créé une instance
distincte avec le constructeur nommé.

Afficher la liste des enregistrements dans le widget

ListView
Maintenant, mettons à jour  _list()  la fonction, afin que nous puissions parcourir 
_contacts  la liste à l'aide du  ListView  widget.

Dard Copie
_list() => Expanded(
child: Card(
margin: EdgeInsets.fromLTRB(20, 30, 20, 0),
child: Scrollbar(
child: ListView.builder(
padding: const EdgeInsets.all(8),
itemBuilder: (context, index) {
return Column(
children: <Widget>[
ListTile(
leading: Icon(
Icons.account_circle,
color: darkBlueColor,
size: 40.0,
),
title: Text(
_contacts[index].name.toUpperCase(),
style: TextStyle(
color: darkBlueColor, fontWeight: FontWeight.bold),
),
subtitle: Text(_contacts[index].mobile), 
onTap: () {},
),
Divider(
height: 5.0,

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 7/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

),
],
);
},
itemCount: _contacts.length,
),
),
),
);

Avec  itemBuilder()  la fonction ListView -, nous affichons  _contact les propriétés dans 
ListTile  le widget en parcourant  _contacts  la liste.

C'est donc tout à propos de ce tutoriel. Dans les prochains didacticiels, nous discuterons de
diverses API de base de données / back-end connectées à cette application flutter, en
implémentant des opérations CRUD complètes (insertion, mise à jour, suppression et
récupération).

5 réflexions sur "Concevoir le formulaire Flutter et le widget ListView pour

le fonctionnement CRUD"


https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 8/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

WILSON
28 NOVEMBRE 2020 À 00H40

Cuando sale el CRUD, de api mediante flutter

Répondre →

LOIIC GUESTA
28 SEPTEMBRE 2020 À 19H41

au niveau de la création du formulaire, ça me souligne _ctrlMobile

Répondre →

THORSTEN
6 SEPTEMBRE 2020 À 21H03

Très utile, merci pour cet exercice facile

Répondre →

KIRAN
22 JANVIER 2021 À 12H56

Merveilleux article. Merci.

Existe-t-il une option de mise à jour et de suppression pour la liste de contacts ?

Répondre →

SYLVAIN TAÏO
17 JUIN 2021 À 11H55

bien

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 9/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

Répondre →

Laissez un commentaire
Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués *

Écrivez ici..

Nom*

E-mail*

Site Internet

Poster un commentaire "

Messages recommandés
1. Construire un formulaire de réaction parfait avec crochet

Catégories ↬ 

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 10/11
06/07/2023 13:56 Concevoir un formulaire Flutter et un widget ListView pour le fonctionnement CRUD - CodAffection

Angulaire ASP.NET Core Réagir Battement Node.js C# Pile MOYENNE

serveur SQL

Copyright © 2023 CodAffection Maison Contactez-nous

https://www.codaffection.com/flutter-article/design-flutter-form-and-listview-widget-for-crud-operation/ 11/11