06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

[the_ad_placement id="before-content"]
Maison › Battement › Terminer les opérations SQLite CRUD dans Flutter

Terminer les opérations SQLite CRUD dans Flutter

1 juin 2020 | Article flottant | 9 commentaires

Table des matières

→ Introduction

→ Commençons
→ pourquoi mapper un objet ?

→ Premiers pas avec la base de données

→ Opérations SQLite CRUD

→ Câbler tous les événements

→ Modifier et supprimer l'opération 

→ Supprimer l'opération

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 1/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

Introduction
De nos jours, presque toutes les applications doivent avoir une sorte de stockage de
données. L'application sans collaboration avec d'autres utilisateurs utilisera la base de
données de stockage locale - SQLite. Dans ce tutoriel, nous allons couvrir toutes les
opérations CRUD dans Flutter avec SQLite.

La partie conception du projet déjà couverte dans le didacticiel précédent -  Design Flutter
Form et ListView Widget for CRUD Operation . Il comprend la conception du formulaire et la
liste des enregistrements insérés à partir du formulaire, où nous avons enregistré la liste des
enregistrements dans l'objet d'état du widget. Ainsi, dans ce didacticiel, nous pouvons nous
concentrer sur les opérations SQLite CRUD et enfin nous mettons à jour les événements
existants avec l'opération SQLite CRUD. L'application du tutoriel précédent ressemble à
ceci.

Commençons
Tout d'abord, ajoutons des dépendances pour ce projet, pour cette mise à jour du fichier
pubspec.yaml comme suit.

Aucun Copie
dependencies:
flutter:
sdk: flutter

sqflite: any
path_provider: any

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 2/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

De plus, nous avons ici deux packages sqflite  et  path_provider  . sqflite aide à travailler
avec la base de données SQLite. Pour trouver les emplacements couramment utilisés sur le
système de fichiers, nous utilisons le package path_provider.

Attention :  En ce qui concerne les fichiers yaml, l'indentation est très importante. Avant le
nom du package, nous avons besoin de 2 espaces et avant le nom de la version, il devrait y
avoir un espace. Au lieu de la version exacte que nous utilisons  'any'  , la dernière version
sera donc utilisée.

Maintenant, mettons à jour le modèle de contact - models/contact.dart .

modèles/contant.dart Copie
class Contact {

static const tblContact = 'contacts';

static const colId = 'id';
static const colName = 'name';
static const colMobile = 'mobile';

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

int id;
String name;
String mobile;

Contact.fromMap(Map<String, dynamic> map) {

id = map[colId];
name = map[colName];
mobile = map[colMobile];
}

Map<String, dynamic> toMap() {

var map = <String, dynamic>{colName: name, colMobile: mobile};
if (id != null) {
map[colId] = id;
}
return map;
}
}

Tout d'abord, vous pouvez voir quelques constances de chaîne avec le nom de la table et les
noms des colonnes. Dans cette application, nous traitons des informations de contact, y
compris le nom complet et le numéro de téléphone portable. Outre un constructeur normal,
nous avons un constructeur nommé  fromMap  pour initialiser une instance à partir d'un objet
de carte donné. Et avec  toMap la fonction, nous convertirons l'objet de contact en objet de
carte correspondant.

pourquoi mapper un objet ?

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 3/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

Dans la base de données SQLite, les enregistrements sont stockés sous la forme d'une
collection d'objets cartographiques. Au cas où vous ne le sauriez pas, map est
essentiellement une paire <key, value>. Par exemple -

modèles/contant.dart Copie
{
'Username':'tom',
'Password':'pass@123'
}

Donc, avant d'insérer un enregistrement dans le fichier de base de données SQLite, nous
devons convertir l'enregistrement en objet de carte correspondant. Lors de la récupération
des enregistrements de la base de données, il renvoie une collection d'objets
cartographiques.

Premiers pas avec la base de données

Pour gérer les opérations liées à la base de données, nous avons créé un nouveau fichier -
util/database_helper.dart.

