TP1 Flutter Installation Preparation 1

ECUE 335 – Initiation pour la
programmation embarquée
Avec Flutter et Dart
TP1 – Flutter : Installation et
Préparation
Sommaire
3
Sommaire
• Préparation : lien
1. Installation du Flutter SDK sur Windows 10 : lien
2. Installation de Xcode sur macOS : lien
3. Installation du Flutter SDK sur macOS : lien
4. Installation de l’Android Studio sur Windows et macOS : lien
5. Configuration de l’Android Studio sur Windows et macOS : lien
6. Configuration de l’émulateur Android sur Windows et macOS : lien
7. Déploiement d’une application basique sur un émulateur Android : lien
8. Déploiement d’une application basique sur un téléphone réel Android : lien
9. Déploiement d’une application basique sur un iPhone virtualisé : lien
10. Déploiement d’une application basique sur un iPhone réel : lien
11. Extras de configuration et accessibilité : lien
12. Github : importer un projet directement sur Android : lien
Préparation
Sommaire
5
Logiciels nécessaires
• Il vous faudra :
• Flutter SDK (Software Development Kit)
• Version actuelle : 3.16.0
• Cette version inclut le Dart SDK pour la programmation dans ce langage
• Android Studio (ordinateurs sous Windows et macOS)
• Il vous faudra environ 10Go d’espace sur disque pour Android Studio
• Xcode (pour macOS exclusivement)
• Une bonne connexion Internet
• Comptez au moins 2h pour tout installer
6
Remarques
• Le développement des applications Android peut se faire sur
Windows ou macOS
• On utilise notamment Android Studio pour ce développement et ce logiciel
peut être installé sur les deux systèmes d’exploitation
• Par contre, le développement des applications iOS ne se fait que sur
un ordinateur Mac d’Apple
• Une application iOS nécessite le logiciel Xcode, exclusif sur macOS
• Le Xcode impose une « signature » de l’app : de cette manière, Apple peut
s’assurer qu’une app respecte les règles de sécurité et confidentialité d’iOS
• De plus, Apple garde une trace assez précise des développeurs et de leurs
produits
7
1. Installation du Flutter SDK sur

Windows 10
Sommaire
8
Installation du Flutter SDK (Windows)
• Les procédures suivantes sont exclusives du système d’exploitation
Windows
• Les utilisateurs de Mac peuvent aller directement vers la section
suivante « 2. Installation de Xcode sur macOS » [lien]
9
• Pour installer, allez vers le site et cochez l’option « Windows »
• https://flutter.dev/docs/get-started/install
10
• Installez l’exigence qui n’est pas sur Windows 10 nativement :
• Git version 2.X (si déjà installé, vous pouvez sauter cette partie)
11
• Lors de l’installation, il vous faudra choisir un chemin sur votre
machine
• Attention aux consignes : pas d’espace blanc dans le chemin du dossier ni des
dossiers du système (« Programmes » ; « Program Files » ; « Windows » …)
12
• Obtenez la dernière version du Flutter SDK
• https://flutter.dev/docs/get-started/install/windows#get-the-flutter-sdk
• Décompressez le fichier et placez le dossier « flutter » à la racine de votre
disque dur, dans le dossier (créez le dossier s’il n’existe pas encore) :
• C:\flutter
13
• Une fois que Flutter est bien placé sur le chemin, on va l’ajouter dans le
chemin des variables d’environnement
• D’abord, récupérez le chemin vers le dossier « bin » de Flutter
• Normalement c’est : C:\flutter\bin
• Vérifiez où vous avez placé votre dossier
• Une variable d’environnement est une commande globale qui peut être
exécutée sur le prompt / PowerShell à partir de n’importe quel dossier
• https://fr.wikipedia.org/wiki/Variable_d%27environnement
• Pour y accéder :
• Bouton Démarrer >> Paramètres >> Système >> À propos du
système >> Paramètres avancés du système associé
(Informations Système).
14
• Cochez « Paramètres
système avancés »
15
• Sur l’onglet « Paramètres
système avancés », cochez
« Variables
d’environnement »
16
• Nous allons modifier la variable
utilisateur « Path »
• Cette variable indique le chemin
dans le système de tous les
exécutables que nous voulons
mettre « globaux ».
• Donc, sélectionnez la variable
« Path » et cliquez sur
« Modifier… ».
• Attention : on ne veut pas changer
les « variables système ».
17
• Cliquez sur « Modifier ».
• Vous pourrez par la suite changer
la ligne contenant tous les
chemins d’accès aux variables
d’environnement de Windows.
• Ajouter le chemin de votre dossier
« bin » de flutter séparé par un
point-virgule à la fin de la ligne.
• Ne laissez pas d’espace blanc autour
du point-virgule.
• ;C:\flutter\bin
• Finalisez sur « OK ».
18
• Testez sur le prompt !
• flutter --version
• Si vous avez une sortie, donc tout est bon !

