1. Tutorial práctico de la aplicación móvil Flutter [configuración del entorno, configuración del simulador]

I. Descripción general

Flutter es el SDK móvil de Google para ayudar a los desarrolladores
a desarrollar una interfaz de usuario nativa de alta calidad en plataformas IOS y Android. Un código puede generar dos aplicaciones de alto rendimiento y alta fidelidad para IOS y Android al mismo tiempo.

2. Mecanismo de renderizado

La razón por la que Flutter puede lograr una experiencia comparable o incluso mejor que la nativa se debe principalmente a sus capacidades de representación de gráficos de alto rendimiento. Primero, compare los mecanismos de representación de Flutter con Android nativo y otros marcos multiplataforma (como RN ), Como se muestra abajo:

• Cuando la aplicación nativa de Android está dibujando, primero llama al código Java del marco de Android, luego llama al motor de dibujo Skia (c/++) y finalmente genera instrucciones de CPU/GPU para completar el renderizado en el dispositivo;
• Cuando Flutter está dibujando, la página de inicio llama al código Dart de Flutter Framework, luego llama directamente al motor de dibujo Skia (c/++) y finalmente genera instrucciones de CPU/GPU para renderizar en el dispositivo;
• Otros marcos multiplataforma (como RN) primero llaman al código javaScript de su marco y luego llaman al código java del marco de Android, que es una capa más que el nativo. Obviamente, RN definitivamente no es tan bueno como el nativo. uno.

Se puede ver que Flutter y Android son nativos. Siempre que la eficiencia del código Dart de Flutter Framework pueda ser comparable a la del código Java de Android Framework, se puede entender que la aplicación Flutter puede lograr una experiencia de rendimiento comparable a la nativa.

Además, el motor de renderizado Skia utilizado por Flutter es parte del SDK de Flutter y se actualizará con la actualización del SDK de Flutter. El motor de renderizado Skia nativo debe actualizarse con la actualización del sistema operativo Android. Por lo tanto, la mejora del rendimiento de el motor skia se verá afectado y afectará la aplicación Flutter de manera más oportuna.

3. Configuración del entorno

1. Descargar el SDK de Flutter

2. Actualice las variables de entorno, agregue FLUTTRE_HOMEvariables, el valor es la ubicación del paquete de instalación de flutter y PATHagréguelo%FLUTTER_HOME%\bin

3. Ejecútelo fluuter doctorpara detectar software que aún no se ha instalado. Una [X] indica que es necesario instalarlo.

4. Instale Android Studio , se instalará automáticamente durante el proceso de instalación Android SDK. (El paso 7 también se realiza en este IDE)

5. Abrir file>settings, instalar Dart, Flutterenchufar
   
   

6. Ingrese la autorización de licencia de la línea de comando: flutter doctor --android-licenses

7. abrir file>settings, entrar Android SDK, instalarcmmmand-line tools

   

8. Modifique la fuente y agregue las siguientes dos variables de entorno

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

9. Agregar SDKvariables de entorno

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

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

Después de completar todas las configuraciones anteriores, ejecútela nuevamente flutter doctory la pantalla será la siguiente:

Excepto que Visual Studioeste IDE no está instalado porque no es necesario desarrollar programas de escritorio de Windows por el momento, todo lo demás se ha instalado correctamente.

4. Instale el emulador

1. Pasos

Abra Android Studioel lado derecho DeviceMachine y haga clic en Create DeviceCrear simulador.

Al elegir una imagen, se recomienda elegir x86. (Si no está instalado hamx, aparecerá un mensaje de instalación rojo en la interfaz, simplemente ingrese a la instalación)

Haga clic en [Finalizar]

2. correr

Haga clic 调试en el botón de arriba y la ventana del simulador a continuación aparecerá una vez que se complete el inicio.

En este punto, el entorno básico y la configuración del simulador están completos.

5. Otras formas de ejecutar el simulador

1. VS Code ejecuta el simulador

Android StudioDespués de crear el simulador en , si cambiamos a VS codedesarrollo, también podemos vs codeejecutar el simulador.

Primero VS codeinicie el emulador en la esquina inferior derecha;

Seleccione Android Studioel emulador que creamos en: Nexus 5 API 30-Test como arriba. Después de seleccionar Iniciar, aparecerá un emulador inicial sin aplicaciones abiertas.

Finalmente, abrimos terminalla línea de comando y ejecutamos flutter runel comando, el simulador ejecutará automáticamente la aplicación actual, como se muestra a continuación:

2. Ejecute el simulador desde la línea de comando.

Primero debe asegurarse de que las variables de entorno contengan ANDROID_HOMEvariables.

1. Para verificar qué simuladores están disponibles en esta máquina, use el siguiente comando para consultar:

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

2. Inicie el emulador especificado, lo siguiente está habilitado Nexus_5_API_30-Test.

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

Entonces la simulación comenzará a ejecutarse.

6. Preguntas frecuentes

1、Emulador de Android no autorizado

Método 1:
borrar datos del emulador

Método 2:

1. Salir de todos los emuladores
2. Eliminar ~/.android/adbkey y ~/.android/adbkey.pub
3. servidor de eliminación de adb
4. dispositivos adb Borrar datos de AVD
5. Relanzar el emulador

Emulador de Android no autorizado

---

Lectura recomendada:
Comprensión
de la instalación y configuración del sistema Flutter UI Flutter en la plataforma Windows