Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

Proyecto Flutter en VSCode

Tiempo de lectura: 4 minutos

Hoy os voy a enseñar cómo abrir un proyecto Flutter en VSCode para trabajar en este entorno.

Primero vamos a instalar Flutter SDK en nuestro PC:

  • Después se descomprime la carpeta flutter en el directorío dónde queramos instalarla (en mi caso C:/flutter):
  • Una vez descomprimida, indicamos hay que crear una variable de entorno para que nos deje ejecutar flutter desde el terminal. Para ello vamos a la barra de búsqueda de inicio y escribimos env.
  • Abrimos Editar las variables de entorno del sistema.
  • Pulsamos en Variables de entorno…
  • Buscamos o la variable Path, si no existe le damos a Nueva… y la creamos.
  • En mi caso existe, ya que tiene añadido el directorio de Java:
  • Si existe la editamos y le damos a Nuevo:
  • Ahora añadimos la ruta de \flutter\bin en mi caso es C:\flutter\bin
  • Pulsamos en Aceptar en todas las ventanas.
  • Ahora abrimos CMD o consola de Windows y probamos que funcione escribiendo flutter doctor.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter doctor
flutter doctor
flutter doctor

Y si funciona aparecerá esto:

Comprobamos si hay algun error y ejecutamos lo que indica:

En mi caso tengo que instalar esto «path/to/sdkmanager –install «cmdline-tools;latest» para ejecutarlo tenemos que buscar la ruta de sdk de Android, si no la tenemos tendremos que instalar el SDK de Android (https://developer.android.com/studio)

En mi caso la ruta es: C:\Users\ismae\AppData\Local\Android\Sdk\tools\bin\sdkmanager.bat . Para encontrar la ruta es: C:\Users\{nombre_usuario}\AppData\Local\Android\Sdk\tools\bin\sdkmanager.bat

Ejecutamos el comando:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
C:\Users\ismae\AppData\Local\Android\Sdk\tools\bin\sdkmanager.bat --install "cmdline-tools;latest"
C:\Users\ismae\AppData\Local\Android\Sdk\tools\bin\sdkmanager.bat --install "cmdline-tools;latest"
C:\Users\ismae\AppData\Local\Android\Sdk\tools\bin\sdkmanager.bat --install "cmdline-tools;latest"

Si no funciona esta opción, también podemos hacer lo siguiente.

  • Abrimos Android Studio y vamos a Tools – SDK Manager – SDK Tools – Android SDK Command-line Tools – Install

Abrimos SDK Tools

E instalamos Command line Tools

Pulsamos en Apply

Una vez instalado, pulsamos en Finish y en Ok

Ahora volvemos a ejecutar Flutter Doctor para ver si devuelve algún error.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter doctor
flutter doctor
flutter doctor

En mi caso me devuelve que la licencia de Android no está aceptada «! Some Android licenses not accepted. To resolve this, run: flutter doctor –android-licenses»

Ejecutamos esto:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter doctor --android-licenses
flutter doctor --android-licenses
flutter doctor --android-licenses

Aceptamos las licencias y listo.

Volvemos a ejecutar Flutter doctor para comprobar si hay algún error:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter doctor
flutter doctor
flutter doctor

Ahora ya podemos ejecutar los comandos de flutter:

  • Para probar el proyecto: flutter run
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter run
flutter run
flutter run

Si no tenemos un dispositivo enchufado con depuración USB (https://devcodelight.com/habilitar-depuracion-usb-opciones-para-desarrollador-en-tu-dispositivo-android/) nos aparece si queremos ejecutarlo en web:

Y si trenemos el dispositivo, comenzará a ejecutarlo en él:

Tarda bastante, tenemos que tener paciencia mientras se copila.

Otros comandos útiles:

  • flutter upgrade (actualiza flutter)

También podremos ejecutar comandos desde la paleta de comandos de VS Code

Si escribimos Flutter aparecerán los siguientes:

4

Deja un comentario