Débute avec Flutter !

Bienvenue toi ! Aujourd’hui dans ce cours, nous allons apprendre les bases de Flutter. Ce framework de Google si prestigieux. Nous allons aborder ce cours en suivant les points ci-dessous :

Alors sois attentif !

PRESENTATION DE FLUTTER (HISTORIQUE ET EVOLUTION)

Flutter est un kit de développement logiciel (SDK) d’interface utilisateur open-source créé par Google. Il est utilisé pour développer des applications pour Android, iOS, Linux, Mac, Windows, Google Fuchsia et le web à partir d’une seule base de code.

La première version de Flutter était connue sous le nom de code « Sky » et fonctionnait sur le système d’exploitation Android. Elle a été dévoilée lors du sommet des développeurs Dart de 2015, avec l’intention déclarée de pouvoir effectuer un rendu cohérent à 120 images par seconde. Lors du discours d’ouverture des Google Developer Days à Shanghai, Google a annoncé la sortie de Flutter Release Preview 2 qui est la dernière grande version avant Flutter 1.0. Le 4 décembre 2018, Flutter 1.0 a été publié lors de l’événement Flutter Live, ce qui représente la première version « stable » du Framework. Le 11 décembre 2019, Flutter 1.12 a été publié lors de l’événement Flutter Interactive .

Le 6 mai 2020, le SDK de Dart en version 2.8 et celui de Flutter en version 1.17.0 sont sortis. La prise en charge de l’api Metal a été ajoutée, améliorant les performances des appareils IOS (environ 50 %), de nouveaux widgets Material et de nouveaux outils de suivi de réseau.

Le 3 mars 2021, l’équipe de développement de Flutter a annoncé la release de son SDK en version 2.0.0. De nombreux bugs et problèmes de jeunesse ont été résolus à cette occasion (ajout de null safety par exemple). De plus, l’utilisation de Windows, Linux et la version Web sont ajoutés à la release. (source : WIKIPEDIA).

INSTALLATION DU SDK DE FLUTTER

L’installation de Flutter est assez simple avec des étapes clairement définies pour les différentes plate-formes de développement (Windows, Linux, Mac Os, Chrome Os). Cependant, nous nous intéresserons ici à l’installation de Flutter sur les plate-formes suivantes : Windows et Mac Os.

Téléchargement

Pour télécharger le SDK de Flutter, vous devez vous rendre sur le site officiel de Flutter afin d’obtenir le SDK sur le lien suivant : https://flutter.dev/docs/get-started/install

Une fois sur le site, vous sélectionnez la plate-forme adéquate. Dans la page qui s’affiche, vous verrez un lien flutter_windows_xxx-stable.zip ou flutter_macos_xxx-stable.zip dans la section Get the Flutter SDK. Une fois téléchargé, il vous suffira de dé-zipper le fichier obtenu après le téléchargement et de le placer dans vos fichiers (Ex: Documents).

Installation sur Windows

Pour installer le SDK sur Windows, dans la barre de recherche des fichiers et programmes, saisir le mot clé “variables d’environnement”. Dans les options qui s’affichent, sélectionnez “Modifier les variables d’environnement”. Dans la fenêtre qui s’affiche, cliquez sur “Variables d’environnement”. Une autre fenêtre s’affichera comportant 2 parties (un tableau en haut et un autre en bas). Dans le tableau du bas, sélectionnez l’élément “path” du tableau puis cliquez sur le bouton modifier. Une autre fenêtre s’affichera. Il faudra maintenant cliquer sur le bouton “Nouveau” et saisir le chemin d’accès au dossier bin du dossier flutter obtenu après la décompression dans la phase précédente (Ex: c:\flutter\bin). Vous devez ensuite fermer/valider toutes les fenêtres ouvertes pour terminer.

Installation sur Mac Os

Pour l’installation sur Mac Os, il s’agira d’ouvrir le terminal et de se rendre dans le répertoire de flutter obtenu après l’extraction dans l’étape précédente. Ensuite il faudra l’ajouter également dans la variable d’environnement path en tapant la commande suivant :

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

NB : En remplaçant [PATH_OF_FLUTTER_GIT_DIRECTORY] par le chemin d’accès au répertoire de flutter obtenu après l’extraction.

Avec la commande précédente, la commande Flutter sera accessible seulement pour la session de terminal courante. Pour l’enregistrer de façon globale, pour toutes les sessions terminal, vous devez ouvrir un terminal et suivre les étapes suivantes :

• Ouvrir le fichier .bash_profile

nano ~/.bash_profile

• Une fois ouvert, coller la ligne suivante puis enregistrer

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