Dard Copie
import 'dart:io';
import 'package:flutter_crud_form/models/contact.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DatabaseHelper {
static const _databaseName = 'ContactDatabase.db';
static const _databaseVersion = 1;

//singleton class
DatabaseHelper._();
static final DatabaseHelper instance = DatabaseHelper._();

Database _database;
Future<Database> get database async {
if (_database != null) return _database;
_database = await _initDatabase();
return _database;
}

_initDatabase() async {
Directory dataDirectory = await getApplicationDocumentsDirectory();
String dbPath = join(dataDirectory.path, _databaseName);
print(dbPath);
return await openDatabase(dbPath, 
version: _databaseVersion, onCreate: _onCreateDB);
}

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 4/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

Future _onCreateDB(Database db, int version) async {

//create tables
await db.execute('''
CREATE TABLE ${Contact.tblContact}(
${Contact.colId} INTEGER PRIMARY KEY AUTOINCREMENT,
${Contact.colName} TEXT NOT NULL,
${Contact.colMobile} TEXT NOT NULL
)
''');
}
}

Ici, nous avons une classe  DatabaseHelper  avec un constructeur nommé privé _() . ici le nom
de ce constructeur est  _  , oui c'est possible. Il existe une propriété statique finale 
instance  du type –  DatabaseHelper  , qui est initialisée avec  _()  le constructeur. En raison de
cette dernière propriété, il ne peut pas changer sa valeur après l'initialisation. Il s'agit donc
d'une classe singleton (ce qui signifie qu'une seule instance de la classe est créée dans
l'application). Il existe public getter-  database  , qui renvoie l'instance de la base de données.
Si  la fonction _database  n'est pas initialisée,  _initDatabase  elle sera appelée.

À l'intérieur de  _initDatabse()  ,  dataDirectory  est initialisé avec 

getApplicationDocumentsDirectory  la fonction, qui provient du  path_provider  package.
Fondamentalement, cette fonction renvoie l'emplacement où la base de données est
stockée. qui est différent pour le système d'exploitation Android et iOS. Mais c'est géré par
le  path_provider  package. Le chemin est joint au nom de la base de données comme chemin
de notre fichier de base de données. Pour se connecter et retourner la  openDatabase fonction
de référence de la base de données est appelée. La propriété version est juste pour indiquer
la version de la base de données et non la version réelle de SQLite. La version est comparée
dans le code source avec la version dans la base de données physique réelle. S'il y a une
différence. nous pouvons opter pour le processus de mise à niveau ou de rétrogradation.
nous n'allons pas en discuter dans ce tutoriel.

S'il n'y a pas de base de données avec le chemin db donné, nous devons créer le schéma de
base de données avec toutes les tables. C'est ce que nous avons fait avec onCreate  property
function  _onCreateDB()  . Dans la fonction, nous créons une table de contact.

Opérations SQLite CRUD

Ajoutons maintenant ces fonctions à la classe DatabaseHelper pour les opérations CRUD -
insérer, mettre à jour, supprimer et récupérer.

Dard Copie
//contact - insert 
Future<int> insertContact(Contact contact) async {
Database db = await database;
return await db.insert(Contact.tblContact, contact.toMap());

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 5/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

}
//contact - update
Future<int> updateContact(Contact contact) async {
Database db = await database;
return await db.update(Contact.tblContact, contact.toMap(),
where: '${Contact.colId}=?', whereArgs: [contact.id]);
}
//contact - delete
Future<int> deleteContact(int id) async {
Database db = await database;
return await db.delete(Contact.tblContact,
where: '${Contact.colId}=?', whereArgs: [id]);
}
//contact - retrieve all
Future<List<Contact>> fetchContacts() async {
Database db = await database;
List<Map> contacts = await db.query(Contact.tblContact);
return contacts.length == 0
? []
: contacts.map((x) => Contact.fromMap(x)).toList();
}

