Créer une application CRUD avec SQLite et Flutter

Créer une application CRUD avec SQLite et Flutter

1. Introduction

• Dans ce tutoriel, nous allons créer une application Flutter qui gère les informations des étudiants en utilisant une base de données SQLite. Nous allons appliquer le modèle MVVM (Model-View-ViewModel) pour organiser le code et utiliser ChangeNotifier pour gérer l’état des données et notifier la vue des modifications.
• Prérequis
• Flutter installé sur votre machine.
• Un éditeur de code comme Visual Studio Code ou Android Studio.
• Une connaissance de base en Flutter, en particulier sur la gestion des états avec ChangeNotifier et la gestion des bases de données SQLite.

2. Structure du projet (MVVM)

• Structure du projet (MVVM)
• L’architecture MVVM est divisée en trois couches principales :
• Model : Représente les données de l’application et la logique métier.
• View : Affiche l’interface utilisateur et réagit aux événements de l’utilisateur.
• ViewModel : Sert d’intermédiaire entre le modèle et la vue, gère la logique d’affichage et l’état.
• Voici la structure recommandée pour ce projet Flutter :
etudiant_app/
│
├── lib/
│ ├── models/ # Contient les classes de modèles (data).
│ │ └── etudiant.dart # Modèle représentant un étudiant.
│ ├── database/ # Contient la logique de la base de données.
│ │ └── database_helper.dart # Fournit des méthodes pour interagir avec SQLite.
│ ├── viewmodels/ # Contient les classes ViewModel.
│ │ └── etudiant_view_model.dart # Gère l’état des données des étudiants.
│ ├── views/ # Contient les vues (UI).
│ │ ├── etudiant_list_screen.dart # Liste des étudiants.
│ │ ├── add_etudiant_screen.dart # Formulaire pour ajouter un étudiant.
│ │ └── edit_etudiant_screen.dart # Formulaire pour modifier un étudiant.
│ └── main.dart # Point d’entrée de l’application.
└── pubspec.yaml # Dépendances du projet.

3. Etapes de création

1. Étape 1 : Créer un nouveau projet Flutter

• Commencez par créer un nouveau projet Flutter avec la commande suivante :flutter create etudiant_app
• Accédez ensuite au répertoire du projet :cd etudiant_app

2. Étape 2 : Ajouter les dépendances nécessaires

3. Ouvrez le fichier pubspec.yaml et ajoutez les dépendances pour SQLite et pour la gestion de l’état avec provider (ChangeNotifier).
dependencies:
flutter:
sdk: flutter
provider: ^6.0.3
sqflite: ^2.4.1
path: ^1.9.0
4. Puis exécutez la commande suivante pour installer les packages :flutter pub get

5. Étape 3 : Créer le modèle Etudiant

• Le modèle Etudiant représentera les données d’un étudiant dans notre application. Créez un fichier etudiant.dart dans le dossier lib/models/ :



6. Étape 4 : Créer la classe DatabaseHelper

• La classe DatabaseHelper gère la connexion à SQLite et fournit des méthodes pour effectuer des opérations CRUD. Créez un fichier database_helper.dart dans le dossier lib/database/ :



7. Étape 5 : Créer le ViewModel avec ChangeNotifier

• Nous allons utiliser un ViewModel pour gérer les opérations sur les étudiants et notifier la vue des changements de données. Créez un fichier etudiant_view_model.dart dans le dossier lib/viewmodels/ :



• Étape 6 : Créer les vues (UI)

• Écran de liste des étudiants
• Dans le fichier etudiant_list_screen.dart, créez un écran qui affiche la liste des étudiants.



• Écran d’ajout et de modification
• Le fichier add_etudiant_screen.dart et edit_etudiant_screen.dart contiendront des formulaires pour ajouter ou modifier un étudiant. Ils utiliseront TextEditingController pour gérer les entrées de texte et appeleront le ViewModel pour ajouter ou mettre à jour les étudiants.

