TP14 Design & theming dans Flutter

TP14 Design & theming dans Flutter

1. Énoncé de l’Examen 01

1. Contexte :

• Vous devez créer une application Flutter qui propose une interface moderne inspirée de l’image fournie.
• L’application doit inclure un système de connexion, une page d’accueil, une page affichant 30 cartes de thèmes colorés, ainsi qu’une fonctionnalité permettant d’agrandir les images avec une description en cliquant sur une carte.
• L’application doit également intégrer un mode clair et un mode sombre, qui doivent être visibles sur toutes les pages.

2. Spécifications Fonctionnelles :



1. Page de Connexion

• Éléments requis :
• Deux champs de texte : un pour le nom d’utilisateur et un pour le mot de passe.
• Bouton « Se connecter » : Redirige vers la page d’accueil après une validation.
• Validation des champs vides avec un message d’erreur en cas de saisie incorrecte.
• Design simple et intuitif, compatible avec les modes clair et sombre.

2. Page d’Accueil

• Éléments requis :
• Un titre centré et un message de bienvenue.
• Un bouton « Explorer les Thèmes » redirigeant vers la page des thèmes colorés.
• Affichage cohérent avec les modes clair et sombre.

3. Page des Thèmes Colorés (Grille de Cartes)

• Éléments requis :
• Un slider
• Une grille de 30 cartes organisée en 2 colonnes au départ et extensible sur 1,2,3 et 4 colonnes.
• Chaque carte affiche une image et un titre.
• Un clic sur une carte ouvre un modal ou une nouvelle page affichant :
• Une image agrandie.
• Une petite description du thème.
• Un bouton pour revenir à la grille.
• Compatibilité avec les modes clair et sombre.

3. Spécifications Techniques :

• Gestion des ressources :
• Les images doivent être stockées dans le dossier assets/images et référencées correctement dans le fichier pubspec.yaml.
• Le design doit être responsive et compatible avec différentes tailles d’écran.
• Dark mode et Light mode :
• Implémentez un thème clair et un thème sombre pour toutes les pages. Le basculement peut se faire automatiquement ou via un bouton sur la page d’accueil.

4. Fichiers à Remettre :

• Code source :
• Les fichiers .dart de toutes les pages :
• main.dart
• login_page.dart
• home_page.dart
• themes_page.dart (grille des cartes)
• theme_detail_page.dart (page de détail d’une carte)
• Notifier.dart (page de détail d’une carte)
• Autres (facultatif)
• Assurez-vous que le code soit bien structuré et documenté.
• Captures d’écran :
• Capture d’écran de chaque page réalisée (main,Login, Accueil, Grille des cartes, Page de détail, Notifier,…).
• Pour chaque page, inclure une capture en mode clair et une autre en mode sombre.

5. Test de fonctionnalité :

• Vérifiez que toutes les fonctionnalités décrites (connexion, affichage des cartes, modal, etc.) fonctionnent correctement avant la remise.

6. Critères d’Évaluation :

1. Fonctionnalités :

• Page main : 5 points
• Page de connexion : 10 points
• Page d’accueil : 5 points
• Grille de cartes : 30 points
• Modal ou page de détail : 10 points
• Mode clair et sombre correctement implémentés : 30 points

2. Organisation :

• Code propre et bien structuré : 5 points
• Bonne gestion des ressources (images, responsive design) : 5 points

3. Bonus :

• Animation sur les cartes (par exemple, un zoom lors du clic) : +5 points
• Thème dynamique (basculement clair/sombre via un bouton) : +5 points
• Total : 100 points (110 avec bonus).

4. Remise :

• Date limite : [à définir dans la classroom].
• Le fichier doit être remis sous la forme d’un fichier .zip contenant :
• Le dossier complet du projet Flutter.
• Une documentation simple expliquant les étapes réalisées (si possible).

2. Énoncé de l’Examen 02

1. Contexte :

• Vous devez créer une application Flutter qui propose une interface moderne inspirée de l’image fournie.
• L’application doit inclure un système de connexion, une page d’accueil, une page affichant des notes adhésives (Sticky Notes) avec des thèmes colorés, et une fonctionnalité permettant d’afficher les détails d’une note avec un agrandissement en cliquant dessus.
• L’application doit également intégrer un mode clair et un mode sombre, qui doivent être visibles sur toutes les pages.

2. Spécifications Fonctionnelles :



1. Page de Connexion

• Éléments requis :
• Deux champs de texte : un pour le nom d’utilisateur et un pour le mot de passe.
• Bouton « Se connecter » : Redirige vers la page d’accueil après une validation.
• Validation des champs vides avec un message d’erreur en cas de saisie incorrecte.
• Design simple et intuitif, compatible avec les modes clair et sombre.