19
• Testez !
• flutter doctor
Ce test doit marcher.
Les autres tests

normalement vont échouer,
mais ce n’est pas grave : on
va configurer les outils
nécessaires par la suite.
20
2. Installation de Xcode sur

macOS
Sommaire
21
Installation de Xcode sur macOS
• Cette section ne concerne que les utilisateurs sur macOS.
• Nous allons installer les outils nécessaires pour pouvoir coder sur
macOS et émuler un iPhone.
• Si vous travaillez sur un ordinateur Windows, malheureusement il
n’est pas possible de tester les codes ni sur un iPhone virtualisé ni sur
un iPhone réel (restrictions d’Apple).
22
• Xcode : installez directement à partir de l’App Store de votre Mac.
• Comptez au moins 10 Go supplémentaires d’espace nécessaire pour
l’installation de Xcode.
• Après l’installation, ouvrez l’application Xcode.
23
• À la première fois, vous devez
consentez avec beaucoup de
choses avant d’utiliser Xcode.
• Acceptez tout si vous voulez
utiliser Xcode.
• Si Xcode demande l’installation
des outils extras, acceptez-les
également.
24
• Vous devez installer les « command
line tools » de Xcode
• C’est un ensemble de commandes du
Terminal pour émuler un UNIX, ainsi
que pour installer les compilateurs du
Mac
• Pour cela, allez sur terminal et tapez
les commandes suivantes
• xcode-select --install
• Suivez les instructions sur l’écran.
25
iOS Simulator
• Avec Xcode, vous avez installé
l’application Simulator.
• Pour la lancer :
• Utilisez Spotlight (l’outil de
recherche de Mac) pour trouver
« Simulator »
• Lancer via Terminal avec la
commande :
open -a Simulator
26
iOS Simulator
• Voici l’interface du simulateur
• Vous pouvez choisir la version
souhaitée de l’iPhone / iPad /
watchOS / tvOS dans le menu :
• File >> Open Devices
• Vous pouvez réduire la taille du
téléphone en sélectionnant les
extrémités et en les glissant.
• Le simulateur prend beaucoup de
temps pour initialiser à la première
fois lancée.
• Soyez patient !
• Une fois terminés tous vos tests,
installez Flutter sur macOS (lien)
27
3. Installation du Flutter SDK sur

macOS
Sommaire
28
Installation du Flutter SDK (macOS)
• Les procédures suivantes sont exclusives du système d’exploitation
macOS.
• Vous devez installer Xcode avant de poursuivre l’installation de
Flutter (lien).
• Les utilisateurs de Windows peuvent aller vers la section « 1.
Installation du Flutter SDK sur Windows 10 » [lien]
• Les utilisateurs de Windows ayant déjà installé le Flutter SDK peuvent aller
directement vers la section suivante « 3. Installation de l’Android Studio sur
Windows et macOS» [lien]
29
• Pour installer, allez vers le site et cochez l’option « macOS »
• https://flutter.dev/docs/get-started/install
30
• Vérifiez les exigences d’installation :
31
• Si votre ordinateur Mac possède un processeur du type Apple Silicon,
vous devez installer l’environnement de traduction Rosetta d’Apple
sur Terminal.
• sudo softwareupdate --install-rosetta --agree-to-
license
• Si votre processeur est Intel, la commande ci-dessus est inutile.

