Construye aplicaciones móviles multiplataformas con el aleteo de Google

Ha habido numerosos marcos móviles multiplataforma a lo largo de los años, con mejoras constantes para la experiencia y el rendimiento del desarrollador en todo. Aleteo de Google Es una nueva adición al paquete, y es particularmente interesante porque en lugar de usar un 'puente' de JavaScript como muchos marcos (como reaccionar nativos), se compila al código nativo verdadero.

Puede encontrar un poco sobre cómo funciona en el video introductorio a continuación, o leer para una guía paso a paso para comenzar con aleteo. Para obtener más consejos, eche un vistazo a nuestra colección de tutoriales que explican. Cómo construir una aplicación . O, si estás construyendo un sitio, elige un Creador de sitios web y Alojamiento web Servicio de nuestras guías. ¿No está contento con su almacenamiento? Aquí están algunas almacenamiento en la nube Opciones.

En este tutorial, veremos cómo configurar aleteo y explorar los conceptos básicos de las aplicaciones de construcción utilizando el marco, utilizando MacOS para nuestro desarrollo. Asumiremos que ha programado antes y sabe cómo usar la cáscara de bash, pero podría no haber desarrollado para móvil.

01. Ponerse en marcha

Tendrá que descargar e instalar algunas cosas antes de que pueda hacer uso de Flutter:

• Xcode para el soporte de iOS
• Estudio Android para soporte de Android
• SDK de Android (descargue a través del estudio Android una vez que cree un nuevo proyecto)

Una vez que tenga todos estos, ejecute Xcode y Android Studio, instale los componentes adicionales que ofrecen y crean un nuevo proyecto para asegurarse de que se ejecuten.

Ahora estás listo para empezar con aleteo. Descargar el Aleteo SDK . Extraerlo a donde quiera que le gustaría que se instale. Tenemos que actualizar nuestro camino, así que MacOS pueda encontrar aleteo donde lo invocas. Abrir (o crear) $ Inicio / .bash_profile :

sudo atom $HOME/.bash_profile

Ahora agregue el directorio de Flutter / Bin a su $ Ruta :

export PATH=/Users/simon/dev/flutter/bin:$PATH

Ejecute un comando shell para actualizar el perfil de Bash:

source $HOME/.bash_profile

Ahora podemos empezar a usar el CLI de aleteo. Lo primero que debe hacer es asegurarse de tener la última versión:

flutter upgrade

02. Solucionar cualquier problema.

Una vez hecho esto, Flutter ofrece una herramienta de diagnóstico útil, que verificará si todo lo que necesita está instalado y configurado correctamente. Es realmente útil:

flutter doctor

Tome nota de lo que el médico le dice y responde a cualquier problema que surja. Es posible que tenga que ejecutar el médico un par de veces para obtener comentarios adicionales y actuar sobre él.

Una vez que la herramienta está feliz con Flutter, Android Touchchain, IOS Toolchain y Android Studio, usted es bueno para ir. No se preocupe por los dispositivos conectados por ahora.

Xcode puede requerir algunos pasos adicionales en la cáscara para configurarlo completamente:

 Sudo Xcode-Select --Sswitch /applications/xcode.app/contents/developer
BREW INSTALL - LIBIMOBILEEDEVICE
BREW INSTALAR IDEVICEINSTALLER
BREW INSTALAR COCOAPODS
Configuración de POD 

Y el estudio Android a menudo necesita el acuerdo de licencia aceptando:

 Flutter Doctor - Licencias aandroideas 

03. Encuentra un IDE e inicie un nuevo proyecto.

Ahora se configura Flutter, querrá que un IDE funcione. Hay complementos disponibles para Android Studio e Intellij. Vamos a ir con el código VS, que también tiene su propio complemento Flutter.

Inicie el código VS y haga clic en Ver & GT; Paleta de comandos. Escriba 'Instalar' y seleccione las extensiones: Instale la acción de extensión. Búsqueda de 'Flutter' e instale el plugin Flutter. Una vez hecho, reinicie el código VS.

