FORMATION FLUTTER N°1 aU ya Créez de Magnifiques Applications pour iOS & Android avec Flutter Oo J41, Bienvenue 1.1 Mon histoire 1.2 Mes débuts avec lonic 1.3 Alors pourquoi Flutter 2 1.4 Pourquoi ce cours ? 2. Qu'est-ce que Flutter ? 2.4 Sa rapidité de développement 2.2 Son interface utiisateur trés flexible 2.3 Des performances nativ. 2.4 Qui utilise Flutter 2 3. Quiest-co que Dart 2 3.1 Le Dart et les autres langages 3.2 Le SDK Dart 3.3. Quelaues exemples du Dart 4, Installer Flutter sur macOS 4.1 Installer le SDK Flutter 4.2 Configurer le SDK Flutter 4.2.1 Méthode 1: zsh (recommandée! 4.2.2 Méthode 2: bash (utilisée dans la vidéo 4.3 Configuration de Xcode 4.4 Configurer Android Studio 5. Installer Flutter sur Windows S.1 installer le SDK Flutter sur Windows 5.2 Configurer le SDK Flutter sur Windows 5.3 Configurer Android Studio 6. Configurer Visual Studio Code 6.1 Installer et configurer Visual Studio Code 6.2 Créer une application en partant de zéro1. Bienvenue Bonjour a tous et bienvenue dans FLUTTER REVOLUTION! Je vous remercie tout d’abord de m’avoir fait confiance et de me rejoindre dans ce cours qui j/en suis sr changera votre vision du développement mobile. 1.1 Mon histoire Si vous connaissez un peu mon parcours, vous savez que je suis développeur mobile depuis 2017 aprés avoir commencé par le développement web J'ai commencé a créer mes premiéres applications avec le framework lonic qui a 'poque m’a permis de démarrer assez rapidement Choice, ma toute premiere application mobile J'ai par la suite étendu mes connaissances et proposé mes services a d'autres clients, puis finalement j'ai créé des cours.A travers ma chaine YouTube et mon blog, vous étes maintenant des milliers a suivre mes vidéos et mes tutoriels gratuits sur le développement mobile. Mon activité a pu ainsi prospérer grace a mes cours en ligne payants et & mes prestations de cours particuliers. 1.2 Mes débuts avec lonic lonic utilise le framework Angular de Google qui est basé sur les technologies Web et permet de coder des applications avec les langages HTML, CSS et TypeScript. ‘©-% Le framework lonic permet lui aussi de développer pour iOS et Android Le framework le plus connu cependant a l'époque oi j'ai commencé & me former était React JS de Facebook ll avait 'avantage d’étre utilisé par de grandes startups dont Facebook et Instagram par exemple ce qui lui confie une certaine notoriété. J'ai par la suite longtemps justifié mon choix du framework lonic en invoquant sa simplicité. En fait lonic n’a jamais était aussi sexy et populaire que React... Mais je suis toujours parti du principe que si 'avais pu démarrer de zéro avec lonic, les autres le pouvait aussi. 1.3 Alors pourquoi Flutter ? Jiavais déja annoncé a plusieurs reprises que je passerai un jour ou l'autre A React JS pour m’adapter a la forte demande du marché.Pourtant, vous étes en train de lire un cours sur Flutter... Alors pourquoi ? Je pourrais passer trés longtemps a répondre a cette question, le développement mobile est mon quotidien et je baigne en permanence dans toute l'actualité des startups, Mais pour faire simple, c'est parce que Flutter représente selon moi une véritable révolution Ce n'est pas qu'un simple jeu de mot pour nommer cette formation, c’est véritablement ce que j'ai ressenti en testant pour la premiére fois Flutter. Flutter permet de développer trés rapidement par rapport a lonic ou React, il est directement orienté vers le développement natif sur émulateur iOS et Android En fait Flutter est un SDK et non un framework comme React, ce qui veut dire quiil s'adapte en fait aux environnements de développement d’Android et iOS via leurs logiciels respectifs. Button clicked 0 times Flutter avec un émulateur iOS, s'actualise instantanément Concrétement avec un seul code (le Dart) et simplement en enregistrant son fichier on actualise son application sur iOS et AndroidCette simple différence par rapport aux frameworks JS est en fait monstrueuse, pas pour nos applications directement, mais pour notre rapidité de développement. On développe tout simplement plus vite sur Flutter que sur n'importe quel autre framework multiplateforme 1.4 Pourquoi ce cours ? J'ai donc décidé en juillet 2020 de démarrer un nouveau et unique cours sur Flutter. Pour aider la communauté francophone du monde entier a exploiter au maximum le superbe outil que représente Flutter Dans ce cours, nous allons reprendre toutes les bases de Flutter et du Dart en repartant vraiment de zéro. Le but pour moi est de vous permettre d'aller le plus loin possible dans le développement de vos applications mobiles avec Flutter. On commencera avec la prise en main des bases de Flutter et de la maitrise de son langage Dart Je vous proposerai aussi plusieurs chapitres consacrés aux interfaces utilisateurs que propose Flutter qui sont a la pointe des animations sur smartphone Enfin on terminera par un ensemble de tutoriels ciblés sur les fonctionnalités les plus utiles des applications modernes. 2. Qu’est-ce que Flutter ? Flutter est en fait un SDK et non un framework de développement mobile. Qu’est-ce qu'un SDK par rapport a un framework et qu’est-ce que cela représente-til pour nos applications ? Selon Wikipédia, la définition officielle d'un Framework est la suivante:En programmation informatique, un framework désigne un ensemble cohérent de composants logiciels structurels, qui sert a créer les fondations ainsi que les grandes lignes de tout ou d'une partie d'un logiciel. https://f.wikipedia.org/wiki/Framework Concrétement un framework comme Angular ou React permet de eréer de A Zune application mobile par exemple. II nous faut cependant passer par une phase d’adaptation aux appareils mobile lors de la création de chaque version iOS et Android. Flutter en revanche est donc un SDK, qui veut dire littéralement Kit de Développement (Software Development Kit) Google a concu le SDK Flutter pour s’adapter aux deux environnements de développements iOS et Android: Xcode et Android Studio. Le SDK Flutter vient done s'installer sur votre machine en complément de ces deux logiciels (avec Android qui comprend aussi son propre SDK). Donc Flutter nous permet de travailler depuis un éditeur de code et de compiler pour les deux plateformes en méme temps.Flutter permet de lancer deux émulateurs iOS et Android en méme temps Voyons donc maintenant quels sont les points essentiels a connaitre sur utilisation de Flutter. 2.1 Sa rapidité de développement Le premier point essentiel encore une fois de Flutter est la rapidité de développement qu'il nous offre. En fait Flutter nous offre une rapidité de développement que 'on retrouve avec le développement natif d'application. Sur Xcode lorsqu'on code avec le Swift et qu'on teste son application en quelques secondes avec un simulateur d’iPhone. Mais aussi sur Android Studio avec Java ou Kotlin lorsqu’on teste son application sur un émulateur Android.En fait avec Flutter on utilise un éditeur de code (comme Visual Studio Code dont nous détaillerons la configuration) pour travailler sur nos fichiers Dart. A chaque enregistrement de nos fichiers, grace a 'extension Flutter de Visual Studio notre application s’actualise sur notre émulateur. 2.2 Son interface utilisateur trés flexible Le deuxiéme point essentie! de Flutter est son interface utilisateur ou UI Design vraiment révolutionnaire. En fait la plupart des autres frameworks ou outils de développement mobile permettent de recréer des animations modernes Mais Flutter a vraiment mis une priorité sur ces animations pour les rendre trés accessibles oe Monet Nous verrons par exemple comme créer avec les Widgets Flutter toute sorte d'affichage pour nos applications. Mais nous utiliserons aussi immense bibliothéque d’animations et dinteractions que Flutter propose pour dynamiser nos applications. Ala différence d'autres frameworks de développement mobile, ses interactions sont facilement accessibles. C’est la raison pour laquelle la grande majorité des applications développées avec Flutter sont trés intuitives et dynamiques.Vous pouvez en retrouver quelques exemples sur le site de Flutter: https://flutter.dev/showcase 2.3 Des performances natives Je vous ai parlé a plusieurs reprises de la rapidité de développement que propose Flutter, mais parlons maintenant de la rapidité de nos applications elle-méme ll est évident que Google a congu Flutter pour proposer la meilleure rapidité d'exécution possible pour ses applications, mais a quel point une application peutelle étre plus rapide ? En fait quand on parle de performance native on parle notamment de l'accés aux fonctionnalités natives d'un smartphone Avec lonic, nous utilisions Cordova JS pour accéder aux fonctionnalités natives d'un appareil mobile, comme l'appareil photo ou la localisation. Avec Flutter, qui je vous le rappelle est un SDK, on accéde beaucoup plus rapidement aux fonctionnalités natives. Google prétend méme que les performances sont équivalentes au développement natif d’application avec Swift et Java notamment. Ace stade, c'est assez difficile a vérifier, car les derniers modéles d'iPhone sont déja extrémement performants et les différences de performance se calculent en millisecondes. Méme les applications de Facebook comme Instagram développées avec React proposent des performances excellentes. Nous pouvons donc faire confiance 4 Google en ce qui concerne les performances et le maintien de celle-ci dans la durée. 2.4 Qui utilise Flutter ? Le SDK Flutter est le plus récent de tous les outils logiciels du monde du développement mobile.Comme je vous I'ai dit, je me suis spécialisé pendant des années sur le framework lonic mais qui était lui-méme basé sur Angular, un autre framework de Google Llavantage d'utiliser un framework mature est que l'on retrouve beaucoup de ressources sur internet pour nous faciliter l'apprentissage. Sur Flutter, les cours en ligne et tutoriels en frangais restent plutét rares pour le moment d’oli cette formation En ce qui concerne les entreprises qui utilisent Flutter, les plus conus se comptent pour le moment sur les doigts d’une main. Google ebay Oo G)Square e2ateec*” — capitalOne y. Vous retrouverez toutes les startups qui l'utilisent sur le site de Flutter: https://lutter.dev/showcase Mais pas d'inquiétude, a la fin de ce cours vous ferez peut-étre partie des futurs startups ou développeurs sélectionnés par Google pour mettre en avant Flutter @ 3. Qu’est-ce que Dart ? Contrairement a ce qu'on peut penser, le projet du langage Dart chez Google est plus ancien que le projet Flutter. lla été développé chez Google au départ pour combler les défauts du JavaScript et avait pour objectif de le remplacer en tant que langage phare du web@ Dart Flutter n'est venu dans un deuxiéme temps pour trouver une nouvelle utilité au langage Dart resté inconnu du grand public. Aujourd’hui avec le langage Dart et Flutter, nous pouvons créer des applications mobiles, des sites web et des logiciels de bureau. Dart est done un langage trés puissant et polyvalent, car il permet de gérer le c6té design avec Flutter mais également la connexion avec Firebase Bref le langage Dart vous offrira de nombreux choix en termes de développement et vous ouvrira aussi des portes pour votre carriére. 3.1 Le Dart et les autres langages Le Dart on va le voir n'est pas si nouveau que ¢a, mais vient parfaitement s’adapter aux besoins des développeurs d’applications. Le Dart est un langage orienté objet comme le sont la plupart des langages de développement logiciel (C#, Swift, ou Objective C). On sera amené par exemple a le comparer au JavaScript qui fait tourner la majorité des autres frameworks multiplateformes Contrairement a Angular par exemple, on développe quasiment 100% de notre code avec le Dart. Sur les frameworks JavaScript comme Angular et React, on développe avec les langages web classiques: ¢ HTML: Pour le contenu de notre application (texte, image, vidéo, boutons) * CSS: Pour styliser nos pages et ajouter des animations¢ JavaScript: Pour dynamiser nos applications et les connecter aux bases de données Avec lonic, on développe en HTML, CSS et JS Avec Flutter, 98% de votre application sera codée en Dart, qu'il s'agisse de la partie design ou de la connexion a vos bases de données Firebase. C’est a la fois un avantage et un inconvénient, car dans le cas des langages web cela facilite 'apprentissage au début. Le langage HTML par exemple est trés facile a prendre en main, et on peut progressivement styliser nos pages avec le CSS puis les dynamiser avec le Js. Avec Flutter et Dart c’est différent, on doit obligatoirement comprendre et maitriser le Dart pour afficher du contenu. Llavantage est qu'une fois le Dart maitrisé, on peut tout coder avec ce meme langage jusqu'a la fin du développement de notre application Nous allons maintenant parler plus en détail du SDK du Dart dont je vous laisse le site web: https://dart.dev/ 3.2 Le SDK DartTout comme Flutter, Dart est proposé par Google sous forme de SDK & télécharger et installer sur votre machine. ll se télécharge automatiquement avec |'installation de Flutter sur votre ordinateur. Nous détaillerons les étapes d’installation sur Mac et Windows dans les prochains chapitres. Celui-ci contient toutes les bibliothéques Dart que nous utliserons pour développer nos applications. 3.3 Quelques exemples du Dart Reprenons quelques exemples de code Dart pour comprendre les spécificités de ce langage. Ces exemples sont tirés de la documentation de Google sur le site https://dart.devi#try-dart. On commence avec la traditionnelle fonction Hello Word qui permet d’afficher ce texte dans la console: main() Le langage Dart a toujours besoin d'une fonction principale main() pour exécuter le reste de son code. On retrouvera ainsi pour chacun de nos codes Dart une unique fonction main() qui appelle d'autres fonctions a son tour. Ici on utilise la fonction d'affichage print() pour afficher dans la console le message: “Hello, World!" On peut également afficher afficher d'autres chaines de caractéres avec une simple fonction print(): main()print(‘cat ' + ‘dog'); Pras triple quoted strinj ET vast On utilisera généralement cette fonction print() pour afficher ou récupérer des informations & certains endroits de notre code pour vérifier son bon fonctionnement On peut également déclarer des constantes et les intégrer A notre fonction print() avec la syntaxe $constante: void main() Ora ae ue Seer print(‘tau is $4 On finit par voir un exemple de déclaration de fonction en Dart pour afficher un nombre dans la console: void printInteger(int aNumber PSG eee ae void main() Pee eae PSUsttet Crue On déclare la fonction printinteger() en lui indiquant le type de paramétre a prendre (ici int représente les variables de types nombres) Ensuite dans notre fonction main(), on peut faire appel a cette fonction printinteger() en lui indiquant un parametre de type nombre4. Installer Flutter sur macOS Dans ce chapitre, nous allons voir comment installer le SDK Flutter sur votre Mac de AaZ. Une distinction est faite entre les systémes d’exploitation, car les méthodes de téléchargement sont différentes entre Mac et PC. Sur MacOS, vous avez la possibilité d’Installer Xcode et Android Studio et vous serez donc capable de développer pour iOS et Android. Sur Windows le logiciel Xcode d’Apple n'est pas disponible et vous ne pourrez pas développer ou publier sur iOS Vous pouvez néanmoins faire par exemple tourner une machine virtuelle sur votre PC avec MacOS. Passons maintenant aux étapes d’installation de Flutter sur MacOS dont je vous laisse la documentation: https://flutter.dev/docs/get-started/install/macos 4.1 Installer le SDK Flutter Commencez par télécharger le fichier ZIP contenant tout le SDK Flutter a installer sur votre ordinateur: https://flutter.dev/docs/get-started/install/macos#get-sdk Get the Flutter SDK 1. Download the following installation bundle eet the latest stable release of the Flutter SDK For other release channels, and older builds, see the SDK archive page. Nous allons reprendre toutes les étapes de I'installation et suivre au maximum les conseils que propose la documentation de Flutter. Ainsi, je vous invite 4 créer comme il le recommande un dossier “development 4 la racine de votre session utilisateur:eee F sslaotsosso < G=o2 ss a en if & O Tatéchargerents: Se ue [een meen vn aoe A Applications tm () [6] [Sl Par exemple dans le dossier de ma session “drissalaoui-sosse’, je crée le dossier development. Ce nouveau dossier development contiendra le SDK de Flutter ainsi que toutes vos futures applications Flutter. Pour installer définitivement le SDK Flutter sur votre Mac nous allons utiliser le Terminal, cherchez donc le logiciel sur votre Mac et ouvrez-le: Une fois ouvert votre terminal devrait s’ouvrir au dossier racine de votre session utilisateur:e ‘ drsslaou-sons Vous pouvez ensuite vous rendre dans le dossier development que vous devriez avoir créé précédemment: Une fois situé dans le dossier development dans votre terminal, nous allons pouvoir dézipper le fichier télécharger sur le site de Flutter. Vous pouvez le dézipper manuellement ou utiliser a commande suivante pour dézipper le fichier flutter_macos_2.2.3-stable.zip (attention le nom du fichier change avec les versions) rat ea tac Prenez soin auparavant de situer votre fichier zip dans le dossier development. Voila pour installation du SDK Flutter, nous allons maintenant faire en sorte de le configurer pour un fonctionnement optimal. 4.2 Configurer le SDK Flutter Nous venons donc d’installer le SDK Flutter sur notre Mac, nous avons ainsi accés aux commandes Flutter pour créer de nouvelles applications par exemple. Néanmoins, nous avons besoin de configurer adresse de notre SDK pour quill soit accessible partout sur notre Mac.Le SDK se trouve précisément dans le dossier bin de notre dossier flutter, nous allons donc stocker dans notre Mac l’'adresse exacte de ce dossier. On utilise la commande pwd pour trouver ‘adresse compléte du dossier flutter/bin Vous pouvez ainsi utiliser les commandes ci-dessous pour déclarer et afficher cette nouvelle adresse: Cy Uopa ay Copiez et mettez l’adresse affichée par le terminal de c6té pour pouvoir la réutiliser plus tard Je vais vous proposer deux méthodes pour déclarer votre variable globale d’accés au SDK Flutter. 4.2.1 Méthode 1: zsh (recommandée) Je commence par vous proposer la méthode la plus récente, qui utilise Vinterpréteur de commande zsh pour Mac. Dans la vidéo, je vous montre 'exemple avec I'interpréteur bash, le principe est le méme sauf que le zsh est le successeur de bash. Reprenez votre terminal et entrez la commande: Dans le fichier qui s'affiche dans votre terminal, vous allez pouvoir déclarer adresse du SDK Flutter et pouvoir ainsi y accéder depuis tout votre ordinateur. Reprenez donc I’adresse de votre dossier flutter/bin et déclarez la variable suivante: Voila par exemple ce que donne le rendu de mon fichier zshre:Sa a SEY STC PETS se/developnent/flutter/bin" eee Pour quitter I’édition du fichier, entrez: Puis tapez dans le terminal les caractéres suivants pour quitter et enregistrer votre fichier: Cette commande (write and quite) vous permet de bien enregistrer votre fichier, devrait étre visible en bas de votre terminal fese drissalaoul-sosse — vim zshre — 83x13 mag eT STE SOY EYES Pes tats Une fois revenu a votre terminal habituel, n’oubliez pas de REDEMARRER votre logiciel avant de tester que la méthode zsh a bien fonctionné. Pour tester que votre variable PATH a bien été mise a jour, vous pouvez entrez la commande suivante pour ’afficher: Cras UEVous pouvez aussi tester par exemple la commande flutter doctor pour vérifier si la commande flutter est accessible (ne faites pas encore attention au résultat de la commande) Je vous montre maintenant la deuxiéme méthode, que jutilise dans la vidéo pour ceux que ¢a intéresse 4.2.2 Méthode 2: bash (utilisée dans la vidéo) Si vous le souhaitez, vous pouvez aussi conserver la méthode bash, qui est similaire, mais moins recommandé pour Mac a ce jour. Nous allons utiliser le fichier bash_profile pour stocker cette adresse de maniére définitive. Entrez les deux commandes suivantes pour créer puis ouvrir le fichier bash_profile (vous devez vous trouver dans votre dossier racine utilisateur): Fee asa Ae ese Un document texte vierge devrait s'ouvrir, vous pouvez alors lui entrer la ligne de code suivante: CHEE reas 2a Enregistrez ensuite votre fichier texte et quittez ’éditeur TextEdit, entrez ensuite la commande source suivante pour appliquer les modifications. Vous pouvez ensuite tester par exemple la commande flutter doctor pour tester si la commande flutter est accessible (ne faites pas encore attention au résultat de la commande)On passe maintenant a |a configuration de Xcode et du lancement de notre émulateur d'iPhone. 4.3 Configuration de Xcode Nous allons maintenant installer le logiciel de développement d’Apple Xcode pour accéder aux émulateurs d’iPhone Vous pouvez télécharger Xcode gratuitement en vous rendant sur le Mac App Store: https://apps.apple.com/fr/app/xcode/id497799835?mt=12 Xcode 31 doe wea Ned 4+ Nouveautés Htoraue Xcode 118 supports developing apps for 10S 13.6, Pad0S 136, 10S 13.4, watchOS 62, and macoS va Catalina 10156 suite Apergu Xcode est un logiciel assez volumineux qui demande chaque année une mise a jour. Votre version de MacOS doit aussi étre a jour pour permettre a Xcode de vous faire utiliser les dernigres fonctionnalités d’i0SSi ce n’est pas déja fait, mettez donc a jour votre version de MacOS et installer Xcode. Une fois le logiciel installé sur votre Mac, entrez les commandes pour configurer Xcode sur votre terminal: Cee VSL i eae Le mot clé sudo vous indique que vous devez entrer votre mot de passe dans votre terminal pour valider cette action. Une fois ces deux commandes entrées vous pouvez lancer un premier simulateur d’iPhone 8 avec la commande open: Vous pouvez changer d’appareil iOS en fait un clique-droit sur licdne de votre émulateur dans dock et sélectionner par exemple un iPhone 11. Omron Voila donc le résultat de votre émulateur iOS qui fonctionne et avec lequel nous allons pouvoir tester nos applications Flutter. Si vous eréez une premiére application rapidement et la lancer dans votre émulateur, entrez les commandes suivantes:Nous détaillerons ces étapes dans un autre chapitre 4.4 Configurer Android Studio La configuration d'Android Studio est plus rapide, mais pas moins technique que pour Xcode Je vous invite encore une fois a vous référer en paralléle a ce chapitre ala documentation de Flutter: https://lutter. dev/docs/get-started/install/macos#android-setup Vous pouvez notamment commencer par télécharger Android Studio sur Mac a cette adresse: https://developer.android.com/studio android studio ‘Android Studio provides the fastest tools for building apps on every = Lancez ensuite le fichier téléchargé pour démarrer l’installation d’Android Studio. f Android device Vous devriez voir également les différentes SDK supplémentaires qui vont étre installés par la méme occasion. Une fois installé, lancez Android Studio une premiére fois et ouvrez les paramétres SDK Managers:eo ‘Welcome to Android Studio Ly Fog — ‘System re. Android Studio acy | +k Start a new Flutter project eee: | 1 open an existing Andrei Suc project a \f Get from Version Control denise { impo prlect (cradle, Eclipse ADT te) cas (of Import an Android code sample a coop Preferences latest Android SDK, Android SDK Command line Tools, and AnGrON piocing are requited by Flutter when developing for Android Defauit Project Structure Run Configuration Templates for New Projects Import Settings 3t up your Android device Expor Settings Settings Repository stepare to run and test your Flutter app on an Android device, you ney ComBress Logs and Show in Finder Edit Custom Properties. Edit Custom VM Options Sieiiw leds Vous pouvez de cette maniére vérifier la présence du SDK Android Build Tool ainsi que du Android emulator que nous allons utiliser.Appearance a Wehavior » System Settings » Android SOX ~ Appesrance 8 Behavier anager ore dred SOK and Teele uted by Anais Sto ‘apearance Anarlé SDK Location: /Userseisnaou-rsse/bray/Anroa/sdk Gi Optimize ck 208 system satings DateFormat Android SOK Bui Toots naa TNDK sie by see) Netinea android SOX Commane-tne Tale tee) Netineaeg = Janet tse : ive Noutiestions. | Android Auto Desktop Head Unit emulator u [Not installed ees narod ema wom ncaa nv ana sox ride Tet soos inanea Pine | Google Play services “0 [Not installed a, Semen Reetepeeas | Google Web Driver 2 [Not installed 2 ore | staller sur Si jamais il manque un des outils ou SDK, cochez-le pour votre Mac. Passons maintenant a la configuration d'un premier émulateur Android, pour cela ouvrez le menu AVD Manager:ee Welcome to Android Stusho yougRg Android Studio fun fun Update: + Start a new Android Studio project Petia: -& sur a new Flatt pcect — te opan an esting Android Stale proect setup ¢ Get from Version Control = [® Profile or debug APK ‘simple F 1 impo an Ando code same 9 SOK Manager — sett Plugins Detault Project Structure displays the default canvas for your selected OS version and devic un Configuration Templates for New Projects In Android Virtual Device Manager, click Run in the toolbar. The ert Import Settings Export Settings Settings Repository eb setup Compras Loge ana how in Finer ee. Liinterface vous proposera lors de créer un nouvel appareil virtueleoe Android Virtual Device Manager Nol ATE PLS ot 1) FR soaroia studio CoO LJ & Virtual devices allow you to test your application without having to own the physical devi + Create Virtual Devi To prioritize which devices to test your application on, visit the Android Dashboards, where you can get, up-to-date information on which devices are active in the Android and Google Play ecosystem. Sélectionnez dans la catégorie Phone le modéle de votre choix, par exemple un Pixel 2 de Google: Cc WesrOS—Pixlan Bsa" 080s. 440d Demy 36dInstaller et télécharger la derniére version d’Android OS sur cet émulateur pour terminer la configuration de cet appareil. Une fois I’émulateur Android téléchargé et installé, il devrait apparaitre dans le tableau de vos machines virtuelles Vous pouvez cliquez sur le bouton Play pour lancer cet émulateur Android. aCe Ur) PLN Cel1) yo Wr Type Name Play Store Resolu... APl_— ‘Target’ CPU/ABI Size... Actions So sce 2 + Create Virtual Device. s Un Pixel 2 devrait donc apparaitre sur votre Mac, dans lequel nous allons pouvoir lancer notre premiére application Flutter. Reprenez votre terminal et entrez la commande suivante pour repérer d'éventuels problémes a corriger: Si vous n’avez pas encore créé d’application Flutter, vous pouvez en créer une rapidement et la lancer dans votre émulateur Android avec les commandes suivantes:Votre application Flutter devrait ainsi se lancer dans un Pixel 2 avec l'apparence et le design d'une application Android classique Voila pour installation de Flutter sur votre Mac. 5. Installer Flutter sur Windows Dans ce chapitre nous allons voir comment installer Flutter sur un PC Windows. La procédure est légérement différente que sur un Mae, notamment en ce qui concerne la déclaration des variables d’environnement. En ce qui concerne Android Studio le logiciel est identique sur Windows et Mae donc pas de différence majeure ce niveau-la En revanche sur Windows vous n’avez pas accas au logiciel Xcode et donc au développement sur iOS Vous ne pourrez pas tester vos applications sur un émulateur d’iPhone ou diPad. Pour cela vous devrez soit installer MacOS sur votre PC ou le faire tourner sur une machine virtuelle avec un logiciel adapté 5.1 Installer le SDK Flutter sur WindowsPour commencer nous allons télécharger et installer le SDK Flutter sur notre PC Windows. Vous pouvez vous rendre sur le site de Flutter pour télécharger la dernire version du SDK: https://flutter.dev/docs/get-started/install/windows#get-the-flutter-sdk ¢ Get the Flutter SDK 1. Download te following installation bundle to get the latest stable eleaseof the Flutter SDK: For other release channels, and older bul 1 the SDK archive page 2. Extract the zip le and place the contained flutter inthe desired installation location forthe Flatter SDK (for example,c:\ero\ Flutter; do not install Flatter in a dtectry ke C:\Program F160\ that requites elevated privileges) If you dort want o install a fixed version of the instalation bundle, you can skip steps 1 and. Instead get the source code from the Flutor sepa on GitHub, and change branches or tags as needed. For example srogit clone hitps://github.com/flutter/flutter.git -b stable 0 ‘You ae now ready to run Flutter commands in the Fitter Console Vous pouvez également utiliser la commande git si vous I'avez installé sur votre ordinateur pour télécharger la demiére version du SDK Flutter. Je vous invite quelle que soit la méthode que vous utilisez, de placer le SDK Flutter dans un nouveau dossier “development" Pour créer ce nouveau dossier a la racine de votre session utilisateur, ouvrez le logiciel “Console” ou “Invite de commande". Une fois ouvert, entrez la commande mkdir pour créer le dossier development et start pour l’ouvrir dans votre explorateur de fichier. CF CASTS start develcUne fois que ce dossier development est ouvert, je vous invite a transférer le contenu dézippé du SDK Flutter dans ce nouveau dossier. Maintenant que votre SDK Flutter se trouve dans votre dossier development, vous pouvez vous rendre dans le sous dossier flutter/bin: CR CNT ues tat yt Crest en effet dans ce sous-dossier que se trouve notre commande flutter qui nous permettra de créer et déployer nos applications. Vous pouvez par exemple tester la commande d’analyse “flutter doctor” qui vous indique si tout est bien installé sur votre ordinateur. Pour le moment, la console devrait vous indiquer absence du SDK Android ‘sur votre PC. 5.2 Configurer le SDK Flutter sur Windows Nous sommes donc capables d'utiliser la commande Flutter et accéder a tout le SDK. Mais pour l'instant, nous ne pouvons le faire qu'en nous rendant dans ce sous-dossier bin.Nous pouvons déclarer et mettre a jour nos variables d’environnements pour pouvoir accéder 4 la commande Flutter depuis n’importe ou. Pour cela, tapez dans la barre de recherche Windows “env’ et cliquez sur le résultat “Modifier les variables d’environnement': & fh @ {Modifier es variables dewviromement systeme . Parametres © Motifier les variables d'envirSgnenent Envoyer ou recevoir un fiehier > Autoriser fenvo) dinvtations assistance a distance & partir de cet ordinateur Rechercher sur le Web 2 ew i Dessiers t+) Une fois le panneau de configuration ouvert, cliquez sur le bouton “Variables d’environnement’ en bas de la pagePropriétés systeme Nom de fordnateur Matériel Pecamétres systéme avancés Protection du systéme _Ulisaion & distance Yous devez ouvr une session d'administrateur pour effectuer a plupart de ceo medications, Performances Effetsvisuels, panifieation du processeur, ui smémoie vrtuolle isation de la mémoire et Paramates: Prof des utisateurs Peremétres du Bureau liés 8 votre connexion Poramétres. Demarrage st récuperation Infomations de démarage du systéme, de défallnce cu sysibme ot de dabogage Parametes. ok ‘Annuler | Appllauer Il devrait alors vous afficher les variables d’environnement, déja présentes sur votre PC. Sila variable PATH ou Path existe di mettre jour. cliquez dessus et sur Modifier pour la S| elle n’apparait pas encore, cliquez sur “Nouvelle”Variables denvironnement x \Vanableutileteur pour Dries Variable Valeur Teme AUSERDROFILES\AppDatallocal Temp TP ‘AUSERPROFLE™\AppDaia\ Local Temp a Ea Variables systeme Variable \aleur ppeRoat o Comspee CAWindows\systems2\emd exe NUMBER_OF PROCESSORS 4 Fath Program Files (xt6\itehVCLS Client\C’\ Program Files\ntl. pxrHext (COM, XE: BAT, CMD: VBS: VBE-JSJSE.WSF.WSH-MSC PROCESSOR ARCHITECTURE AMO64 PROCESSOR IDENTIFIER _Intel64 Family 6 Model 7 Stepping 3, Genuinerte! Nowell. Madifier. _Supgrimer OK | Annular Indiquez alors le nouveau de votre variable “PATH” et donnez-lui 'adresse de votre répertoire flutter/bin de votre disque: Nouvelle variable utilisateur x Nom de la variable : PATH Velour dela viable: [CAUsers\Driss\development\utten Darcourirle répertoire...Parcourir le fichier Annuler Cliquez ensuite sur OK et fermer votre panneau de configuration et RELANCER votre terminal, Lorsque vous entrerez la commande suivante echo suivante:Votre console devrait vous afficher toutes les variables d’environnement de votre PC. Elles sont séparées par des point virgules et la derniére devrait étre 'adresse de votre SDK Flutter flutter/bin. Vous avez donc normalement accés a la commande Flutter depuis tout votre PC pour créer par exemple de nouvelle application 5.3 Configurer Android Studio Pour terminer nous allons maintenant installer et configurer le logiciel de développement Android Studio: https://developer android. com/studio android studio Android Studio provides the fastest tools for building apps on every type of Android device. La procédure d'installation est la méme que pour Mae, et elle est classique done pas d'inquiétude a ce niveau-la. Une fois que le logiciel Android Studio est téléchargé et installé, ouvrez-le une premiére fois.on \Wolome to #ndoid stud ay 20g Android Studio pid + Starta new Andeid Stuto project 4: Stata new Futter projet, | Open an exsting Andre Studio project Profle or debug AK | \ Impot project (Grae, Elise ADT, ete) impos an Android cose sample ‘Avo Manager in TAREE SR RTS COREE VO AR 2t up your Android device Exot Setngs -epte oro antes our ter pp onan Aroidevice, you ney ConTe Legrand own Finder Sur le bouton Configure, cliquez sur SDK Manager pour verifier la présence de tous les SDK dont nous allons avoir besoin par la suite Nous utiliserons Android SDK Build-Tools, Android Emulator et Android SDK Platform-Tools.sopenine 4 Seba Sytem tings» And 806 nine Siope ray mance bs recationDeolonent S'il en manque un, cliquez dessus et installez-le pour étre a jour. Ensuite revenez sur I'écran d'accueil d’Android Studio et cliquez cette fois-ci sur AVD Manager:oe Welcome io fndrid ud 7aug oe on Android Studio aah + Stata new anaros Stuse proect “Starts new Fut peioet © Openan exsng André Studie project Get from Version Control a = LF Import project (Or Eslipse ADT, etc.) pel Fimoed an André code anole _ ES otsox we - -- a entered mane oe lected 0S version end deve Run Configuration Templates for New Projects: cous Sor sings , Soares eb setup Sete a clwinraee fest Cusiom Pripertin fat Canon Opn SS: In Android Vital Device Manager click Run inthe toolbar The en Aispays the default canvas for your Crest le gestionnaire des émulateurs Android (Android Virtual Device: qui nous permettra de les lancer ou d’en créer de nouveaux. \VD) Vous pouvez donc cliquez sur “+ Create premier émulateur Android: ual Device” pour créer notreone Android Virtual Device Manager RCo Mla stem PAU) FPR sodroia stuai OO LJ] & Virtual devices allow you to test your application without having to own the physical devices, [+ create Virtual Devi. To prioritize which devices to test your application fn, visit the Android Dashboards, where you can get Up-to-date Information en which devices are active Inthe Android and Google Play ecosystem. Sélectionnez ensuite le modéle d’Android que vous souhaitez reproduire, personnellement je conserve le choix du Pixel 2 proposé par défaut: Siac Ea = oo" =| _ ee mo D et = Installez ensuite la derniére version d’Android et valider toutes les étapes de la création votre premier émulateur. Une fois créé, il devrait apparaitre dans votre tableau de bord, vous n'avez plus qu’a le lancer en cliquant sur ’icéne play:Noted E IMD L-\ (ot PR rosea sucio TypeName Play Sore Resols.. AP Taiget CPUIABL saw 0. Actons inion Se ee 2 + Cieate Virtual Devi 3 Pendant que votre émulateur Android s’ouvre et se charge correctement, ouvrez a nouveau votre console Windows. Rendez-vous dans votre répertoire de développement: Puis créez votre nouvelle application Flutter avec la commande flutter create my_app Un nouveau dossier devrait apparaitre dans votre répertoire development, contenant tout le code de votre application Flutter. Avant de lancer votre application dans I'émulateur Android, exécutez une derniére fois la commande: Pour repérer d’éventuelles erreurs du SDK, dans mon cas, je devais encore accepter les conditions d'utilisation du SDK d’Android, j'ai donc di entrez la commande suivante:Une fois toutes les conditions d'utilisation acceptées, vous pouvez lancer la commande run pour lancer votre application: Patientez quelques instants pour voir votre application se lancer dans votre émulateur Android Voila pour stallation de Flutter sur Windows. 6. Configurer Visual Studio Code Dans ce chapitre, nous allons voir comment installer et configurer I'éditeur de code Visual Studio pour créer nos applications avec Flutter. Flutter propose en effet différentes solutions pour développer avec Dart et Flutter, j'ai choisi d'utiliser Visual Studio Code, car le logiciel est disponible sur toutes les plateformes Mac et PC.Nous verrons ensuite comment créer une nouvelle application Flutter en partant de zéro et 'ouvrir dans votre émulateur iOS ou Android depuis Visual Studio Code (VSC). 6.1 Installer et configurer Visual Studio Code Flutter propose une page consacrée a la configuration d'un éditeur de code https:/flutter. dev/docs/get-started/editor?tab=vscode Jai choisi VSC car Flutter y a créé des extensions qui transforment I'éditeur en véritable logiciel de développement trés complet. Nous n’aurons méme plus besoin d’ouvrir Xcode ou Android Studio pour lancer nos applications dans un émulateur. Vous pouvez commencer par télécharger le logiciel VSC depuis le site https://code.visualstudio.com/ Carell Une fois le logiciel installé et lancer sur votre ordinateur, nous allons installer les plugins Dart et Flutter de VSC. Ouvrez le menu des extensions a gauche de votre logiciel, puis tapez dans. la barre de recherche ‘Flutter’. Installer ensuite le premier plugin qui s'affiche qui dois avoir été édité par Dart Code.tic Pas rod Lorsque le plugin Flutter s‘installe, le plugin Dart doit lui aussi étre installé automatiquement. Dans le doute, vérifiez qu'll est bien installé en cherchant le plugin Dart du développeur Dart Code. Maintenant que les deux extensions sont installées, nous allons tester la fonctionnalité la plus intéressante de VSC. Commencez par ouvrir le fichier principal de votre application, le fichier main.dart dans le dossier lib:o , Perea eter ar ae eee Senne fer Maintenant que ce fichier est ouvert, c'est celui-ci que VSC choisira d’exécuter et de lancer dans votre émulateur. Rendez-vous ensuite dans onglet Run de votre menu latéral et cliquez sur “Run and Debug’ VSC devrait vous proposer de choisir un émulateur iOS ou Android selon votre configuration Je choisis de lancer mon application sur un émulateur iOS et i! me lance mon dernier appareil ouvert, un iPhone 11. Aprés un petit temps de chargement mon application s’ouvre dans mon émulateur.Vous avez accés a une série de boutons pour rafraichir manuellement votre application ou bien d’arréter son exécution. Mais normalement dés que vous enregistrez votre fichier main.dart, votre application devrait s’actualiser en direct, voila toute la magie de Flutter! 6.2 Créer une application en partant de zéro Je vous montre & nouveau comment créer une application Flutter en partant de zéro. Lidge ici est de vous montrer la procédure a suivre lorsqu’on utilise VSC pour coder ses applications Flutter. Vous devez comme toujours ouvrir votre terminal et vous rendre dans le dossier “developmment qui contient votre SDK Flutter et vos autres applications Une fois que vous vous trouvez dans ce dossier, vous pouvez entrer la commande “flutter create” pour créer une nouvelle application Flutter avec son nom:Cette étape doit étre effectué depuis votre logiciel Terminal ou Console, et non dans Visual Studio. Vous avez le choix a partir de d'’ouvrir votre nouvelle application dans Visual Studio et de suivre les procédures précédentes pour lancer votre application dans un émulateur. Sinon vous pouvez aussi rester dans votre terminal, vous rendre dans le dossier de votre application et la lancer avec la commande “flutter run’ cama sey) flutter run Sinon je vous conseille de n'utiliser le Terminal ou la Console que pour créer de nouvelles applications, ce qui ne devrait pas arriver si souvent. Ensuite je vous invite a travailler exclusivement avec Visual Studio qui intégre son propre terminal. Cela vous facilitera votre travail de développeur en ayant a ouvrir que le logiciel Visual Studio lorsque vous voulez améliorer votre application