DEV Community

Cover image for Faire du Flutter Comme les pro du DFB(Dakar Flutter Brigade)
AbdMaker-dev
AbdMaker-dev

Posted on

Faire du Flutter Comme les pro du DFB(Dakar Flutter Brigade)

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)

Image description

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 :

Image description

Et après création des différentes composantes de mon projet voici ce que ça donne:

Image description

III - 2 - Mise en Place de l'interface de notre Application

voici à quoi ressemble l’interface de notre application :

Image description

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 :

Image description

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

Image description

Et voici le code de l'en tête

Image description

III - 2 - 2 - Les information des joueurs

Image description

Et voici le code pour afficher les informations des joueurs :

Image description

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 :

Image description

III - 2 - 3 - Le Jeux

Image description

Voici le code du jeux

Image description

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 :

Image description

III - 2 - 4 - Le Bouton

Image description

Voici le code du bouton

Image description

*III - 2 - 4 - Appels de tous les Composants sur l’interface *

Image description

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)

Collapse
 
bienvenuelisis profile image
Kokou AGBAVON • Edited

Article bien rédigé.