Ahora estamos listos para comenzar a desarrollar. Inicie un nuevo proyecto a través de la paleta de comandos seleccionando el aleteo: opción de proyecto nuevo. Nombra su proyecto, seleccione dónde guardarlo y el código VS invocará aleteador para generar el nuevo proyecto.

04. Configurar dispositivos virtuales

Para probar nuestro proyecto, querremos que un simulador de dispositivos nos permita en el escritorio. En la esquina inferior derecha del código VS (en la barra azul), verá algo que no dijo ningún dispositivo. Si ha desarrollado para Mobile antes, cuando hace clic en esto, verá que sus simuladores disponibles en la paleta de comandos.

Si no tiene simuladores, ejecute lo siguiente en el terminal para abrir el simulador de iOS por primera vez:

 Abra -A Simulador 

A continuación, debe ver un simulador de iOS disponible cuando reinicie el código VS.

Android es más complejo. Cargue el estudio Android y dentro de un proyecto Android, haga clic en Herramientas y GT; Android & GT; Administrador de AVD. Seleccione Crear dispositivo virtual.

Seleccione el dispositivo para emular, por ejemplo, un píxel de Google 2. Haga clic en Siguiente y también puede elegir una imagen del sistema (i.e. OS versión) para descargar. En la página siguiente en el rendimiento emulado, seleccione Hardware - Gles 2.0 para habilitar la aceleración de gráficos de hardware en el emulador. Terminar el proceso.

Una vez que haya creado el dispositivo virtual en Android Studio, reinicie el código VS y verá que su emulador Android aparece junto con el simulador de iOS en la lista de dispositivos del código VS.

Ahora, si hace clic en No hay dispositivos, puede seleccionar un dispositivo IOS o Android y un teléfono virtual se activará en su escritorio. Pruébalo con un simulador de iPhone X.

04. Prueba la aplicación de inicio

Ahora se está ejecutando el simulador, puede probar la aplicación de inicio. Presione F5 o haga clic en Debug & GT; Comenzar la depuración. La aplicación se cargará en el simulador y puede intentar interactuar con él. Sea paciente si no sucede de inmediato, ya que puede tomar algún tiempo para construir.

Antes de que podamos hacer lo mismo en Android, necesitamos instalar dependencias de Grandle para nuestro proyecto (un pequeño matiz de aleteo en este momento). Navegue hasta el directorio de la raíz del proyecto y ejecute:

 Android / Gradlew 

Luego, puede abrir un emulador de Android y ejecutar el proyecto en modo de depuración como lo hizo para iOS.

Una gran característica de aleteo es que admite la "recarga en caliente", es decir, puede modificar su fuente y ver los cambios reflejados en el simulador de inmediato. En main.dart , hagamos un par de cambios en la clase MyApp mientras se ejecuta el simulador de iPhone X:

 Soportes primarios: colores.green,
Inicio: Nuevo MyHOMEPAGE (Título: 'Libro de recetas'), = 

Debería ver que los cambios surtan efecto tan pronto como ahorte.

06. Explora el sistema Widget de Flutter.

De lo que aún no hemos hablado es el lenguaje de programación de DART que usa aleteo. Dart es un idioma orientado a objetos con sintaxis estilo C, desarrollado por Google y todo el desarrollo de Flutter lo usa. Si ya tiene alguna experiencia en la web o el desarrollo móvil, entonces no debería ser totalmente ajeno a usted.

Todo en Flutter se basa en los widgets, que son los bloques de construcción de una aplicación. Si ha usado reaccionar antes, el enfoque de Flutter es muy similar y los widgets son análogos a los componentes. Esencialmente, toda su aplicación se puede descomponer en una jerarquía de widgets.

Esto se ve fácilmente dentro del MyApp clase. MyApp es un Stateselesswidget (Esto significa que es inmutable). los construir() El método que estamos anulando le dice a Flutter cómo se debe prestarse el widget. Esto es similar a React. hacer() función.