32
• Obtenez la dernière version du Flutter SDK
• https://flutter.dev/docs/get-started/install/macos#get-sdk
• Décompressez le fichier et placez le dossier « flutter » dans le dossier (créez
un dossier « flutter » s’il n’existe pas ou avec un autre nom) :
• /Users/MyUser/flutter
• Cela est important : pas d’espace blanc dans le chemin du dossier !
33
• Une fois que Flutter est bien placé sur le chemin, on va exporter le
chemin du binaire exécutable pour l’utiliser dans toute la machine.
• D’abord, récupérez le chemin vers le dossier « bin » de Flutter
• Normalement c’est : /User/MyName/flutter/bin
• Vérifiez ou vous avez placé votre dossier.
• Lorsque vous exportez une variable, elle devient accessible partout
dans votre machine.
• Cela permet l’exécution plus simple des programmes.
34
• Pour exporter, ouvrez le Terminal et identifiez quel type de shell vous
utilisez (placez-vous dans votre dossier HOME : en tapant « cd .. »)
• echo $SHELL
• Le résultat sera bash ou zsh (si différent, regardez la doc Flutter)
35
• Sur terminal, vous devez éditer un des fichiers suivants, en fonction
de votre shell
• nano .bash_profile (attention au « . » avant le nom à bash)
• nano .zshrc (attention au « . » avant le nom à zshrc)
36
• À la fin du fichier de configuration, ajoutez la ligne suivante :
• export
PATH="$PATH:[PATH_TO_FLUTTER_DIRECTORY]/flutter/bin"
• À la place de [PATH_TO_FLUTTER…], mettez le chemin vers le dossier
« bin » de Flutter comme mentionné précédemment
(/Users/MyName/flutter/bin).
• Enregistrez (sur nano : Control+O et Entrée par la suite).
• Fermez (sur nano : Control+X).
• Regardez un exemple à
37
• Pour incorporer les changements, exécutez la commande adaptée sur
le dossier $HOME:
• source .bash_profile (pour un shell du type bash)
• source .zshrc (pour un shell du type zsh)
• Vous pouvez également fermer le Terminal et le rouvrir : le résultat

est le même.
38
• Testez :
• echo $PATH
• Vous verrez que le chemin vers le dossier « bin » de Flutter est incorporé
dans la variable Path.
• which flutter
• Indique où se trouve la commande « flutter ».
39
• Testez !
• flutter --version
• Si vous avez une sortie, donc tout est bon !

40
• Testez !
• flutter doctor
Ce test doit marcher.
Les autres tests

normalement vont échouer,
mais ce n’est pas grave : on
va configurer les outils
nécessaires par la suite.
41
4.Installation de l’Android
Studio sur Windows et macOS
Sommaire
42
Outils à installer
• Il nous faut un environnement de programmation pour Flutter.
• Plusieurs options :
• Android Studio (solution retenue)
• VS Code
• Atom
• Sublime Text
• IntelliJ IDEA
• Nous gardons Android Studio pour la simplicité :
• C’est plus facile de tourner l’émulateur de téléphones Android.
• Plus simple pour obtenir les dernières versions d’Android.
• Problème : il vous faudra au moins 10Go d’espace disponible dans votre
disque (logiciel, émulateurs, images d’Android, etc.).
43
Outils à installer
• Installation de l’Android Studio (IDE) pour Windows et macOS.
• Integrated Development Environment (IDE) : outil officiel pour le
développement des applications pour Android.
• Outil plus adapté pour développement Android/Java (Kotlin).
• Téléchargement : https://developer.android.com/studio/
• Couramment, on se trouve dans la version Giraffe 2022.3.1 d’Android Studio.
• Attention :
• Le fichier d’installation d’Android Studio est grand (environ 2,8 Go).
• Mais les mises à jour, les images à télécharger, émulateurs de téléphone, etc.,
lors de l’installation sont encore plus grands.
• Prévoyez au moins 2 heures pour compléter cette étape.
44
Installation d’Android Studio
• Lancez votre application Android
Studio.
• N’importez pas des fichiers de
configuration si vous en avez
d’anciennes versions et que
cette option vous est offerte.
45
• Voici l’écran initial d’installation.
• On commencera à partir d’ici.
• Cliquez sur Next.
46
• Nous ferons une installation
personnalisée.
• Cliquez sur Custom.
47
• Commencez par choisir votre
thème (code couleur).
• Fond noir : Darcula.
• Fond blanc : Light.
48
• Cochez l’option « Android
Virtual Device »
• Cela nous permet de lancer nos
émulateurs de téléphone.
• Cochez l’option Android SDK si
disponible.
• Lieu d’installation : laissez-le par
défaut.
• N’insérez pas de caractère spécial
ici !
49
• Vérifiez si les éléments
d’installation sont corrects et
avancez.
50
• Vous devez accepter le Licence
Agreement d’Android Studio
deux fois :
• Une fois pour l’android-sdk-
licence
• Une deuxième fois pour
l’android-sdk-preview-
licence
• Cliquez sur Finish.
51
• La configuration d’Android
Studio et le téléchargement de
l’API se feront maintenant.
• Cela risque de prendre un temps
en fonction de votre connexion et
de votre ordinateur.
• Allez boire un café.
52
• Une fois fini, voici l’écran que
vous trouverez.
• Cliquez sur Finish.
5. Configuration de l’Android
Studio sur Windows et macOS
Sommaire
54
Configuration de l’Android Studio
• SDK Manager : installations
nécessaires pour utiliser
Android.
• Cliquez sur More Actions
pour ouvrir le menu.
55
• Installer une version plus ancienne
d’Android pour des questions de
performance.
• Android Pie 12L (API 32 Sv2) sur SDK
Platforms.
• Vous pouvez conserver la version la
plus récente qui accompagne Android
ou vous pouvez la décocher.
• Il faut compter environ 1 Go d’espace en
disque pour chaque image téléchargée.
• Donc, n’installez pas des versions que
vous n’utiliserez pas.
• Attention : ne cliquez pas encore sur
X « OK ».
56
• Changez vers l’onglet « SDK
Tools » et installez :
• Android SDK Build Tools
• Android Emulator
• Android SDK Platform
Tools
• Android SDK Tools
• Google Play Services
• Intel x86 Emulator
Accelerator (si cette option
existe)
• Après cela, vous pouvez cliquer sur
OK.
57
• Validez les changements si
Android vous en demande.
58
• Attendez les configurations.
59
• Maintenant, on ajoutera le plug-in
Flutter sur Android Studio.
• Sur l’écran d’accueil, naviguez vers
l’onglet Plugins.
• Cherchez sur le Marketplace le
plug-in Flutter.
• Attention : il y a plusieurs plug-ins.
Choisissez la version dont le
développeur est flutter.dev.
• Cliquez sur « Install » et si
l’installation des dépendances est
demandée, acceptez-la et installez
tout.
• Redémarrez Android Studio.
60
• Votre nouvel écran d’accueil doit
afficher l’option:
• New Flutter Project
6. Configuration de l’émulateur
Android sur Windows et macOS
Sommaire
62
Configuration de l’émulateur
• Dans l’écran d’accueil, choisissez
More Actions.
• Ensuite, choisissez Virtual
Device Manager.
• Cet outil nous permettra de
configurer les téléphones et
images Android virtualisés.
63
• Cliquez sur Create Device.
64
• Choisissez Pixel 6a.
• Vous pouvez utiliser d’autres
émulateurs. Mais attention : les
versions plus récentes sont très
consommatrices de mémoire.
• Si votre ordinateur n’est pas très
puissant, installez Pixel 4 ou 5
: il marchera très bien pour nos
exemples.
65
• Sélectionnez la version d’Android
qui sera installée sur le Pixel.
• Sv2 API 32 (onglet
Recommended)
• Si vous voulez, vous pouvez
installer les autres versions.
• Si le bouton Next est gris, vous
devez cliquer sur le bouton de
téléchargement (flèche vers le bas
à côté du nom de l’image).
• Android Studio téléchargera tout
pour vous.
• Cela risque de prendre du temps.
Allez boire un café.
66
• Lorsque le téléchargement de
l’image est conclu, cliquez sur
Next.
67
• Donnez un nom à votre
dispositif virtualisé.
• Astuce : le nom par défaut est
assez explicatif. Laissez-le.
• Nom du dispositif + version
d’Android.
• Une fois finalisé, cliquez sur
Finish.
68
• Vous pouvez voir maintenant tous les dispositifs créés !
• Pour le lancer, cliquez sur la flèche : votre téléphone va s’allumer et le
système va se lancer.
69
• La première fois que vous
l’allumez, votre téléphone
prendra du temps à se lancer
• Des configurations seront faites,
soyez patient !
70
• C’est un téléphone !
• Vous pouvez utiliser les apps
standard comme dans un Ixel
(votre doigt est remplacé par la
souris).
• Essayez le Google Maps.
• Jouez un peu !
• Essayez les boutons du panneau à
droite : ils émulent les boutons
physiques de votre téléphone.
71
• Remarquez l’augmentation de l’espace utilisé en disque.
• Le fait de lancer le téléphone exige l’installation des apps standards d’un
Android et cela consomme de l’espace.
• Au fur et à mesure qu’on ajoute nos apps, cette consommation augmentera.
• Vous pouvez effacer les données et remettre votre téléphone aux
configurations d’usine sur la flèche vers le bas et ensuite « Wipe Data »
7. Déploiement d’une
application basique sur le
téléphone Android émulé
Sommaire
73
Déploiement sur un téléphone émulé
• Sur Android Studio, créez une
nouvelle application Flutter.
• New Flutter Project.
74
• Naviguez vers l’onglet latéral
Flutter :
• Assurez-vous que le chemin du
Flutter SDK pointe bien vers le
dossier où vous avez installé
préalablement votre distribution
Flutter.
• Ensuite, cliquez Next.
75
• Configurez :
• Donnez un nom (par exemple
testing_app).
• Vérifiez que le dossier par défaut où
tous vos projets seront stockés
s’appelle StudioProjects.
• Astuce : créez un dossier dédié à tous
les projets qu’on créera dans ce cours.
Sinon, laissez le dossier par défaut.
• Laissez les configurations par défaut.
• Pour l’instant, vous créerez une
application pour toutes les
plateformes. Après, vous ciblerez la
plateforme de votre choix.
• Cliquez sur Create.
76
• Votre interface
• Il y aura un fichier main.dart ouvert.
• Si le message « Android SDK « Android API XX Platform » is

