I - Introduction
Dans ce tutoriel, je souhaite partager un petit projet Flutter que j'ai réalisé avec des étudiants que je forme au développement mobile. Je tiens à le partager car il a été bénéfique pour mes étudiants en leur permettant de comprendre la technologie Flutter. L'architecture que j'ai utilisée est le modèle MVP (Modèle-Vue-Contrôleur), qui est une architecture simple, efficace et facile à utiliser et à comprendre. Avant de commencer à coder, nous allons prendre un bref aperçu de l'architecture MVP.
II - L’architecture MVP (Modèle-Vue-Contrôleur)
Comme vous pouvez le voir sur l'image, l'architecture MVC est un modèle de conception largement utilisé dans le développement d'applications, y compris les applications mobiles. Elle divise l'application en trois composants principaux : le modèle, la vue et le contrôleur. Chaque composant a un rôle spécifique dans le fonctionnement global de l'application.
Voici une brève explication de chaque composant de l'architecture MVC :
Modèle (Model) :
Le modèle représente les données de l'application et les règles métier associées. Il gère la logique de l'application, les opérations de manipulation des données et la persistance des données. Le modèle est généralement indépendant de la vue et du contrôleur, ce qui signifie qu'il peut être réutilisé dans d'autres parties de l'application ou dans d'autres applications.
Vue (View) :
La vue est responsable de l'affichage de l'interface utilisateur (UI) de l'application. Elle présente les données au format approprié pour l'utilisateur et affiche les éléments graphiques tels que les boutons, les champs de saisie, etc. La vue est généralement passive et ne contient pas de logique métier complexe. Elle se met à jour en fonction des modifications apportées au modèle.
Contrôleur (Controller) :
Le contrôleur est responsable de la gestion des interactions entre l'utilisateur, la vue et le modèle. Il reçoit les entrées de l'utilisateur via la vue, interroge et met à jour le modèle en fonction de ces entrées, puis met à jour la vue en conséquence. Le contrôleur agit comme un médiateur entre la vue et le modèle, en veillant à ce que les deux restent synchronisés.
Très bien, après cela, je pense que nous pouvons commencer à coder notre petit projet.
III - Codons notre projet
III - 1 - Création et Structuration du projet Flutter
Pour cree un projet un projet flutter lance la commande suivant sur votre terme :
<<<== flutter create nom__du_projet ==>>>
Après avoir créé le projet en utilisant la commande précédente, j'ai organisé le dossier "lib" de la manière suivante :
Et après création des différentes composantes de mon projet voici ce que ça donne:
III - 2 - Mise en Place de l'interface de notre Application
voici à quoi ressemble l’interface de notre application :
Comme vous pouvez le constater, l'application est un jeu très simple. C'est un jeu dans lequel le joueur qui aligne ces trois objets en premier a gagné.
Si vous avez un design à intégrer, la première chose à faire est de décomposer chaque interface du design en composants indépendants. Pour notre cas, voici comment l'interface peut être décomposée :
Vu que nous utilisons un gestionnaire d'état (State Management) appelé Riverpod, chaque composant de l'interface peut être codé de manière indépendante. Cela signifie que nous ne sommes pas obligés de regrouper tout le code de chaque composant dans la même page. Au lieu de cela, nous pouvons les coder séparément et les appeler dans la page de l'interface.
III - 2 - 1 - En tête
Et voici le code de l'en tête
III - 2 - 2 - Les information des joueurs
Et voici le code pour afficher les informations des joueurs :
Si vous avez remarqué, dans le code des informations des joueurs, j'ai fait appel à un autre composant appelé PlayerWidget. J'ai utilisé ce composant pour éviter la redondance du code qui affiche l'icône et le nom d'utilisateur des joueurs.
Voici le code du composant PlayerWidget :
III - 2 - 3 - Le Jeux
Voici le code du jeux
Si vous avez remarqué, j'ai également fait appel à un autre composant appelé ItemGame que j'ai créé afin de ne pas regrouper tout le code dans le même fichier. Voici le code de ItemGame :
III - 2 - 4 - Le Bouton
Voici le code du bouton
*III - 2 - 4 - Appels de tous les Composants sur l’interface *
Et ainsi, nous obtenons l'interface de notre application.
Si vous êtes intéressés à voir le reste de l'application et à obtenir de l'assistance pour le développement de vos applications, veuillez nous contacter :
Email : aliounebadaradiouf7@gmail.com
LinkedIn : https://www.linkedin.com/in/alioune-badara-diouf-b82245192/
Top comments (1)
Article bien rédigé.