2. Page d’Accueil

• Éléments requis :
• Un titre centré et un message de bienvenue.
• Un bouton « Voir les Notes » redirigeant vers la page des Sticky Notes.
• Affichage cohérent avec les modes clair et sombre.

3. Page des Sticky Notes

• Éléments requis :
• Un affichage de notes colorées sous forme de liste avec des éléments organisés par couleur.
• Chaque note contient un titre, une description, et est colorée selon sa catégorie.
• Un bouton flottant (+) permettant d’ajouter une nouvelle note.
• Un clic sur une note ouvre un modal ou une nouvelle page affichant :
• Une vue agrandie de la note.
• Un bouton pour revenir à la liste des Sticky Notes.
• Compatibilité avec les modes clair et sombre.

3. Spécifications Techniques :

• Gestion des ressources :
• Les images des Sticky Notes doivent être générées dynamiquement à partir de données dans un fichier JSON local.
• Le design doit être responsive et compatible avec différentes tailles d’écran.
• Dark mode et Light mode :
• Implémentez un thème clair et un thème sombre pour toutes les pages. Le basculement peut se faire automatiquement ou via un bouton sur la page d’accueil.

4. Fichiers à Remettre :

• Code source :
• Les fichiers .dart de toutes les pages :
• main.dart
• login_page.dart
• home_page.dart
• sticky_notes_page.dart
• sticky_note_detail_page.dart
• Assurez-vous que le code soit bien structuré et documenté.
• Captures d’écran :
• Capture d’écran de chaque page réalisée.
• Pour chaque page, inclure une capture en mode clair et une autre en mode sombre.

5. Test de fonctionnalité :

• Vérifiez que toutes les fonctionnalités décrites (connexion, affichage des Sticky Notes, modal, etc.) fonctionnent correctement avant la remise.

6. Critères d’Évaluation :

1. Fonctionnalités :

• Page main : 5 points
• Page de connexion : 10 points
• Page d’accueil : 5 points
• Page des Sticky Notes : 30 points
• Modal ou page de détail : 10 points
• Mode clair et sombre correctement implémentés : 30 points

2. Organisation :

• Code propre et bien structuré : 5 points
• Bonne gestion des ressources (images, responsive design) : 5 points

3. Bonus :

• Animation sur les Sticky Notes (par exemple, un effet de glissement) : +5 points
• Thème dynamique (basculement clair/sombre via un bouton) : +5 points
• Total : 100 points (110 avec bonus).

4. Remise :

• Date limite : [à définir dans la classroom].
• Le fichier doit être remis sous la forme d’un fichier .zip contenant :
• Le dossier complet du projet Flutter.
• Une documentation simple expliquant les étapes réalisées (si possible).

3. Énoncé de l’Examen 03



1. Contexte :

• Vous devez créer une application Flutter qui imite l’interface fournie.
• L’application affichera une liste de leçons d’anglais sous forme de cartes.
• Chaque carte contiendra une image, un badge indiquant la catégorie (« 6 Minute Grammar »), un titre, et un compteur de vues.
• Au clic sur une carte, l’utilisateur sera redirigé vers une nouvelle page affichant les détails de la leçon.

2. Spécifications Fonctionnelles :

1. Page d’Accueil :

   • Affiche une liste verticale de cartes représentant les leçons.
   • Les cartes doivent inclure :
     • Une image en haut de la carte.
     • Un badge jaune en haut à gauche avec le texte « 6 Minute Grammar ».
     • Un titre de la leçon en texte gras.
     • Un compteur indiquant le nombre de vues (exemple : « 0 view »).
   • Les données (images, titres, vues) doivent être chargées dynamiquement à partir d’une liste définie dans le code.
   • Les cartes doivent être interactives et rediriger vers une page de détails.

2. Page de Détails d’une Leçon :

• Affiche une image, le titre, une description, et le compteur de vues mis à jour.
• Incrémente dynamiquement le compteur de vues chaque fois que la page est ouverte.

3. Spécifications Techniques :

• Organisation du Code :
  • main.dart : Configuration principale et navigation.
  • home_page.dart : Page d’accueil.
  • lesson_detail_page.dart : Page de détails d’une leçon.
• Gestion des Ressources :
  • Les images doivent être stockées dans assets/images.
  • Mettre à jour pubspec.yaml pour inclure le dossier d’images.
• Navigation :
  • Utiliser le widget Navigator pour gérer la navigation entre les pages.
  • Passer les données (image, titre, description) à la page de détails via le constructeur.
• Responsive Design : L’application doit être compatible avec différentes tailles d’écran.

4. Critères d’Évaluation :