El método devuelve un MaterialApp Widget, que representa una aplicación que utiliza el diseño material de Google. Esto a su vez tiene varias propiedades, que son los widgets: Themedata Define el estilo visual que se utilizará y Mi página de inicio es un widget personalizado definido más abajo en el main.dart Archivo que contiene el cuerpo de la aplicación.

07. Edita tu contenido

A diferencia de los apátridos MyApp De Mi página de inicio Es un widget de estado. Esto significa que su comportamiento está definido por el _Myhomepagestate Clase, lo que le permite almacenar información y cambiar en consecuencia, como cuando presiona el botón en la aplicación.

Puede ver que actualmente está utilizando muchos widgets incorporados Flutter proporciona a manejar cosas comunes como diseño, botones y visualización de texto. Hagamos algunos cambios a esa clase para modificar lo que nuestra aplicación presenta.

 Clase _MyHomePagestate extiende el estado y LT; MyHOMEPAGE & GT; {
 @anular
 Widget Build (contexto BuildContext) {
   devolver un nuevo andamio (
     Appbar: Nuevo Appbar (
       Título: Nuevo texto (Widget.Title),
     )
     Cuerpo: Nuevo contenedor (
       Decoración: Nueva Boxdecoration (Color: Colors.Brown 
),
       Niño: Nuevo recipiente ()
     )
   )
 }
} 

Hemos eliminado el contenido existente y lo hemos reemplazado con un widget de contenedores marrones, pero también debemos crear un widget personalizado, recipeptarios, que se colocará en el contenedor.

 Recipiente de clase extiende estataleswidget {
 @anular
 Widget Build (contexto BuildContext) {
   LISTA & LT; WIDGET & GT; widgets = nueva lista & lt; widget & gt; ();
   devuelva la nueva lista de listas (niños: widgets);
 }
} 

08. Cargar algunos activos

A continuación, carguemos algunos activos con la aplicación para que podamos agregarlos a la Vista de la lista widget dentro de Recipiente . Los activos estáticos para una aplicación se especifican en pubspec.yaml Bajo la sección 'Flutter':

 Activos:
   - img / desayuno.jpg
   - img / curry.jpg
   - img / pasta.jpg 

También crearemos una estructura de datos simple en Main.Dartart, combinando imágenes con cadenas para actuar como miniatura y resumen de las recetas.

 Var recetas = {
   'Desayuno.JPG': 'Comience el día derecho con este desayuno nutritivo',
   'Pasta.jpg': 'Wow a tus amigos haciendo tu propia pasta fresca',
   'Curry.jpg': 'Muestra tus habilidades culinarias con un curry rico',
}; 

09. terminar

Finalmente, vamos a actualizar Recipiente Para construir una lista de widgets que muestran las recetas. Usamos Image.asset Para cargar los activos estáticos que incluimos en pubspec.yaml .

 Recetas.Foreach ((pulgar, título) = & gt; widgets.add (
       Nuevo contenedor (niño:
         Nuevo relleno (relleno:
           Nuevo BEGEINSETS.Todo (16.0), Niño:
             Nuevo listible (
               LIDE: image.asset ('img /' + pulgar, ancho: 80.0),
               Título: Texto (leyenda)
             )
           )
           decoración:
             nueva boxdecoration (
                 Frontera: nueva frontera (
                     Parte inferior: Nueva Borderside (Color: Colors.Brown)
                 )
                 Color: Colors.Brown 

             )
       )
     )
); 

Esperemos que estés comenzando a sentir cómo aleteaba los widgets para construir aplicaciones. Intenta usar el simulador para girar el dispositivo. El diseño de Flutter alberga automáticamente los cambios. Para comparación, pruebe la aplicación en el emulador de Android.

Este artículo fue publicado originalmente en neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar Número 310 o suscribir .

Leer más:

• Haz que su cabeza reacione con estos cinco factores.
• 11 aplicaciones creativas de iPhone gratis para diseñadores
• Cómo diseñar iconos de aplicaciones