Développement d’un Carnet de Note Simple en Flutter
Développement d’un Carnet de Note Simple en Flutter
-
Objectifs
- Acquérir une compréhension approfondie de l’utilisation des TextField dans Flutter.
- Implémenter des fonctionnalités de base de manipulation de texte.
- Explorer la gestion de l’état dans une application Flutter.
-
Description du projet
- Développer une application simple de Carnet de Notes où les utilisateurs peuvent ajouter, modifier et supprimer des notes textuelles.
-
Fonctionnalités Requises
- Page d’Accueil :
- Affiche la liste des notes actuelles.
- Chaque note doit avoir un aperçu du texte avec une limite de caractères visible.
- Ajout de Note :
- Bouton pour ajouter une nouvelle note.
- Lorsqu’on appuie sur le bouton, une nouvelle page s’ouvre avec un TextField pour saisir le contenu de la note.
- Un bouton pour sauvegarder la note.
- Modification de Note :
- En tapant sur une note existante, une nouvelle page s’ouvre avec le contenu de la note affiché dans un TextField.
- Permet la modification du texte et la sauvegarde de la note mise à jour.
- Suppression de Note :
- Option pour supprimer une note existante depuis la page d’accueil.
-
Étapes Suggérées :
- Création du Projet Flutter :
- Commencez par créer un nouveau projet Flutter.
- Conception de l’Interface Utilisateur :
- Utilisez des widgets tels que ListView, TextField, et des boutons pour créer une interface utilisateur intuitive.
- Gestion de l’État :
- Utilisez le widget StatefulWidget pour gérer l’état des notes, y compris l’ajout, la modification et la suppression.
- Implémentation du TextField :
- Utilisez le widget TextField pour permettre la saisie du texte lors de l’ajout ou de la modification d’une note.
- Navigation entre les Pages :
- Utilisez le widget Navigator pour permettre la navigation entre la page d’accueil, la page d’ajout de note et la page de modification de note.
- Sauvegarde des Données :
- Utilisez une structure de données appropriée (par exemple, une liste de notes) pour stocker les notes.
- Assurez-vous que les données sont sauvegardées entre les différentes pages.
- Suppression de Note :
- Ajoutez une fonctionnalité pour supprimer une note de la liste.
- Tests et Débogage :
- Testez votre application pour vous assurer que l’ajout, la modification et la suppression de notes fonctionnent correctement.
- Personnalisation (Facultatif) :
- Ajoutez des fonctionnalités supplémentaires telles que la possibilité de définir des catégories pour les notes, des couleurs, etc.
-
Bonus (Facultatif)
- Recherche de Notes :
- Ajoutez une fonctionnalité de recherche qui permet aux utilisateurs de rechercher des notes spécifiques par mot-clé ou contenu.
- Filtrage par Catégorie :
- Permettez aux utilisateurs de définir des catégories pour leurs notes et ajoutez une fonction de filtrage par catégorie.
- Mode Sombre :
- Implémentez un mode sombre pour l’interface utilisateur, permettant aux utilisateurs de basculer entre un thème clair et sombre.
- Support pour Images :
- Permettez aux utilisateurs d’ajouter des images à leurs notes en plus du texte.
- Statistiques de l’Utilisateur :
- Affichez des statistiques sur l’utilisation, comme le nombre total de notes, la moyenne de mots par note, etc.
- Synchronisation Cloud :
- Intégrez une fonctionnalité de synchronisation avec un service cloud pour sauvegarder les notes de l’utilisateur.
- Épinglage de Notes :
- Ajoutez une fonctionnalité qui permet aux utilisateurs d’épingler certaines notes en haut de la liste.
- Animations Améliorées :
- Améliorez les animations lors de la transition entre les pages ou lors de l’ajout/suppression de notes.
- Widgets Réutilisables :
- Organisez votre code en créant des widgets réutilisables pour les éléments communs, tels que les boutons, les cartes de note, etc.
- Mode Paysage :
- Assurez-vous que votre application a une présentation agréable en mode paysage, en plus du mode portrait.
-
Les widgets à utiliser dans le projet
- Ces exemples utilisent certains des widgets de base que vous pouvez intégrer dans votre projet de Carnet de Notes en Flutter. N’hésitez pas à personnaliser ces exemples en fonction des besoins spécifiques de votre application.
- ListView pour Afficher les Notes :
- Utilisez un ListView pour afficher la liste des notes sur la page d’accueil. Chaque élément de la liste peut être une carte de note contenant un aperçu du texte.
- TextField pour la Saisie de Texte :
- Utilisez le widget TextField pour permettre aux utilisateurs de saisir du texte lorsqu’ils ajoutent ou modifient une note.
- GestureDetector pour la Navigation :
- Utilisez un GestureDetector pour détecter les gestes de l’utilisateur, par exemple, lorsque l’utilisateur appuie sur une note pour la modifier.
- Scaffold pour la Structure de Base :
- Utilisez le widget Scaffold pour définir la structure de base de chaque page, y compris l’app bar, le corps et d’autres éléments structurels.
- FloatingActionButton pour Ajouter une Note :
- Utilisez le widget FloatingActionButton pour ajouter une nouvelle note lorsque l’utilisateur appuie sur un bouton d’ajout.
- AlertDialog pour la Suppression de Note :
- Utilisez un AlertDialog pour demander une confirmation avant de supprimer une note.
- Column et Row pour Structurer la Page :
- Utilisez Column pour organiser les éléments de manière verticale et Row pour organiser les éléments horizontalement.
ListView.builder(
itemCount: notes.length,
itemBuilder: (context, index) {
return NoteCard(note: notes[index]);
},
)
TextField(
controller: _textEditingController,
decoration: InputDecoration(labelText: 'Saisissez votre note'),
)
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => EditNotePage(note: notes[index])),
);
},
child: NoteCard(note: notes[index]),
)
Scaffold(
appBar: AppBar(title: Text('Carnet de Notes')),
body: // Contenu de la page,
)
FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AddNotePage()),
);
},
child: Icon(Icons.add),
)
AlertDialog(
title: Text('Confirmer la Suppression'),
content: Text('Voulez-vous vraiment supprimer cette note ?'),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
// Logique de suppression de note ici
},
child: Text('Oui'),
),
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Non'),
),
],
)
Column(
children: [
// ... Liste des notes
],
)
