En este artículo, veremos el proceso de instalación de Flutter en Visual Studio Code. Flutter es un marco de interfaz de usuario portátil de código abierto para dispositivos móviles, de escritorio y web. Está desarrollado y administrado por Google, Flutter se utiliza para crear una interfaz nativa de alta calidad, hermosa y rápida para Android e iOS a partir de una única base de código. La interfaz de una aplicación flutter se compone de varios widgets. Flutter tiene una biblioteca de widgets bastante rica para que los desarrolladores puedan crear una interfaz efectiva para Android e iOS también sin ningún obstáculo.
Características clave de Flutter:
- Hot Reload: esta función permite a los usuarios ver cada cambio en milisegundos en la pantalla de salida (emulador o dispositivo Android).
- Biblioteca rica de widgets: Flutter contiene una gran biblioteca de widgets, lo que hace que una interfaz en flutter sea bastante fácil y menos lenta cuando tenemos acceso a la gran biblioteca de widgets.
- Interfaz de usuario expresiva y flexible: una interfaz de una aplicación flutter funciona como una arquitectura en capas que permite una personalización completa, lo que da como resultado una interfaz de usuario extremadamente rápida, expresiva y flexible.
- Rendimiento nativo: cuando trabajamos con el desarrollo de aplicaciones flutter, tenemos acceso a los widgets que se basan en la plataforma, como Android e iOS, por lo que podemos usar widgets que pueden integrar funciones nativas, como íconos, navegación, desplazamiento y mucho más. .
Instalación de Flutter en Visual Studio Code:
Siga los pasos a continuación para instalar Flutter en VS Code:
Paso 1: Descarga el SDK de Flutter. Tendremos que descargar el archivo Flutter SDK para poder trabajar con flutter. Podemos descargarlo fácilmente desde la web oficial de Flutter .
Paso 2: establezca la ruta de la variable de entorno. Después de descargar Flutter SDK, extraiga el archivo y copie la ruta de la carpeta bin.
Presiona WIN + R y pega lo siguiente: rundll32.exe sysdm.cpl,EditEnvironmentVariables
Ahora haga clic en nuevo y pegue la ruta que se copió anteriormente y guarde.
Ahora tenemos que configurar el código de Visual Studio para Flutter. Tenemos que instalar dos extensiones para usar flutter. La primera extensión es Flutter y la segunda es Dart. Tenga en cuenta que Dart es el lenguaje de programación que se usa en flutter para el desarrollo de aplicaciones tanto para Android como para iOS.
Paso 3: Instalar Flutter en Visual Studio Code
Paso 4: ahora instala Dart en Visual Studio Code
Paso 5: ahora hemos agregado con éxito Flutter y Dart al código de Visual Studio, ahora verifiquemos si Flutter está instalado o no. Para esto, abriremos una nueva terminal en Visual Studio Code y escribiremos el siguiente “ flutter –version”, si todo está bien, normalmente mostrará la versión del flutter instalado.
Ahora estamos listos para crear un nuevo proyecto flutter, para eso tenemos que seleccionar un directorio en el que vamos a crear el proyecto. Haga clic en el botón verde de la carpeta Abrir y luego elija una ubicación preferida.
Paso 6: Ahora, para crear un nuevo proyecto de aleteo, escriba lo siguiente en la terminal de código de Visual Studio, » flutter create testproject». Después, ese proyecto se creará dentro del directorio del proyecto de prueba.
El proyecto Flutter se crea ahora, tenemos que ejecutar este programa para verificar si funciona o no. Aquí debemos entender cómo un proyecto flutter mostrará la salida. Podemos ejecutar un programa flutter en el emulador de Android o también podemos ejecutarlo en nuestro navegador. Para ejecutar en el emulador de Android, debemos tener el estudio de Android instalado en nuestro sistema. Para este artículo, vamos a probar este programa en nuestro navegador.
Ahora, antes de ejecutar este programa, tenemos que cambiar nuestro directorio al proyecto de prueba para ese tipo de proyecto de prueba de cd, y ahora ejecute el programa escribiendo flutter run, después de este comando, le preguntará dónde le gustaría ver el resultado, ahora elija para el navegador deseado escribiendo 1 o 2.
Salida: Ahora estamos listos para ver la salida, por defecto tiene un programa en el que hay un botón al hacer clic en el que se mostrará un contador en el centro.
Producción