1. Fonctionnalités (70 points) :
   • Affichage de la liste des leçons : 25 points.
   • Navigation vers la page de détails : 20 points.
   • Incrémentation correcte du compteur de vues : 15 points.
   • Affichage des détails de la leçon : 10 points.
2. Organisation et Qualité du Code (20 points) :
   • Structuration en fichiers distincts : 10 points.
   • Utilisation efficace des widgets Flutter : 10 points.
3. Design et Expérience Utilisateur (10 points) :
   • Respect de l’interface et design responsive : 10 points.
4. Bonus (10 points) :
   • Animation sur les cartes : +5 points.
   • Mode sombre : +5 points.

5. Consignes de Remise :

• Envoyez une archive .zip contenant :
  • Le projet Flutter complet.
  • Une capture d’écran de l’application en fonctionnement.
• Testez votre application avant de la soumettre.

4. Énoncé de l’Examen 04

1. Contexte :

• Créer une application web qui permet aux utilisateurs de consulter les sourates du Saint Coran, avec un design responsive et un thème global qui prend en charge les modes clair et sombre.

2. Structure de l’Application



1. Page de Connexion

• Formulaire de connexion avec les champs suivants :
• Nom d’utilisateur
• Mot de passe
• Bouton « Se connecter »
• Validation des champs vides avec un message d’erreur en cas de saisie incorrecte.
• Lien pour s’inscrire (si nécessaire).
• Design simple et intuitif, compatible avec les modes clair et sombre.

2. Page d’Accueil

• Titre : « Holy Quran – القرآن الكريم ».
• Liste de sourates comprenant :
• Nom de la sourate (en arabe et en anglais).
• Bouton ou lien pour accéder à la description de chaque sourate.
• Commutateur pour changer le thème (clair/sombre).

3. Page de Description de la Sourate

• Titre de la sourate.
• Description de la sourate (historique, thèmes, etc.).
• Bouton pour revenir à la page d’accueil.

3. Spécifications Fonctionnelles

1. Page de Connexion

• Éléments requis :
• Deux champs de texte : un pour le nom d’utilisateur et un pour le mot de passe.
• Bouton « Se connecter » redirigeant vers la page d’accueil après validation.
• Validation des champs vides avec un message d’erreur.
• Design responsive compatible avec les modes clair et sombre.

2. Page d’Accueil

• Éléments requis :
• Un titre centré et un message de bienvenue.
• Une liste des sourates affichant leur nom en arabe et en anglais.
• Un bouton « Explorer les Sourates » pour accéder à la description.
• Commutateur pour passer du mode clair au mode sombre.

3. Page des Sourates (Grille de Cartes)

• Éléments requis :
• Une grille affichant les sourates.
• Chaque carte inclut :
• Nom de la sourate (arabe et anglais).
• Une icône ou un bouton pour détails.
• Design adaptatif : affichage en plusieurs colonnes (2, 3 ou 4 colonnes selon la taille de l’écran).
• Responsive et compatible avec les modes clair et sombre.

4. Page de Détail d’une Sourate

• Éléments requis :
• Titre et description de la sourate.
• Bouton pour revenir à la grille.

4. Spécifications Techniques

1. Gestion des ressources

• Les ressources (images, textes) doivent être stockées dans un dossier assets/.
• Référence correcte des fichiers dans le fichier pubspec.yaml.
• Design responsive adapté à toutes les tailles d’écran.

2. Dark mode et Light mode

• Implémentation d’un thème clair et d’un thème sombre pour toutes les pages.
• Commutateur pour basculer entre les modes clair et sombre.

5. Fichiers à Remettre

1. Code source

• Les fichiers pour toutes les pages :

2. Captures d’écran

• Capture d’écran de chaque page :
• Mode clair et mode sombre pour chaque page.

3. Documentation

• Une documentation expliquant les étapes réalisées (si possible).

6. Test de Fonctionnalité

• Validez toutes les fonctionnalités (connexion, navigation, affichage des sourates, etc.) avant la remise.
• Vérifiez la compatibilité responsive et le basculement entre les modes clair et sombre.

7. Critères d’Évaluation

1. Fonctionnalités (80 points)

• Page de connexion : 10 points
• Page d’accueil : 10 points
• Grille des sourates : 30 points
• Page de détail d’une sourate : 10 points
• Mode clair et sombre correctement implémentés : 20 points

2. Organisation (20 points)

• Code propre et bien structuré : 10 points
• Bonne gestion des ressources (images, responsive design) : 10 points

3. Bonus (10 points)

• Animation (ex. : zoom sur une carte au clic) : +5 points
• Thème dynamique (basculement clair/sombre par un bouton) : +5 points

8. Remise

• Date limite : [à définir]
• Remise sous forme d’un fichier .zip contenant :
• Une documentation simple expliquant les étapes réalisées (si possible).





5. Énoncé de l’Examen 05

1. Contexte :

• Vous devez développer une application Flutter avec une interface moderne qui inclut un système de connexion, une page d’accueil, une grille de 30 cartes colorées, et une fonctionnalité permettant d’agrandir les images des cartes avec une description au clic.
• L’application doit intégrer un mode clair et un mode sombre visible sur toutes les pages.
• Un slider devra permettre de modifier la disposition des cartes entre 1, 2, 3 ou 4 colonnes.

2. Spécifications Fonctionnelles :



1. Page de Connexion

• Éléments requis :
• Deux champs de texte : un pour le nom d’utilisateur et un pour le mot de passe.
• Bouton « Se connecter » : redirige vers la page d’accueil après validation.
• Message d’erreur affiché pour les champs vides ou incorrects.
• Compatible avec les modes clair et sombre.

2. Page d’Accueil

• Éléments requis :
• Un titre centré et un message de bienvenue.
• Une petite description de l’application.
• Un bouton « Explorer les Thèmes » redirigeant vers la grille des cartes.
• Design cohérent avec les modes clair et sombre.

3. Grille de Cartes (Page des Thèmes)

• Éléments requis :
• Une grille affichant 30 cartes, organisée initialement en 2 colonnes par défaut.
• Un slider permettant de choisir entre 1, 2, 3 ou 4 colonnes.
• Chaque carte contient une image (selon l’image fournie) et un titre en gras suivi d’un statisitique , et est cliquable pour afficher ses détails.

4. Page de Détails

• Éléments requis :
• Affichage de l’image de la carte en grand avec une description.
• Un bouton pour revenir à la grille des cartes.
• Commutateur pour basculer entre mode clair et sombre.

3. Spécifications Techniques :

• Gestion des ressources :
• Images stockées dans assets/images et configurées dans pubspec.yaml.
• Design responsive compatible avec différentes tailles d’écran.
• Dark Mode et Light Mode :
• Basculement entre thèmes via un commutateur visible sur toutes les pages.

4. Fichiers à Remettre :

• Code source :
• main.dart, login_page.dart, home_page.dart, themes_page.dart, theme_detail_page.dart.
• Captures d’écran :
• Une capture pour chaque page en mode clair et sombre.
• Documentation :
• Explications des étapes réalisées (optionnel).

5. Critères d’Évaluation :

1. Fonctionnalités :

• Connexion : 10 points
• Accueil : 10 points
• Grille des cartes : 25 points
• Page de détails : 20 points
• Mode clair et sombre : 25 points

2. Organisation :

• Code structuré et documenté : 5 points
• Responsive Design : 5 points

3. Bonus :

• Animations : +5 points
• Thème dynamique : +5 points

6. Remise :

• Projet complet (fichier dart et captures) compressé sous forme .zip.





6. Énoncé de l’Examen 06

1. Contexte :

• Développer une application Flutter qui reproduit l’interface et la fonctionnalité des deux écrans présentés dans l’image



2. Structure de l’Application

1. Écran Principal (Menu)

• Afficher un menu latéral avec les options suivantes :
• Accueil
• Compte
• Alimenter carte
• Journal D17
• Micro crédit
• Émission mandat
• Encaissement mandat
• Conditions générales
• Aide et support
• Déconnexion

Un en-tête avec le logo de Mastercard.

2. Écran des Services

• Afficher une grille de services avec les icônes et les intitulés suivants :
• Paiement factures
• Émission mandat
• Encaissement mandat
• Micro crédit
• Inscription élève
• Recharge téléphonique

Un en-tête avec le titre « Nos services ».

Chaque service doit être cliquable et rediriger vers une page de détails correspondante (à concevoir).

3. Fonctionnalités à Implémenter

• Menu Latéral
  • Créer un menu latéral qui s’ouvre à gauche de l’écran.
  • Permettre la navigation entre l’écran principal et l’écran des services.
• Navigation entre Écrans

  Utiliser un Navigator pour passer d’un écran à l’autre.

• Grille de Services

  Utiliser un GridView pour afficher les services sous forme de tuiles.

4. Technologies à Utiliser

• Flutter : pour le développement de l’application.
• Dart : pour la logique de l’application.

5. Remise de l’Examen

Les étudiants doivent soumettre :

• Des captures d’écran de chaque écran réalisé.
• Les fichiers Dart correspondants.

6. Conclusion

Cet énoncé d’examen guide les étudiants à travers la création d’une application Flutter basique avec un menu et des fonctionnalités de navigation.
Ils apprendront à utiliser des widgets comme Drawer, GridView, et à gérer la navigation entre les écrans.






---

Cours Flutter