NB : En remplaçant [PATH_OF_FLUTTER_GIT_DIRECTORY] par le chemin d’accès au répertoire de flutter obtenu après l’extraction.

• Test de l’installation

Pour faire un diagnostique de l’environnement de développement flutter faites la commande suivante dans un terminal

flutter doctor

Et la commande suivante pour voir la version de Flutter et Dart installés.

flutter --version

INSTALLATION DE L’ENVIRONNEMENT DE TRAVAIL

Pour faire le développement Flutter vous aurez besoin d’installer l’un de ces outils pour continuer qui vous permettra d’écrire votre code, de le tester, de le débogguer et aussi de déployé l’application une fois prête pour Play store ou App store :

• Visual studio code
• Android studio
• Intelli j idea

Une fois installé, vous avez encore à installer des plugins. Ceux deux Flutter et Dart. Vous pouvez suivre les étapes suivantes pour l’éditeur que vous avez choisi.

Cas de Visual studio code

• Lancer le logiciel (Vscode)
• Dans la barre verticale à droite cliquer sur l’icône de plugins
• Saisir « Flutter » et installer le plugin comme le montre l’image ci-dessous

Cas de Android Studio

• Lancer le logiciel (Android studio)
• Dans la barre de menu en haut cliquer sur File ou Fichier, puis « Settings »
• Dans la fenêtre qui s’affiche, sélectionnez l’onglet « Plugins »
• Saisir « Flutter » et installer le plugin comme le montre l’image ci-dessous

Cas de Intelli j idea

• ancer le logiciel (Intelli j)
• Dans la barre de menu en haut cliquer sur File ou Fichier, puis « Settings »
• Dans la fenêtre qui s’affiche, sélectionnez l’onglet « Plugins »
• Saisir « Flutter » et installer le plugin comme le montre l’image ci-dessous

INSTALLATION DE L’ENVIRONNEMENT D’EXECUTION

Avec un émulateur Android

Un émulateur Android est un téléphone virtuel qui intègre les fonctions d’un téléphone physique. A défaut d’un téléphone de déboggage, vous pouvez utiliser un émulateur pour effectuer votre développement.

NB : Pour les applications IOS, vous pouvez également utiliser un émulateur IOS. Cependant, il vous faudra absolument avoir un Macbook pour pouvoir exécuter et utiliser un émulateur IOS.

Pour installer un émulateur Android, vous devrez avoir à installer Android studio sur votre machine. Une fois installer,

• vous pourrez vous rendre dans le logiciel,

• Ouvrez l’outils « Virtual Device Manager »

• Dans la fenêtre qui s’affiche, cliquez sur le bouton « Create device » puis choisissez un émulateur dans la liste proposée pour l’installer en cliquant sur le bouton « next ».

• Sélectionnez ensuite une version d’Android

NB : Vous devrez le télécharger si c’est la première fois que vous faites cette manipulation.

• Quand le téléchargement est terminé, cliquez sur « next » puis « Finish ». Vous verrez alors dans la fenêtre de « Device Manager » que votre émulateur est bien créé.
• Vous pouvez le démarrer en cliquant sur le bouton « Play » comme le montre les captures suivantes :

Avec un téléphone Android

Activation du mode déboggage sur Android

Sachez que si vous avez l’intention d’utiliser un téléphone physique afin d’effectuer vos tests d’application, vous devez rendre votre téléphone détectable comme étant téléphone de test. Pour le faire, suivez ces quelques étapes :

• Rendez-vous dans les paramètres dans le menu « A propos du téléphone »

• Cliquez 7 fois sur le “numéro de build” pour activer le mode développeur

• Retournez dans le menu principal des paramètres du téléphone et sélectionnez “Options pour les développeurs”

• Si ce n’est pas déjà fait, activez le mode “développeur” et l’option “débogage USB”

Test de l’environnement d’exécution

Une fois que l’environnement est mis en place, vous pouvez tester si tout ceci fonctionne convenablement. Je vous invite à taper la commande suivante :

flutter devices

Vous aurez un résultat semblables à

2 connected devices:

macOS (desktop) • macos  • darwin-x64     • macOS 12.6 21G115 darwin-x64
Chrome (web)    • chrome • web-javascript • Google Chrome 105.0.5195.125

Conclusion

Voilà c’est tout ! Maintenant que votre environnement est installé et est fonctionnel, vous êtes maintenant prêt(e) à votre première application Flutter. Je vous recommande de suivre l’article suivant Lancer ma première application mobile en Flutter. Je vous remercie d’avoir porté cette attention particulière à cet article. Si vous éprouvez une difficulté particulière ou que vous avez des questions, n’hésitez pas à laisser tout cela en commentaire ou de me contacter directement par mail.