Cómo configurar Flutter y crear la aplicación web Hello World en Linux

Flutter es un marco de desarrollo de aplicaciones que se puede utilizar para desarrollar aplicaciones multiplataforma que se ejecutan en código nativo una vez compilado o construido. Ser desarrollado por Google, Flutter le permite crear prototipos rápidos en poco tiempo, así como le permite crear aplicaciones completas que utilizan API específicas de la plataforma. Con Flutter, puede crear hermosas aplicaciones para dispositivos móviles, sistemas operativos de escritorio y navegadores web utilizando widgets de diseño de material oficial. Este artículo discutirá la instalación de Flutter y la creación de un nuevo proyecto para desarrollar una aplicación web. Flutter usa "dardo" como el lenguaje de programación principal para escribir aplicaciones.

Instalar Flutter en Linux

Puede instalar Flutter en Linux utilizando dos métodos. El primer método es bastante sencillo, todo lo que tiene que hacer es ejecutar un comando simple para instalar Flutter en Snap Store.

$ sudo Snap Instalar Flutter -Classic

El segundo método implica descargar el repositorio de Flutter de Github. Ejecute los siguientes comandos en sucesión para instalar manualmente Flutter:

$ sudo apt install git
$ git clon https: // github.com/Flutter/Flutter.Git -B estable--Depth 1--No-Single-Branch

Tenga en cuenta que ejecutar el comando anterior obtendrá los archivos requeridos del repositorio oficial de Flutter, incluidos archivos binarios ejecutables. Podrá ejecutar estos archivos binarios desde la carpeta "bin". Sin embargo, estos archivos ejecutables no se agregarán a la variable de ruta amplia de su sistema y no podrá ejecutarlos desde cualquier lugar a menos que los agregue manualmente a la variable de ruta. Para hacerlo, siga los pasos a continuación.

Abierto ".Archivo BASHRC "ubicado en su carpeta de inicio con su editor de texto favorito:

$ nano "$ home/.bashrc "

Agregue la siguiente línea en la parte inferior del archivo, reemplazando cuidadosamente la cadena.

ruta de exportación = "$ ruta:/Flutter/Bin "

Por ejemplo, si descargó el repositorio de Flutter en la carpeta "Descargas", deberá agregar la siguiente línea:

exportación ruta = "$ ruta: $ home/downloads/flutter/bin"

Guarde el archivo una vez que haya terminado. Actualizar ".archivo bashrc "ejecutando el comando a continuación:

$ fuente "$ Home/.bashrc "

Para verificar que la carpeta "bin" de Flutter se haya agregado a la ruta, ejecute el comando a continuación:

$ echo $ ruta

Deberías obtener algo de salida como esta:

/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/ nit/descargas/flutter/bin

Observe la presencia de la palabra clave "Flutter" y la ruta completa que muestra la carpeta "Bin" en el directorio "Flutter".

Para verificar si el comando "Flutter" se puede ejecutar desde cualquier ruta, use el comando a continuación:

$ que flutador

Deberías obtener algo de salida como esta:

/Inicio/Nit/Descargas/Flutter/Bin/Flutter

Tenga en cuenta que el lenguaje "DART", que se requiere para escribir aplicaciones Flutter, viene incluido con archivos Flutter descargados desde el repositorio de Git o del paquete Snap. Ejecute el siguiente comando para verificar las dependencias faltantes necesarias para ejecutar Flutter:

$ Flutter Doctor

Algunos archivos requeridos pueden comenzar a descargar para completar la configuración de Flutter. Si aún no ha instalado Android SDK, se mostrará un mensaje en la salida para guiarlo a través de la instalación.

Si desea desarrollar aplicaciones de Android usando Flutter, haga clic en los enlaces visibles en la salida del terminal y siga los pasos relevantes para instalar Android SDK.

Este tutorial se centra en la creación de aplicaciones web utilizando Flutter. Para habilitar el soporte para crear aplicaciones web, ejecute los siguientes comandos en sucesión:

$ Flutter Channel beta
$ Flutter actualización
$ FLUTTER CONFIG --NABLE-WEB

Para verificar que el soporte de aplicaciones web se haya habilitado de hecho, ejecute el comando a continuación:

$ Flutter dispositivos

Deberías obtener algo de salida como esta:

2 dispositivos conectados:
Servidor web (web) • servidor web • Web-JavaScript • Herramientas de aleteo
Chrome (Web) • Chrome • Web-JavaScript • Google Chrome 87.0.4280.66

Si ha seguido los pasos correctamente hasta ahora, Flutter debe instalarse correctamente en su sistema, listo para crear algunas aplicaciones web.

Crea un nuevo proyecto de Flutter

Para crear un nuevo proyecto de aplicación web "Helloworld" utilizando Flutter, ejecute los comandos mencionados a continuación:

$ Flutter Crea Helloworld
$ CD Helloworld

Para probar su proyecto recién creado, ejecute el comando:

$ Flutter Run -d Chrome

Debería ver una demostración de aplicaciones web de Flutter como esta:

Puede depurar aplicaciones web Flutter utilizando herramientas de desarrollo integradas en Chrome.

Modificar su proyecto

El proyecto de demostración que creó anteriormente contiene un "principal.DART "File ubicado en la carpeta" lib ". Código contenido en este "principal.El archivo Dart ”se comenta muy bien y se puede entender con bastante facilidad. Te sugiero que pases por el código al menos una vez para comprender la estructura básica de una aplicación Flutter.

Flutter admite "recarga en caliente", lo que le permite actualizar rápidamente su aplicación sin relanzarla para ver los cambios. Intente cambiar el título de la aplicación desde "Página de inicio de Demo de Flutter" a "Hello World !!" en general.archivo dart ". Una vez hecho esto, presione la tecla en el terminal para actualizar el estado de la aplicación sin relanzarlo.

Construye tu aplicación Flutter

Para crear su aplicación web Flutter, use el comando especificado a continuación en el directorio de su proyecto:

$ Flutter Build Web

Una vez que el proceso de compilación haya terminado, debe tener una nueva carpeta en su directorio de proyectos ubicado en la ruta "Build/Web". Aquí encontrarás todo lo necesario ".html ",".JS "y".Archivos de CSS ”necesarios para servir al proyecto en línea. También encontrará varios archivos de activos utilizados en el proyecto.

Recursos útiles

Para saber más sobre el desarrollo de aplicaciones web utilizando Flutter, consulte su documentación oficial. Puede consultar la documentación oficial para el lenguaje Dart para comprender mejor las aplicaciones de Flutter. Flutter viene con toneladas de paquetes oficiales y de terceros que puede usar para desarrollar rápidamente aplicaciones. Puede encontrar estos paquetes disponibles aquí. Puede usar widgets de flutador de diseño de material en sus aplicaciones web. Puede encontrar documentación para estos widgets en la documentación oficial de Flutter. También puede tener una sensación de estos widgets navegando por demostraciones de trabajo de componentes web de diseño de materiales.

Conclusión

Flutter ha estado en desarrollo desde hace bastante tiempo y está creciendo como un marco para desarrollar aplicaciones multiplataforma "Escribir una vez implementando en cualquier lugar". Su adopción y popularidad pueden no ser tan altas como otros marcos similares, pero proporciona una API estable y robusta para desarrollar aplicaciones multiplataforma.