Avec le package sqflite, il existe deux types de fonction, une avec une requête brute et une
fonction directe avec tous les paramètres requis sans requête. Par exemple, pour l'opération
d'insertion, nous avons appelé fonction directe  insert()  . au lieu de cela, vous pouvez
également appeler  rawInsert()  avec une requête d'insertion brute telle que "insérer dans les
valeurs de contact…". Avant d'insérer l'enregistrement, nous devons convertir l'objet de
contact en objet de carte correspondant.

Pour les opérations de mise à jour et de suppression,  les paramètres where  et 
whereArgs  sont utilisés pour passer une opération de filtrage supplémentaire. Pour récupérer
tous les enregistrements de la table des contacts, nous avons appelé la fonction  query()  .
La fonction renvoie une liste d'objets cartographiques. Enfin, nous avons converti le 
List<Map> en  List<Contact>  .

Câbler tous les événements

Jusqu'à présent, nous n'avons touché qu'aux   fichiers Contact  de modèle et  de classe.
DatabaseHelper Utilisons maintenant ces fonctions dans les événements de widget. Comme je
l'ai mentionné précédemment, l'interface utilisateur de cette application est discutée dans
l'article précédent  ici . Voyons d'abord comment récupérer tous les enregistrements de
contact à partir de la table des contacts.

Dard Copie
import 'package:flutter_crud_form/util/database_helper.dart'; 

class _MyHomePageState extends State<MyHomePage> {

...
DatabaseHelper _dbHelper;

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 6/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

@override
void initState() {
super.initState();
_dbHelper = DatabaseHelper.instance;
_refreshContactList();
}

_refreshContactList() async {
List<Contact> x = await _dbHelper.fetchContacts();
setState(() {
_contacts = x;
});
}
}

Nous avons importé la  DatabaseHelper  classe en haut. Dans  MyHomePage  le widget, nous
avons remplacé  initState  la méthode, elle sera appelée une fois lorsque les objets d'état du
widget seront créés. La fonction peut être utilisée pour effectuer l'initialisation des
propriétés/objets dépendants. Après avoir appelé la méthode parent –  super.initState()  ​​, 
_dbHelper l'instance est initialisée avec  instance  la propriété finale. Après cela, pour
récupérer tous les enregistrements de la table de contact, nous avons appelé la fonction 
_refreshContactList()  . À l'intérieur de la fonction que nous avons appelée la fonction, 
fetchContacts()  est appelée pour renvoyer la liste des enregistrements de contact et elle est
affectée à  _contacts  l'objet d'état.

Attention :  Si vous exécutez déjà votre application, arrêtez et relancez l'application. car la 
initState()  méthode ne sera pas appelée avec Hot-Reload.

Maintenant, mettons à jour le formulaire submit event function  _onSubmit()  . Auparavant,

nous ajoutions  _contacts directement les informations de contact à la liste. Au lieu de cela,
nous avons appelé la  insertContact()  méthode pour insérer l'enregistrement dans SQLite
DB.

Dard Copie
_onSubmit() async {
var form = _formKey.currentState;
if (form.validate()) {
form.save();
await _dbHelper.insertContact(_contact);
form.reset();
await _refreshContactList();
}
}

Modifier et supprimer l'opération



https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 7/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

Tout d'abord, implémentons l'opération d'édition/mise à jour. Lorsque l'utilisateur appuie sur 
ListTile  le widget, les informations de contact correspondantes doivent être renseignées
dans le champ de texte respectif. Ensuite, l'utilisateur peut apporter les modifications
requises et suivre la soumission du formulaire. L'événement peut être mis en œuvre avec 
_showForEdit()  la fonction ci-dessous.

Dard Copie
class _MyHomePageState extends State {

final _ctrlName = TextEditingController();

final _ctrlMobile = TextEditingController();
...

ListTile(
...,
onTap: () {
_showForEdit(index);
},
)

_form => Container(

TextFormField(
controller: _ctrlName,
...
),
TextFormField(
controller: _ctrlName,
...
),
...
)

_showForEdit(index) {
setState(() {
_contact = _contacts[index];
_ctrlName.text = _contacts[index].name;
_ctrlMobile.text = _contacts[index].mobile;
});
}
}