Ajout

import 'package:flutter/material.dart';
import '../database/database_helper.dart';
import '../models/etudiant.dart';

class AddEtudiantScreen extends StatelessWidget {
  final TextEditingController prenomController = TextEditingController();
  final TextEditingController nomController = TextEditingController();
  final TextEditingController emailController = TextEditingController();
  final TextEditingController dateNaissanceController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Ajouter un Étudiant')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(controller: prenomController, decoration: const InputDecoration(labelText: 'Prénom')),
            TextField(controller: nomController, decoration: const InputDecoration(labelText: 'Nom')),
            TextField(controller: dateNaissanceController, decoration: const InputDecoration(labelText: 'Date de Naissance')),
            TextField(controller: emailController, decoration: const InputDecoration(labelText: 'Email')),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                await DatabaseHelper.instance.addEtudiant(Etudiant(
                  prenom: prenomController.text,
                  nom: nomController.text,
                  email: emailController.text,
                  dateNaissance: dateNaissanceController.text,
                ));
                Navigator.pop(context);
              },
              child: const Text('Ajouter'),
            ),
          ],
        ),
      ),
    );
  }
}

Modification

import 'package:flutter/material.dart';
import '../database/database_helper.dart';
import '../models/etudiant.dart';

class EditEtudiantScreen extends StatefulWidget {
  final Etudiant etudiant;

  const EditEtudiantScreen({Key? key, required this.etudiant}) : super(key: key);

  @override
  _EditEtudiantScreenState createState() => _EditEtudiantScreenState();
}

class _EditEtudiantScreenState extends State {
  late TextEditingController _prenomController;
  late TextEditingController _nomController;
  late TextEditingController _dateNaissanceController;
  late TextEditingController _emailController;

  @override
  void initState() {
    super.initState();
    // Initialiser les contrôleurs avec les données existantes
    _prenomController = TextEditingController(text: widget.etudiant.prenom);
    _nomController = TextEditingController(text: widget.etudiant.nom);
    _dateNaissanceController =
        TextEditingController(text: widget.etudiant.dateNaissance);
    _emailController = TextEditingController(text: widget.etudiant.email);
  }

  @override
  void dispose() {
    // Nettoyer les contrôleurs
    _prenomController.dispose();
    _nomController.dispose();
    _dateNaissanceController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  Future _updateEtudiant() async {
    // Créer un nouvel objet étudiant avec les données mises à jour
    Etudiant updatedEtudiant = Etudiant(
      id: widget.etudiant.id,
      prenom: _prenomController.text,
      nom: _nomController.text,
      dateNaissance: _dateNaissanceController.text,
      email: _emailController.text,
    );

    // Mettre à jour dans la base de données
    await DatabaseHelper.instance.updateEtudiant(updatedEtudiant);

    // Retourner à l'écran précédent
    Navigator.pop(context, true); // Indique que l'opération est terminée
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Modifier un Étudiant')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _prenomController,
              decoration: const InputDecoration(labelText: 'Prénom'),
            ),
            TextField(
              controller: _nomController,
              decoration: const InputDecoration(labelText: 'Nom'),
            ),
            TextField(
              controller: _dateNaissanceController,
              decoration: const InputDecoration(labelText: 'Date de Naissance'),
            ),
            TextField(
              controller: _emailController,
              decoration: const InputDecoration(labelText: 'Email'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _updateEtudiant,
              child: const Text('Enregistrer les modifications'),
            ),
          ],
        ),
      ),
    );
  }
}

4. Conclusion

• Vous avez maintenant une application Flutter fonctionnelle qui permet de gérer les étudiants avec SQLite en utilisant MVVM et ChangeNotifier pour gérer l’état. Vous pouvez étendre cette application en ajoutant des fonctionnalités comme la validation des formulaires, la recherche et le filtrage des étudiants, etc.