missing » s’affiche, vous pouvez cliquer sur le lien Configure… à droite
et sélectionnez l’API disponible.
77
• Les détails du code sur
main.dart et les autres
composants de l’interface seront
vus prochainement.
• On ne va que déployer cette
application de test à partir des
boutons au coin haut à droite.
78
• Choisissez le dispositif sur lequel
on déploiera le code.
• Dans notre cas, Pixel 6a API 32.
• Cela lancera l’émulateur.
• Astuce : si cela ne s’affiche pas
correctement après les installations,
redémarrez Android Studio.
• Une fois sélectionné, cliquez sur la
flèche verte ou sur le menu Run
main.dart dans votre menu de
navigation.
• Cela déploiera votre code sur le
téléphone (soyez patient dans la
première fois : cela prendra du
temps).
79
• Voici votre application :
• Chaque clique sur le bouton
change le compteur au centre de
l’écran.
• Vous pouvez fermer l’app et
continuez à utiliser votre
téléphone émulé normalement.
80
• Pour ceux qui n’ont pas l’habitude
d’Android :
• Pour ouvrir les pages avec toutes les
applications, cliquez vers le milieu de
l’écran et glissez de bas vers le haut.
• Votre application testing_app
sera affichée et vous pouvez la
relancer.
• Pour revenir à l’écran initial, vous
pouvez glisser de bas vers le haut à
partir du bouton virtuel tout en bas
(le trait gris).
• Vous pouvez aussi cliquer sur le bouton
rond dans la barre de menus à droite.
8. Déploiement sur un
téléphone physique Android sur
Windows et macOS
Sommaire
82
Déploiement sur un téléphone Android réel
• Pour pouvoir déployer une app
sur un téléphone Android réel, il
vous faut autoriser le « mode
développeur ».
• Pour habiliter le mode
développeur, naviguez à :
Paramètres >> À propos
du téléphone
83
• Cliquez 7 fois sur « Numéro de
Build » pour autoriser le mode
développeur.
• Vous pouvez également faire
cela sur votre dispositif émulé (il
faut cliquer 7 fois).
• Attention : l’emplacement de
« Build Number » peut varier
en fonction du modèle de
téléphone et de la version
d’Android.
84
• Les options de développeur sont
habilitées maintenant !
• Vérifiez cela sur Paramètres
>> Système et ouvrez les
options de développeur.
85
• Il faudra autoriser le
« Débogage USB » pour
pouvoir accéder à votre
dispositif
Activer !!!
86
• Lorsque vous connectez votre
smartphone à votre ordinateur,
le message d’avertissement
suivant sera déclenché.
• Il faut autoriser le « débogage
USB »
• À partir de ce moment, votre
téléphone sera accessible sur
Android Studio.
• Attention : il y a des câbles USB
qui ne servent qu’à charger le
téléphone, pas au transfert de
données. Utilisez le câble d’origine
pour éviter ce problème.
87
• Revenez sur Android Studio :
• Choisissez votre dispositif réel
dans le menu et voilà !
• (Il me faut un téléphone Android
pour tester ! =D )
• Si votre téléphone n’apparaît pas,
il faut chercher le driver de votre
équipement pour que votre
ordinateur le reconnaisse
(téléchargez de l’Internet)
• Cliquer sur la flèche verte (« run
main.dart ») pour lancer
l’application sur votre téléphone
physique.
application basique sur un
iPhone virtualisé
Sommaire
89
Déploiement sur un iPhone virtualisé
• Avec Xcode, vous avez installé
l’application Simulator.
• Pour la lancer :
• Utilisez Spotlight (l’outil de
recherche de Mac) pour trouver
« Simulator »
• Lancer via Terminal avec la
commande :
• open -a Simulator
• Si vous n’avez pas de Simulator,
vérifiez que Xcode est bien
installée (lien).
90
• On va répéter les pas de la
section « Déploiement d’une
application basique sur le
téléphone Android émulé »
• Si vous avez déjà l’application
« testing_app », vous pouvez aller
directement sur la partie
déploiement (ici)
nouvelle application Flutter
• « Start a new Flutter project »
91
nouvelle application Flutter.
• New Flutter Project.
92
• Naviguez vers l’onglet latéral
Flutter :
• Assurez-vous que le chemin du
Flutter SDK pointe bien vers le
dossier où vous avez installé
préalablement votre distribution
Flutter.
• Ensuite, cliquez Next.
93
• Configurez :
• Donnez un nom (par exemple
testing_app).
• Vérifiez que le dossier par défaut où
tous vos projets seront stockés
s’appelle StudioProjects.
• Astuce : créez un dossier dédié à tous
les projets qu’on créera dans ce cours.
Sinon, laissez le dossier par défaut.
• Laissez les configurations par défaut.
• Pour l’instant, vous créerez une
application pour toutes les
plateformes. Après, vous ciblerez la
plateforme de votre choix.
• Cliquez sur Create.
94
• Votre interface
• Il y aura un fichier main.dart ouvert.
• Si le message « Android SDK « Android API XX Platform » is

