Applications Flutter
Application de calcul des dépenses étape par étape
Ce que vous apprendrez
- Comprendre l'idée de l'application de suivi des dépenses
- Créer un projet Flutter
- Concevoir l'écran de l'application
- Créer le modèle
- Utiliser une bibliothèque externe pour afficher la date
- Ajouter un style général à l'application
- Ajouter la logique à l'application
- Modifier l'affichage des données et ajouter de nouvelles données
- Afficher les pourcentages des jours
- Terminer l'application
À propos du cours
Ce cours vous apprend à construire pas à pas une application de suivi des dépenses avec Flutter. C'est une application pratique dans laquelle vous apprenez à transformer une idée en une application qui fonctionne sur le téléphone. Il commence par une vue d'ensemble de l'application, puis la première étape, qui consiste à créer le projet, à concevoir l'écran initial de l'application et à créer le modèle. Ensuite, vous utilisez une bibliothèque externe pour afficher la date et vous ajoutez un style général à l'application. Dans la deuxième étape, vous ajoutez la logique à l'application, y compris la logique du cycle de vie de l'application, vous modifiez l'affichage des données et vous ajoutez de nouvelles données. Dans la dernière étape, vous préparez l'affichage des pourcentages des jours puis vous terminez l'application. Le cours convient à ceux qui ont appris les bases de Flutter et du langage Dart et qui veulent une application pratique, avec de préférence des notions de base des deux avant de commencer. Vous serez ensuite capable de créer un projet Flutter, de concevoir ses écrans, de les relier aux données, d'ajouter la logique de programmation et de terminer seul une application complète. L'enseignement est pratique et progressif : suivez les leçons dans l'ordre pour passer de l'idée à l'application pas à pas.
Résultats attendus
- Développer des applications professionnelles avec Flutter
- Créer des interfaces utilisateur attrayantes et de haute qualité
- Optimiser les performances des applications sur différents systèmes d'exploitation
- Utiliser les outils Flutter pour créer des applications rapidement
- Comprendre la gestion des données dans les applications
- Appliquer des concepts de programmation en Dart
- Améliorer les compétences en programmation dans un environnement moderne
Avis des apprenants
Contenu du cours
1Application de suivi des dépenses avec Flutter
12 leçons
- Aperçu de l'ApplicationAperçu de l'application de dépenses personnelles hebdomadaires : afficher les dépenses de chaque jour, ajouter un achat avec nom, montant et date, répartir les pourcentages, et les widgets utilisés.4:55
- Phase Un - Création du ProjetCréation d'un nouveau projet Flutter dans Android Studio avec ses réglages de base, puis nettoyage du code main, nommage de l'application et exécution sur l'émulateur.7:41
- Design Initial pour l'Écran de l'ApplicationConstruit la conception initiale de l'écran d'accueil en séparant les widgets en fichiers, en ajoutant un IconButton avec onPressed pour ajouter des achats, et en disposant Containers et Cards avec espacements et ombre.14:33
- Création du ModèleCrée le modèle Transaction dans un dossier models, définit la liste des transactions, puis conçoit l'affichage de chaque transaction avec Container, Text et un IconButton permettant de supprimer un élément.13:43
- Utiliser une Bibliothèque Externe pour Afficher la DateSépare le code en fichiers et dossiers organisés, crée des widgets indépendants, puis utilise le package intl pour afficher la date dans un format adapté après l'avoir ajouté à pubspec.yaml et relancé l'application.9:03
- Ajouter un Style Global à l'ApplicationConfigure le thème global de l'application dans main.dart, avec la police et une image par défaut affichée sans données, les déclare dans pubspec.yaml et verrouille l'orientation de l'écran avec SystemChrome.8:00
- Phase Deux - Ajout de Logique à l'ApplicationCommence la logique de l'application dans le fichier home, avec un getter qui renvoie les transactions, une méthode pour ajouter une transaction avec titre et montant, et une méthode pour en supprimer une selon son identifiant.12:20
- Ajout de la Logique du Cycle de Vie de l'ApplicationOuvre la fenêtre d'ajout de transaction depuis le bouton icône, calcule la hauteur disponible avec MediaQuery pour répartir l'écran proportionnellement entre le graphique et la liste, et ajoute un FloatingActionButton.13:10
- Modifications dans l'Affichage des DonnéesAméliore l'affichage des transactions en remplaçant le Container par un CircleAvatar dans un ListTile, en créant un widget séparé pour la liste et en affichant une image et un message quand la liste est vide.16:24
- Ajouter de Nouvelles DonnéesConstruit l'écran de saisie d'une nouvelle transaction avec des champs de texte et un bouton pour choisir la date via un date picker, valide les valeurs, puis ajoute la transaction et ferme la fenêtre avec Navigator.pop.24:40
- Phase Finale - Préparation de l'Affichage du Pourcentage de JoursCommence la construction du graphique en calculant le total des montants de transactions pour chacun des derniers jours, en extrayant le nom du jour et en préparant ces valeurs pour le widget de barre du graphique.17:13
- Fin de l'applicationCrée le widget ChartBar qui reçoit le jour, le montant et le pourcentage, affiche le montant dans un FittedBox et une barre dont la hauteur suit le pourcentage avec des coins arrondis, puis la teste en ajoutant des transactions.17:19
Formateur
Ing. Amr Abdel Fattah