Initialement, vous pouviez voir deux  TextEditionController  ,  _ctrlName et  _ctrlMobile  . Ces
propriétés sont affectées à la propriété de contrôleur de champ de texte respective. Alors
seulement nous pouvons changer la valeur du champ à l'intérieur de l'événement
tap.  _showForEdit()  La fonction est câblée à l'  ListTile  événement – ​onTap. Dans la fonction,
nous modifions  _contact les valeurs d'objet et de champ de texte avec les détails de
l'enregistrement sélectionné.

Effectuons maintenant l'opération de mise à jour dans l'événement de soumission du
formulaire. où nous avons déjà implémenté l'opération d'insertion. puisque nous avons mis
à jour  _contact  l'objet à l'intérieur  _showForEdit()  de la fonction. Ici, nous pouvons vérifier l' 
https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 8/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

id  enregistrement. sur cette base, nous décidons si nous avons une opération d'insertion ou
de mise à jour.

Dard Copie
_onSubmit() async {
...
if (_contact.id == null)
await _dbHelper.insertContact(_contact);
else
await _dbHelper.updateContact(_contact);
_resetForm();
...
}

Étant donné que nous modifions la valeur du champ de texte via  TextEditingController  ,
nous devons effacer le contrôleur séparément après l'opération de réinitialisation du
formulaire. une nouvelle fonction  _resetForm()  est donc définie pour l'opération de
réinitialisation. avec la procédure habituelle pour une opération de réinitialisation de
formulaire, nous avons défini la  id valeur null. le formulaire est donc effacé pour une
opération d'insertion.

Dard Copie
_resetForm() {
setState(() {
_formKey.currentState.reset();
_ctrlName.clear();
_ctrlMobile.clear();
_contact.id = null;
});
}

Supprimer l'opération
Pour l'opération de suppression, nous devons ajouter un bouton de suppression à l'intérieur
de  ListTilewidget .

Dard Copie
ListTile(
...
trailing: IconButton(
icon: Icon(Icons.delete_sweep, color: darkBlueColor),
onPressed: () async {
await _dbHelper.deleteContact(_contacts[index].id);
_resetForm();
_refreshContactList();
}),
...

)

Dans l'  onPressed  événement, nous avons supprimé l'enregistrement correspondant.

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 9/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

C'est ça les gars. J'espère que vous avez trouvé cela utile.

9 réflexions sur « Compléter les opérations SQLite CRUD dans Flutter »

OSCAR
21 MAI 2022 À 20H16

hola cómo puedo agregar otra tabla a esa base de dato y realizar los mismo crud

Répondre →

IRSHAD
24 OCTOBRE 2021 À 23H02

Cela m'a été super utile. J'ai dû en modifier certaines parties pour une sécurité nulle,
mais l'explication et l'organisation étaient excellentes.

Répondre →

DIVVYANSHU
1 NOVEMBRE 2021 À 12 H 34

Qu'avez-vous modifié s'il vous plaît aidez-moi

Répondre →

JEAN BABA
21 JUIN 2021 À 16H47

Merci 
Répondre →

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 10/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

SYLVAIN TAÏO
21 JUIN 2021 À 16H44

Cool

Répondre →

JEAN BABA
21 JUIN 2021 À 16H46

Merci

Répondre →

SYLVAIN TAÏO
17 JUIN 2021 À 11H50

Super

Répondre →

SHRIKANT
18 MAI 2021 À 20H09

Hé merci pour le tuto. Pouvez-vous partager les fichiers de code source ou un lien
Github ?

Répondre →

MAHIMA JAÏN
15 MAI 2021 À 14H03


Comment ajouter la clé étrangère "${Contact.colMobile} TEXT NOT NULL" dans ce
format ?

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 11/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - 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 "

Catégories ↬

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

serveur SQL

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 12/13
06/07/2023 13:57 Terminer les opérations SQLite CRUD dans Flutter - CodAffection

Copyright © 2023 CodAffection Maison Contactez-nous

https://www.codaffection.com/flutter-article/complete-sqlite-crud-operations-in-flutter/ 13/13