Après avoir suivi le cours précédent, vous avez sûrement installé l’environnement de développement Flutter. Dans cette leçon, nous allons développer avec Flutter sur Android Studio.
Installer le plugin Flutter
Par défaut, Android Studio ne prend pas en charge Flutter, il faut donc installer un plugin dédié à Flutter.
Ouvrez Android Studio, puis allez dans le menu supérieur File → Settings (raccourci clavier Ctrl+Alt+S)
Recherchez la section Plugins à gauche, cherchez « flutter », cliquez sur Installer, puis redémarrez Android Studio une fois l’installation terminée.
Configurer le chemin du SDK Flutter
L’installation du plugin ne suffit pas : il faut également indiquer le chemin du SDK Flutter dans Android Studio.
File → Settings → Languages & Frameworks → Flutter
Fichier Paramètres Langages et frameworks flutter
Sélectionnez le dossier racine de Flutter, pas le sous-dossier bin. Cliquez ensuite sur le bouton Apply.
Attendez que l’installation et la configuration se terminent complètement.
Créer un projet
La suite de la procédure est identique à la création d’un projet classique sur Android Studio.
Sélectionnez Flutter, renseignez à nouveau le dossier Flutter sur la droite, puis cliquez sur Next.
Configurez ensuite le nom du projet, son emplacement de stockage, sa description et un identifiant d’organisation unique. Cet identifiant doit être unique si vous souhaitez publier l’app sur le Google Play Store, c’est pourquoi il est recommandé d’écrire votre nom de domaine à l’envers. Par exemple, j’utilise ici com.foxdevelop.nomduprojet. Choisissez ensuite le langage Android : ce n’est pas le langage de développement, mais le langage de l’enveloppe native de l’app Android, vous développerez toujours en Dart. La section Platforms correspond aux systèmes sur lesquels vous compilerez et publierez votre code. Ici, j’ai coché Android, Web et Windows Desktop pour publier mon projet sous ces formes ; cochez iOS, Linux ou macOS si vous visez ces plateformes. Enfin, cliquez sur Create.
Attention : le nom du projet doit être en minuscules, sans espaces ni caractères spéciaux.
Android Studio va alors créer le projet, cela peut prendre un certain temps.
J’ai rencontré cette erreur dans mon exemple.
Cliquez sur Run Flutter Doctor pour lancer l’outil de diagnostic Flutter et vérifier l’environnement.
Ouvrez ensuite le projet normalement.
Cependant, en haut à droite, il est impossible de lancer le projet, le symbole suivant apparaît :
J’ai changé le thème de couleur, c’est pourquoi Android Studio est en mode clair maintenant.
Sur la capture d’écran ci-dessus, on voit une croix rouge, cliquez dessus.
Cliquez sur Modifier les configurations (Edit Configurations).
Un message indique que le SDK Dart n’est pas configuré, cliquez sur Fix à droite.
Il faut configurer le chemin du SDK Dart : si Flutter est installé, le SDK Dart se trouve dans le dossier du SDK Flutter.
Si votre chemin du SDK Flutter est :
alors le chemin du SDK Dart sera :
Configurez le chemin Dart comme sur l’image ci-dessus, puis pensez à redémarrer Android Studio.
Après cela, le triangle vert de lancement apparaît en haut. Si Windows Desktop est sélectionné à gauche, vous pouvez lancer le projet sous forme d’application de bureau Windows ; cliquez sur le triangle vert pour exécuter le projet.
* Résolution des erreurs courantes
Si vous ne rencontrez pas le problème ci-dessous, vous pouvez passer cette section.
Ces erreurs surviennent lorsque les dépendances ne se chargent pas complètement. Si le problème vient du réseau, vous pouvez utiliser un proxy ou configurer un miroir comme ci-dessous.
Si vous rencontrez ces défauts, suivez l’image ci-dessus pour configurer le miroir dans le terminal d’Android Studio.
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter pub cache repair
flutter pub getLangage du code : PHP (php)Après l’exécution de ces commandes, toutes les erreurs disparaîtront.
Lancer le projet
Cliquez sur le triangle en haut à gauche pour lancer le projet. Flutter prend en charge plusieurs plateformes : vous pouvez connecter votre téléphone à l’ordinateur, activer le mode développeur pour déboguer l’app Android, ou utiliser Windows Desktop pour tester sans téléphone.
Comme sur l’image, vous pouvez choisir les trois plateformes sélectionnées lors de la création du projet. Ici je choisis Windows Desktop, puis clique sur le triangle vert pour lancer le projet.
L’image ci-dessus montre notre première application Flutter. C’est la fin de cette leçon, essayez par vous-même. Si vous rencontrez des problèmes, laissez un commentaire ci-dessous.