Prefacio
Este artículo es un registro personal del proceso de creación de un entorno de desarrollo de Flutter desde cero hasta la ejecución del proyecto usando FVM en el sistema macOS. No es un tutorial y es solo de referencia. Si tiene alguna pregunta o sugerencia, deje un mensaje en el área de comentarios.
Adjunto se encuentra la configuración del equipo de desarrollo.
1. Instalar vscode
Utilice vscode como herramienta de codificación
Dirección de descarga: Descargar Visual Studio Code - Mac, Linux, Windows
Después de descargar, descomprimir e instalar.
2. Instale Xcode y Android Studio
Xcode
Para ejecutar aplicaciones Flutter en simuladores o dispositivos reales de iOS, necesita instalar Xcode
Instale la última versión estable de Xcode desde Mac App Store
Estudio Android
Para ejecutar aplicaciones Flutter en emuladores o dispositivos Android reales, debe instalar Android Studio.
在 Descargar Android Studio y herramientas de aplicaciones - Desarrolladores de Android
Descargue e instale la última versión estable de Android Studio
Elija la versión de instalación según el tipo de chip de su Mac
3. Configurar el simulador de IOS
Ingrese el código de comando en la terminal para ejecutar el simulador de iOS
open -a Simulator
PD:
P: ¿Dónde está la terminal?
Respuesta: Tecla Comando + barra espaciadora para abrir la ventana emergente de búsqueda, terminal de búsqueda, generalmente la primera
4. Instalar cerveza casera
Homebrew es una herramienta de administración de paquetes para macOS, o administrador de paquetes, puede entenderse como una tienda de software similar a la App Store, aquí se utiliza como herramienta para instalar FVM.
Copie las siguientes instrucciones al terminal y presione Enter para ejecutar
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"La siguiente imagen muestra el resultado de la ejecución después de presionar Enter.
Seleccione la fuente usted mismo, ingrese el número de serie correspondiente y presione Enter, ingrese Y para ejecutar el script
Espere un momento. La instalación de Homebrew se completa como se muestra en la siguiente imagen. Si la instalación falla, inténtelo nuevamente desde otra fuente.
Aquí se le preguntará si necesita instalar Core, Cask o servicios, y podrá decidir si desea instalarlos usted mismo.
PD:
P: ¿Qué son Core, Cask y servicios?
Respuesta: Homebrew Core es el repositorio de software principal de Homebrew
Homebrew cask es una herramienta mejorada basada en brew, que se utiliza para instalar paquetes de aplicaciones de programas Gui (.dmg/.pkg) en Mac, como qq, chrome, etc. Primero lo descarga y descomprime en un directorio unificado (/opt/homebrew-cask/Caskroom), eliminando la necesidad de descargarlo, descomprimirlo, arrastrarlo y soltarlo (instalar), etc. Asimismo, la desinstalación es bastante fácil y limpia. Luego, realice un enlace suave al directorio ~/Aplicaciones/, que es muy conveniente y contiene muchos programas de uso común que no se encuentran en la AppStore.
Homebrew Services es un launchctlconjunto de servicios que se puede utilizar para administrar los servicios instalados. macOS usalaunchctl comandos para cargar servicios que se ejecutan automáticamente al inicio, lo quebrew servicepuede simplificar el funcionamiento de lauchctl.
Referencias:
Ayuda para el uso de la fuente Homebrew Core: documentación de ayuda de USTC Mirror
Homebrew y Homebrew-cask en el blog-CSDN de Mac_Schuyler_yuan
aprendizaje homebrew (5) barriles de cerveza casera y servicios de cerveza casera - Aima.com
La siguiente imagen muestra la pantalla después de seleccionar la instalación y completarla.
El proceso de instalación aquí tomó mucho tiempo ~
Referencia de instalación de cerveza casera:
Cómo instalar Homebrew automáticamente en China (dirección nacional) (Mac y Linux) - Zhihu
Referencia de uso de cerveza casera:
Explicación detallada del uso de Homebrew, la segunda Mac App Store para macOS - Zhihu
5. Instale FVM
Ingrese el siguiente comando en la terminal para copiar la biblioteca fvm al local
brew tap leoafarias/fvmUna vez completado, ingrese el siguiente comando para instalar fvm
brew install fvmLa instalación se completa como se muestra a continuación.
PD:
P: ¿Qué debo hacer si quiero desinstalarlos?
Respuesta: Ingrese los siguientes comandos correspondientes en la terminal respectivamente
brew uninstall fvm
brew untap leoafarias/fvmReferencias:
Administrador de versiones de Flutter-FVM
6. Configurar el SDK y las variables de entorno de recursos del paquete dependiente
Ingrese el siguiente comando en la terminal para configurar la imagen china
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn FLUTTER_STORAGE_BASE_URL especifica la fuente de descarga del SDK de Flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cnPUB_HOSTED_URL especifica la fuente de descarga de pub get (paquete de dependencia)
PD: Puede haber casos en los que la descarga no se pueda realizar en China, por lo que puede especificar la dirección espejo configurando esta variable. El espejo del grupo de usuarios de Linux de la Universidad Jiao Tong de Shanghai se proporciona aquí como respaldo.
export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cnReferencias:
Configurando la imagen de Flutter China – Jianshu-Mikel
7. Configurar las variables de entorno fvm y flutter
fvm
export FVM_HOME=$HOME/fvmaleteo
export PATH=$HOME/fvm/default/bin:$PATH8. Consulta y descarga de la versión Flutter SDK
fvm -h obtiene todas las instrucciones de fvm
Las versiones de fvm obtienen la versión SDK instalable
El número de versión de instalación de fvm instala la versión especificada del SDK.
La siguiente figura toma como ejemplo la instalación de la versión 3.10.2.
lista fvm para ver la versión del SDK instalado
Debido a que la versión 3.10.3 se instaló anteriormente, hay dos versiones en la lista
El número de versión global de fvm establece la versión global predeterminada del SDK.
Después de configurar la versión SDK predeterminada global, puede usar la lista fvm para verificar si surte efecto.
9. Autocomprobación de aleteo
Ingrese flutter doctor en la terminal para verificar si el entorno actual necesita instalar otras dependencias (si desea ver un resultado más detallado, -v simplemente agregue un parámetro)
PD:
Este comando verificará su entorno de configuración actual y generará un informe en la ventana de la línea de comando. La instalación de Flutter vendrá con el SDK de Dart instalado, por lo que no es necesario instalar Dart por separado. Debe leer atentamente el informe generado por el comando anterior para ver si se ha perdido alguna dependencia que deba instalarse o comandos que deban ejecutarse más adelante (esto se mostrará en negrita ) .
Si sigue los pasos de este artículo, debería obtener el siguiente informe.
Como se muestra en la imagen de arriba, hay 1 error y 2 advertencias, a continuación las solucionaremos una por una.
[✗] Cadena de herramientas de Android: desarrollo para dispositivos Android
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK
components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
Abra Android Studio. Al abrirlo por primera vez después de la instalación, debe configurar y descargar algunos recursos. Simplemente haga clic en Aceptar y siga el siguiente paso.
Finalmente camina para terminar.
Como se muestra a continuación, seleccione SDK Manager
Copia la ruta del cuadro rojo.
Ingrese flutter config --android-sdk ruta copiada en la terminal
Regrese a la interfaz que se muestra a continuación, seleccione Herramientas de línea de comandos del SDK de Android en la lista de Herramientas del SDK y haga clic en Aceptar en la esquina inferior derecha para instalarlo.
Una vez completada la instalación, ingrese el comando flutter doctor --android-licenses en la terminal y presione Enter para ejecutar
Habrá varias preguntas después de la ejecución, simplemente ingrese y y presione Entrar.
[!] Xcode: desarrollo para iOS y macOS (Xcode 14.3)
[!] Xcode - develop for iOS and macOS (Xcode 14.3)
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.Ingrese el siguiente comando en la terminal para instalar cocoapods
sudo gem install cocoapodsDespués de la ejecución, puede aparecer el siguiente error
Siga las indicaciones y ejecute los siguientes comandos en la terminal
sudo gem install activesupport -v 6.1.7.3Una vez completada la ejecución, ingrese el siguiente comando nuevamente en la terminal
sudo gem install cocoapodsinstalación de cocoapods completada
[!] Recursos de red
[!] Network resources
✗ A network error occurred while checking "https://maven.google.com/": Operation timed outBusque los archivos uno por uno (primero puede buscar flutter_toolsflutter/packages/flutter_tools/lib/src/http_host_validator.dart en la barra de búsqueda del Finder y luego ingresar paso a paso. Tengo dos versiones de SDK aquí, por lo que habrá dos flutter_tools)
Abra http_host_validator.dartel archivo con vscode y https://maven.google.com/ modifíquelo parahttps://dl.google.com/dl/android/maven2/
Buscar en la barra de búsqueda del Finderflutter_tools.snapshot，删除该文件，再重复执行本文的第六步，即在终端中再次配置sdk和依赖包资源环境变量
Ejecute flutter doctor nuevamente en la terminal para realizar una autoverificación
No muestra ningún problema encontrado
Referencias:
Flutter Learning Journey (1)_Asuka Asuna es el blog-CSDN de mi esposa
10. Crea y ejecuta el proyecto flutter.
Primero cree una carpeta para almacenar el proyecto, abra la carpeta con vscode, use la tecla de acceso directo control + ` para llamar a la terminal, ingrese el nombre del proyecto fvm flutter create en la terminal y presione Enter para crear el proyecto
Ejecutando en iOS
Ejecute open -a Simulator en la terminal para abrir el simulador de iOS (consulte el paso tres de este artículo), luego ejecute cd project name en la terminal vscode para ingresar a la carpeta del proyecto y finalmente ejecute fvm flutter run para ejecutar el proyecto.
El proyecto se ejecuta con éxito
Ejecutando en Android
Ejecute Android Studio, abra la carpeta del proyecto y haga clic en Administrador de dispositivos en la esquina superior derecha (como se muestra a continuación)
Luego haga clic en Crear dispositivo, seleccione el dispositivo según sus necesidades y haga clic en Siguiente (si ya ha creado el dispositivo, puede omitir este paso)
Seleccione el sistema y haga clic en Siguiente
Haga clic en Finalizar para completar la creación del dispositivo.
Haga clic en el pequeño triángulo para ejecutar el dispositivo.
Haga clic en el botón Ventana para mostrar la ventana de la máquina virtual por separado
Ejecute el nombre del proyecto cd en la terminal vscode para ingresar a la carpeta del proyecto y luego ejecute fvm flutter run para ejecutar el proyecto (la primera ejecución puede llevar mucho tiempo)
El proyecto se ejecuta con éxito
Fin del artículo