Creation pas à pas d’une application mobile avec le framework Flutter : une calculette simple en flutter

Le code source de cet article est disponible sur mon compte github ici

https://github.com/Defcoq/ITInnovDesignCalculetteFlutter

Cet article fait suite à celui ci (https://jpdeffo.medium.com/creation-dune-application-mobile-simple-avec-le-framework-ionic-pour-les-d%C3%A9butants-une-dce5a3220acc) publier dans mon blog il y a quelques jours et qui demontrait pas à pas comment créer une application mobile en utilisant le framework ionic.

Dans cet article, nous allons à l’avventure de flutter et nous allons refaire la meme calculatrice.

Qu’est ce que Flutter?

C’est la nouvelle plateforme(framework) mis sur pied par google il y a de cela 3 ans pour faciliter la conception des applications mobile multiplateforme, j’en ai parlé dans un post sur ma page facebook (https://www.facebook.com/permalink.php?story_fbid=1386200205099775&id=100011294258548) et je profites pour vous demandez de vous abonnez sur cette page facebook, mais aussi sur la page de ITInnovDesign (https://www.facebook.com/ItInnovDesign) ou je publies regulièrement des articles et aussi abonnez vous a ce blog sur medium.com pour recevoir des nouveaux articles avec source code à l’appui.

Tout d’abord, présentons l’architecture de flutter : Flutter a une architecture modulaire qui effectivement permet d’écrire le code une seule fois et de l’utiliser sur plusieurs plateformes (Android, ios, ou web) meme si le moteur est different de plateforme à plateforme, pour le developeur c’est trasnparent.voici en image cette architecture:

1. le Module Framework est écrit en language “Dart” qui contient les librairies que nous en tant que develppeur on devra utiliser pour concevoir l’interface utilisateur(UI), ceci inclut : les themes, les widgets, les layout et les animations, les gestures et les bloques fondamentaux.Dans la meme lignée,il existe aussi des plugins qui permettent de faire des activités comme la serialization du JSON(Javascript Object Notation), la geolocalisation, l’accès à la camera du telephone, payement integré au telephone (in-app payement en anglais) etc.. le plugin permet d’inserrer dans un proget seul ce donc on a besoin dans notre proget, c’est plus ou moins le meme concept qu’on a avec les plugin de wordpress.
2. Le moteur ou mieux l’engine en anglais, contient les librairies c++ qui constituent le socle meme de flutter, ce moteur contient donc les librairies de bas niveau donc plus proche aux peripheries du telephone par exemple pour l’accès à la peripherie graphique, au clavier (I/O=Input/Output) etc.. bref tout ce qu’on fait dans le module d’en haut est ensuite traduit par le moteur qui lui contient tout ce qu’il faut pour prendre en main les peripheries.
3. Embbeder est different pour chaque plateforme et son role est de créer l’executable ou les modules pour chaque plateforme.

Pour developper avec flutter:

A. Je supposes que beaucoup ont android et voudrons bien tester leur application sur cette plateforme alors vous devez installer Java Developement Kit ici (https://www.oracle.com/java/technologies/javase-downloads.html)

B. Allez ici et telecharger la SDK de flutter (https://flutter.dev/docs/development/tools/sdk/releases), du moins il y a toutes les instructions ici pour avoir un environement stable, vous pouvez rapidement procedez en utilisant ce lien (https://flutter.dev/docs/get-started/install/macos#get-sdk)

Une fois l’installation terminée, ouvrez powershel (je supposes ici que vous etes entrain de developper sur windows)

Tappez dans powershell la commande:

flutter help

Ceci confirme effectivement que flutter est en place, pour verifier si votre machine est pret pour commencer le developpement, tappez la commande suivante:

flutter doctor

Si tout es signalé en vert comme chez moi là, alors on peut commencer à faire notre calculette, si non flutter doctor vous indique ce qui manque pour completer votre installation.

Par exemple il se peut que chez vous, vous n’ayez pas android studio, je vous ai dit que flutter a été crée par Google, et on peut developper flutter avec par exemple visual studio code (VSC => https://code.visualstudio.com/download), ou en utilisant n’importe quel editeur de texte et faire tout avec la ligne de commande de flutter à travers powershell, mais aussi on peut utiliser Android Studio qui est l’environnement de developpement dedié à cette mission et fait par google, fait un effort de lire tout dans le lien suivant (https://flutter.dev/docs/get-started/install/windows), puis installer andoid studio (https://developer.android.com/studio)

Maintenant passons à la creation de notre calculette.

dans powershell tappez la commande suivante:

flutter create itinnovdesigncalculetteflutter

comem vous pouvez l’imaginer, “itinnovdesigncalculetteflutter” est le nom de notre proget et “flutter create” est la commande de flutter utiliser pour creer un nouveau proget, une fois la commande execute, un nouveau un repertoire est crée dans le meme repertoire ou vous avez lancer la commande dans powershell, il suffit donc de tapper:

cd .itinnovdesigncalculetteflutter

et successivement :

code .

Comme moi en image pour ouvrir le proget dans visual studio code et je vous demande immediatement d’oouvrir un terminale dans VSC de manière à pouvoir faire tout notre proget de VSC

Voilà on est pret pour developper notre calculette.

Creez un nouveau repertoire dans le le repertoire lib appellé “widgets” et un fichier dans ce repertoire appéllé “CalculetteBouton.dart” comme en image:

CalculetteBouton.dart va contenir le code du bouton qu’on va utiliser dans notre calculette:

inserrez le code suivant:

Comme vous pouvez le constatez dans ce bout de code, flutter n’est qu’un arbre de windget, c’est à dire que l’interface de flutter est constitué d’une hierachie des windgets les uns après les autres, exactement comem une page web contient le HTML qui est en fait du DOM donc une structure de données sous forme d’arbre. Bref le but de cet article n’est pas d’explique de manière detaille ce que fait flutter, mais juste vous faire voir l’approche de flutter et le language dart pour refaire la meme calculatrice qu’on a fait avec ionic.

Ensuite modifier votre fichier main.dart et inserrez le code suivant:

une fois de plus l’objectif ici n’est pas d’enseigner pas à pas le language dart, ni moins fluetter on pourra faire des series d’articles pour parler de fond en comble de flutter, mais ici c’est juste pour vous faire entrer dans ce monde et commencer à prendre la main, cependant le code est assez explicatif pour qui comprend la OOP.

ouvrez ensuite votre fichier “pubspec.yaml” google_fonts: 1.1.0 math_expressions: ^2.0.0 et inserrez les dependances suivantes vouyez comment je l’ai installe:

puis dans la commande VSC tappez (vous devz d’abord sauver tout)

flutter pub get

Maintenant, on peut essayer la app dans notre telephone

à l’aide d’un connecteur USB, attachez votre telephone sur votre ordinateur puis lancez la commande (vous devez abililité option developpeur pour android dans votre telephone ici https://www.frandroid.com/comment-faire/tutoriaux/184906_comment-acceder-au-mode-developpeur-sur-android)

flutter run — no-sound-null-safety

eh voilà vous aurez ceci sur votre telephone android

Voilà vous pouvez telecharger le source code de cet article sur mon compte github ici https://github.com/Defcoq/ITInnovDesignCalculetteFlutter

On refera la meme calculette avec c# et le framework Xamarin dans mon prochain article.

Abonnez vous sur cette page, mais aussi sur ma page facebook (https://www.facebook.com/profile.php?id=100011294258548), sur la page ITInnovDesign donc je suis l’auteur et ou j’alimente le contenu avec plein de proget de tout sort (https://www.facebook.com/ItInnovDesign).

Surtout partagez, commenterz et posez des questions, je serai près dans la mesure du possible de vous éclaircir.

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: