1. Tutoriel pratique de l'application mobile Flutter [configuration de l'environnement, configuration du simulateur]

I. Aperçu

Flutter est le SDK mobile de Google destiné à aider les développeurs
à développer une interface utilisateur native de haute qualité sur les plates-formes IOS et Android. Un code peut générer simultanément deux applications hautes performances et haute fidélité pour IOS et Android.

2. Mécanisme de rendu

La raison pour laquelle Flutter peut offrir une expérience comparable ou même meilleure que celle native est principalement due à ses capacités de rendu graphique hautes performances.Tout d'abord, comparez les mécanismes de rendu de Flutter avec Android natif et d'autres frameworks multiplateformes (tels que RN ), comme indiqué ci-dessous:

• Lorsque l'application native Android dessine, elle appelle d'abord le code Java du framework Android, puis appelle le moteur de dessin Skia (c/++) et génère enfin des instructions CPU/GPU pour terminer le rendu sur l'appareil ;
• Lorsque Flutter dessine, la page d'accueil appelle le code Dart du Flutter Framework, puis appelle directement le moteur de dessin Skia (c/++), et génère enfin des instructions CPU/GPU pour le rendu sur l'appareil ;
• D'autres frameworks multiplateformes (tels que RN) appellent d'abord le code javaScript de leur framework, puis appellent le code java du framework Android, qui est une couche de plus que le natif. Évidemment, RN n'est certainement pas aussi bon que le natif un.

On peut voir que Flutter et Android sont natifs.Tant que l'efficacité du code Dart de Flutter Framework peut être comparable à celle du code Java d'Android Framework, on peut comprendre que l'application Flutter peut offrir une expérience de performances comparable à celle du natif.

De plus, le moteur de rendu Skia utilisé par Flutter fait partie du SDK Flutter et sera mis à niveau avec la mise à niveau du SDK Flutter. Le moteur de rendu Skia natif doit être mis à niveau avec la mise à niveau du système d'exploitation Android. Par conséquent, l'amélioration des performances de le moteur skia sera affecté et l'application Flutter sera affectée plus rapidement.

3. Configuration de l'environnement

1. Télécharger le SDK Flutter

2. Mettez à jour les variables d'environnement, ajoutez FLUTTRE_HOMEdes variables, la valeur est l'emplacement du package d'installation Flutter et PATHajoutez-le%FLUTTER_HOME%\bin

3. Exécutez-le fluuter doctorpour détecter les logiciels qui n'ont pas encore été installés. Un [X] indique qu'il doit être installé.

4. Installez Android Studio , il sera installé automatiquement pendant le processus d'installation Android SDK. (L'étape 7 est également effectuée dans cet IDE)

5. Ouvrir file>settings, installer Dart, Flutterplug-in
   
   

6. Entrez l'autorisation de licence en ligne de commande : flutter doctor --android-licenses

7. ouvrir file>settings, entrer Android SDK, installercmmmand-line tools

   

8. Modifiez la source et ajoutez les deux variables d'environnement suivantes

   PUB_HOSTED_URL = https://pub.flutter-io.cn
   FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
   

9. Ajouter SDKdes variables d'environnement

//新增系统变量
ANDROID_HOME=C:\Users\SC9535\AppData\Local\Android\Sdk

//新增Path
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools
%ANDROID_HOME%\emulator

Après avoir terminé toutes les configurations ci-dessus, exécutez-le à nouveau flutter doctoret l'affichage sera le suivant :

Sauf que Visual Studiocet IDE n'est pas installé car il n'est pas nécessaire de développer des programmes de bureau Windows pour le moment, tout le reste a été installé avec succès.

4. Installez l'émulateur

1. Étapes

Ouvrez Android Studiole côté droit DeviceMachine et cliquez sur Create DeviceCréer un simulateur.

Lors du choix d'une image, il est recommandé de choisir x86. (S'il n'est pas installé hamx, une invite d'installation rouge apparaîtra sur l'interface, entrez simplement l'installation)

Cliquez sur [Terminer]

2. Courez

Cliquez sur 调试le bouton ci-dessus et la fenêtre du simulateur ci-dessous apparaîtra une fois le démarrage terminé.

À ce stade, l’environnement de base et la configuration du simulateur sont terminés.

5. Autres façons d'exécuter le simulateur

1. VS Code exécute le simulateur

Android StudioAprès avoir créé le simulateur dans , si nous passons au VS codedéveloppement, nous pouvons également vs codeexécuter le simulateur.

Démarrez d’abord VS codel’émulateur dans le coin inférieur droit ;

Sélectionnez Android Studiol'émulateur que nous avons créé dans : Nexus 5 API 30-Test comme ci-dessus. Après avoir sélectionné Lancer, un émulateur initial apparaîtra sans aucune application ouverte.

Enfin, nous ouvrons terminalla ligne de commande et exécutons flutter runla commande. Le simulateur exécutera automatiquement l'application actuelle, comme indiqué ci-dessous :

2. Exécutez le simulateur depuis la ligne de commande

Vous devez d'abord vous assurer que les variables d'environnement contiennent ANDROID_HOMEdes variables

1. Pour vérifier quels simulateurs sont disponibles sur cette machine, utilisez la commande suivante pour interroger :

%ANDROID_HOME%\emulator\emulator.exe -list-avds

2. Démarrez l'émulateur spécifié, les éléments suivants sont activés Nexus_5_API_30-Test.

%ANDROID_HOME%\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5_API_30-Test

La simulation commencera alors à s'exécuter.

6. Questions fréquemment posées

1、Émulateur Android non autorisé

Méthode 1 :
Effacer les données de l'émulateur

Méthode 2 :

1. Quittez tous les émulateurs
2. Supprimez ~/.android/adbkey et ~/.android/adbkey.pub
3. adb kill-serveur
4. les appareils adb effacent les données d'AVD
5. Relancer l'émulateur

Émulateur Android non autorisé

---

Lecture recommandée :
 Comprendre
l'installation et la configuration du système Flutter UI Flutter sur la plate-forme Windows