missing » s’affiche, vous pouvez cliquer sur le lien Configure… à droite
et sélectionnez l’API disponible.
95
• Les détails du code sur
main.dart et les autres
composants de l’interface seront
vus prochainement.
• On ne va que déployer cette
application de test à partir des
boutons au coin haut à droite.
96
• Choisissez le dispositif sur lequel
on déploiera le code.
• Dans notre cas, iPhone SE 3rd
generation.
• Cela lancera l’émulateur.
• Astuce : si cela ne s’affiche pas
correctement après les installations,
redémarrez Android Studio.
• Une fois sélectionné, cliquez sur la
flèche verte ou sur le menu Run
main.dart dans votre menu de
navigation.
• Cela déploiera votre code sur le
téléphone (soyez patient dans la
première fois : cela prendra du
temps).
97
• Voici votre application :
• Chaque clique sur le bouton
change le compteur au centre de
l’écran.
• Vous pouvez fermer l’app et
continuez à utiliser votre
téléphone émulé normalement.
• Vous pouvez lancer en parallèle
sur iPhone et Android à partir de
l’Android Studio.
• Attention à la consommation de
mémoire ! Vous pouvez arrêter les
applications sur le bouton rouge.
application basique sur un
iPhone réel
Sommaire
99
Déploiement sur un iPhone réel
• Quelques configurations à réaliser avant de déployer sur un
iPhone/iPad (cette section est exclusive aux utilisateurs de macOS)
• Vous devez avoir un Apple ID (pas nécessairement un compte
développeur, mais un ID traditionnel : le même que vous utilisez pour
télécharger des apps dans votre téléphone).
• Un iPhone ou iPad réels (pas de Apple Watch ni d’iPod).
• Xcode installé.
• Câble USB : il faut avoir un câble de bonne qualité, parce qu’il y a des câbles
qui ne servent qu’à charger et ne transfèrent pas de données. Utilisez si
possible le câble d’origine.
• Maintenant, il y aura 8 pas à réaliser !
100
• Pas 1 : vérifier les versions de
l’iOS et de Xcode
• Normalement, il y a une différence
de 2 versions entre iOS et Xcode
• Au 28/11/2023 : iOS 17; Xcode 15.
• Dans le doute, mettez à jour
Xcode dans l’App Store de votre
Mac.
• Des versions récentes de Xcode
demandent de mises à jour du
macOS. Si c’est le cas, il vous
faudra mettre à jour le macOS
également.
101
• Pas 2 : installez cocoapods
Mac Intel • https://flutter.dev/docs/get-
started/install/macos#deploy-to-ios-
devices
• Exécutez les commandes suivantes sur un
Terminal (Mac Intel).
• sudo gem install cocoapods
Apple Silicon • Exécutez les commandes suivantes sur un
Terminal (Apple Silicon).
• sudo gem uninstall ffi &&
sudo gem install ffi -- --
enable-libffi-alloc
• Cela prendra du temps : patience !
• Message à la fin : « Setup
completed »
• Si la commande « gem » ne marche pas,
il faudra installer Homebrew (prochaine
diapo).
102
• Pas 2 : installez Homebrew (si la
commande « gem » de la diapo
précédente a échouée)
• Si tout a marché avant, sautez cette
diapo.
• Homebrew : logiciel pour installer
des applications par ligne de
commande au terminal
• https://brew.sh/index_fr
• Copiez la ligne mentionnée dans le
site Web et exécutez-la sur le
Terminal. Ensuite, répétez les
commandes de la diapo précédente.
103
• Pas 3 : ajoutez votre Apple ID
sur Xcode
• Lancez votre application
« testing_app » créée dans les
sections précédentes ou créez une
nouvelle application
• Dans Android Studio, naviguez
dans l’arbre du projet et cliquez
sur :
• iOS >> Flutter >> Open iOS
module in Xcode
• Cela ouvrira Xcode.
104
• Pas 3 : ajoutez votre Apple ID sur Xcode
• Voici l’interface de Xcode
• Naviguez vers Runner >> Signing & Capabilities >> Add Account
105
• Pas 3 : ajoutez votre Apple ID sur Xcode
• Vous devez fournir votre Apple ID et mot de passe ici (pour des raisons
évidentes, je ne les ai pas mis sur l’image…)
106
• Pas 4 : sélectionnez votre
« Development Team »
• Dans l’option « Team »
sélectionnez le compte que vous
venez d’ajouter.
• Donnez un nom de paquet (sur
iOS : « Bundle Identifier ») unique
au monde.
• Pour ce test, faites
« com.<votrenom><votreprenom>.t
estingapp »
• Exemple (ne pas utiliser ce nom
d’exemple) :
« com.sacquetbilbon.testingapp »
107
• Pas 5 : autoriser le mode
développeur sur iPhone.
• Attention : cela demande un
redémarrage de votre iPhone.
108
• Pas 6 : branchez votre iPhone
via USB
• La première fois que vous le faites,
il apparaîtra le message
d’avertissement à côté sur votre
téléphone
• Marquez pour faire confiance à
votre ordinateur.
109
• Pas 7 : acceptez le certificat de
développement
• Pour que le certificat soit accepté
et que votre application marche,
lancez-la à partir de Xcode
• Pour cela, il suffit de cliquer sur la
flèche à gauche en haut
• Vérifiez que votre iPhone est bien
identifié à côté de la flèche
110
• Pas 7 : acceptez le certificat de développement
• Si les messages d’erreur suivants apparaissent sur vos iPhone (à gauche) et
Xcode (à droite), on doit accepter le nouveau certificat dans notre iPhone
111
• Pas 7 : acceptez le certificat de développement
• Voici les pas nécessaires pour régler le problème. Naviguez dans votre iPhone
et faites confiance au compte de développeur que vous venez de créer.
112
• Pas 7 : Si le message d’erreur
suivant apparaît :
• Les nouvelles versions d’iOS
n’acceptent que les applications
construites en mode « Profile » or
« Release ».
• Donc, il faudra reconstruire
(« build ») l’app.
113
• Pas 7.1 (dans le cas d’erreur):
• Reconstruire l’app avec l’option
« Product >> Build For >>
Profiling ».
• Relancer l’app dans la flèche
114
• Pas 7 : acceptez le certificat de
développement
• Finalement, relancez sur Xcode
(flèche à gauche en haut) votre
app et tout marchera sur votre
iPhone
115
• Pas 8 : lancez l’app à partir
d’Android Studio
• Cela évite d’utiliser Xcode pour
lancer vos apps
• Vérifiez que Flutter ne présente
aucun problème. Cochez :
• Menu Tools >> Flutter >> Flutter
Doctor.
116
• Pas 8 : lancez l’app à
partir d’Android
Studio
• Voici la sortie de
l’inspecteur Flutter.
• Vérifiez qu’il n’y a
pas d’erreurs sur les
options « Flutter,
Android toolchain,
Xcode, Android
Studio, Connected
Device »
• S’il y en a, ressayer
les pas précédents.
117
• Pas 8 : lancez l’app à partir
d’Android Studio
• Finalement, votre téléphone
apparaîtra dans la liste de
dispositifs disponibles
• Il suffit de sélectionner votre
dispositif et lancer l’app (flèche
verte à droite)
11. Extra : configuration des
apparences d’Android Studio
Sommaire
119
Couleurs
• (macOS) Menu Android Studio >> Preferences >> Appearance and
Behaviour >> Appearance
• (Windows) Menu File >> Settings >> Appearance and Behaviour >>
Appearance
• Vous pouvez changer les contrastes (Light / Darcula / High Contrast)
120
Couleurs
• Light :
• Darcula :
• High contrast :
121
Police de caractères
• (macOS) Menu Android Studio >> Preferences >> Editor >> Font
• (Windows) Menu File >> Settings >> Editor >> Font.
• Changez la taille des lettres : lorsque vous fatiguez, des lettres grandes aident
à éviter les erreurs de frappe
122
Comportement du plug-in Flutter
• (macOS) Menu Android Studio >> Preferences >> Languages & Frameworks >>
Flutter
• (Windows) Menu File >> Settings >> Languages & Frameworks >> Flutter
• Cochez « Perform Hot Reload on save » et « Format code on save » : l’indentation du code
sera ajustée à chaque enregistrement et le nouveau code sera mis à jour sur le téléphone
émule (s’il est déjà lancé)
12. Github : importer un projet
directement sur Android
Sommaire
124
Github
• Imaginez que vous voulez récupérer un projet qui se trouve à distance
sur Github
• Vous pouvez créer un projet local directement à partir du dépôt
distant :
125
Github
• Exemple : clonez le dépôt presque vide suivant
• https://github.com/londonappbrewery/mi_card_flutter sur ce site, récupérez
le chemin du dépôt sur l’onglet « Code »
• C’est probablement quelque chose comme :
https://github.com/londonappbrewery/mi_card_flutter.git
• N’utilisez pas ce lien directement ; récupérez le bon lien sur la page Github.
126
Github
• Sur Android, cliquez sur « Check out project from Version Control »
127
Github
• Dans le menu suivant, l’URL correspond au chemin du dépôt Git qui
vous avez récupéré antérieurement
• Spécifiez également où vous voulez télécharger les fichiers
128
Github
• Ce message vous permet de choisir si vous voulez créer un nouveau
projet :
• « Oui » : Android va générer un nouveau dossier à partir des fichiers
téléchargés (c’est-à-dire, une copie)
• « Non » : Android va utiliser les fichiers téléchargés directement
(normalement l’option désirée). Pour cet exemple, choisissez « Non ».
X
129
Github
• Créez un projet à partir de l’option
• « Open »
130
Github
• Vous pouvez sélectionner l’intégralité du dossier téléchargé et
avancez
131
Github
• Vous pouvez voir maintenant tous les fichiers.
• Si Android vous demande d’installer des bibliothèques, faites-le.
132
Github
• Lancez votre application dans la flèche verte à droite.
• Sélectionnez votre dispositif émulé / réel. Voici l’application :
133
Github – troubleshoot
• Troubleshoot : quelques erreurs récurrentes.
• Device Storage Full : votre dispositif (émulé) est complet. Il faut lancer l’AVD
Manager, sélectionner votre dispositif et dans la flèche à droite cliquez sur
« Wipe Data ».
134
• Problème de version de Flutter : mettez à jour Flutter sur terminal
• ~$ flutter upgrade --force
135
• Error: ADB exited with exit code 1. Performing Streamed Install.
• Pas de solution facile… Normalement il vous faut :
• Soit redémarrer Android Studio
• Soit changer le téléphone émulé =(

TP1 Flutter Installation Preparation 1

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP1 Flutter Installation Preparation 1

Transféré par

Droits d'auteur :

Formats disponibles

ECUE 335 – Initiation pour la

1. Installation du Flutter SDK sur

• Si vous avez une sortie, donc tout est bon !

Ce test doit marcher.

Les autres tests

2. Installation de Xcode sur

3. Installation du Flutter SDK sur

• Si votre processeur est Intel, la commande ci-dessus est inutile.

• Vous pouvez également fermer le Terminal et le rouvrir : le résultat

• Si vous avez une sortie, donc tout est bon !

Ce test doit marcher.

Les autres tests

• Si le message « Android SDK « Android API XX Platform » is

• Si le message « Android SDK « Android API XX Platform » is

Vous aimerez peut-être aussi