Do you want to switch to Platzi in English?
26
Tutorial: Hola Mundo con Flutter

9799Puntos

hace 3 meses

Curso de Bases Técnicas de Android
Curso de Bases Técnicas de Android

Curso de Bases Técnicas de Android

Aprende todas las bases de desarrollo Android aún sin saber programar, entiende cómo funciona el sistema operativo, toma decisiones para tu equipo móvil o tus propios desarrollos. Adquiere todo el conocimiento técnico que necesitas para desarrollar aplicaciones móviles Android.

Flutter es el nuevo SDK de Google creado para diseñar interfaces nativas iOS y Android. Utiliza el lenguaje de programación Dart y fue creado para programadores de interfaces móviles. Esto es el comienzo de lo porvenir en lo que será el frontend mobile.

header-illustration.png

Hoy crearemos un hola mundo con Flutter para iOS y Android.

1. Elige un Editor de Código

Puedes trabajar con Flutter usando un editor de código y la línea de comandos, así como también en múltiples editores como IntelliJ IDEA, Visual Studio Code, etc… Mi recomendación es que utilices Android Studio funciona desde la versión 3.0.

2. Instala el plugin de Flutter y Dart

Lo siguiente que tienes que hacer es instalar en Android Studio el plugin de Flutter y Dart puedes hacerlo yendo a Preferences > Plugins en mac o en Windows/Linux File > Settings > Plugins

En la ventana de Plugins selecciona Browse repositories, escribe flutter y da click en install.
Captura de pantalla 2018-05-15 a la(s) 01.34.25.png

Un botón como este:
Captura de pantalla 2018-05-15 a la(s) 02.09.02.png

Selecciona que deseas instalar el plugin de Dart y después te pedirá reiniciar el IDE.
Captura de pantalla 2018-05-15 a la(s) 01.35.01.png

3. Descarga el SDK de Flutter

Puedes descargarlo de este enlace según el sistema operativo que uses.
Captura de pantalla 2018-05-15 a la(s) 02.13.47.png

Descomprimelo y sigue las instrucciones.

4. Si usas mac, abre el emulador de iOS

Flutter nos da la posibilidad de reutilizar el código de una interfaz y usarlo en iOS, para esto deberás tener Xcode 9 o superior instalado y configurado.

Abre el emulador poniendo la siguiente línea de comandos en la terminal:

open -a Simulator

5. Abre el emulador de Android

Para abrir el emulador de Android puedes hacerlo desde el IDE Android Studio Android Studio > Tools > Android > AVD Manager. Si no tienes un device, créalo y si ya lo tienes solamente arráncalo.

6. Crea un proyecto Flutter en Android Studio

Una vez que ya tienes los dos plugins: Flutter y Dart estarás listo para crear un nuevo proyecto de Flutter, ve a File > New Flutter Project
Captura de pantalla 2018-05-15 a la(s) 01.33.38.png

Captura de pantalla 2018-05-15 a la(s) 01.35.17.png

Escribe el nombre de la aplicación, en mi caso usé: flutter_app.
Selecciona el SDK, el cuál corresponde a la carpeta zip que descargaste en el punto 3.
Captura de pantalla 2018-05-15 a la(s) 01.37.49.png

Captura de pantalla 2018-05-15 a la(s) 01.38.00.png

Espera mientras se crea el proyecto. Puede demorar un poco.
Captura de pantalla 2018-05-15 a la(s) 01.39.02.png

Cuando termine verás del lado izquierda la composición del proyecto, el archivo principal que contiene la interfaz de usuario es main.dart
Captura de pantalla 2018-05-15 a la(s) 01.41.08.png

En la parte superior izquierda deberás ver encendidos los emuladores iOS y Android que iniciamos en pasos anteriores.
Captura de pantalla 2018-05-15 a la(s) 01.42.17.png

Arranca el proyecto dando play y seleccionando el emulador de tu preferencia, y verás corriendo una aplicación que te muestra el número de veces que pulsas el Floating Action Button.
Captura de pantalla 2018-05-15 a la(s) 02.27.03.png

iOS y Android espectivamente.
Captura de pantalla 2018-05-15 a la(s) 01.51.59.png

Flutter se encuentra en Beta, ¿te gustaría un curso de esta tecnología? ¿Cuéntame qué otros Cursos de Android te gustaría ver en Platzi?

Si quieres saber más de Android no te pierdas este curso, para entender cómo funciona el desarrollo móvil.

Curso de Bases Técnicas de Android
Curso de Bases Técnicas de Android

Curso de Bases Técnicas de Android

Aprende todas las bases de desarrollo Android aún sin saber programar, entiende cómo funciona el sistema operativo, toma decisiones para tu equipo móvil o tus propios desarrollos. Adquiere todo el conocimiento técnico que necesitas para desarrollar aplicaciones móviles Android.
Ann
Ann
@anncode

9799Puntos

hace 3 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3

profe hagamos un curso de ese se ve bacano voy pa esa

5
9799Puntos
3 meses

Todavía lo estoy evaluando Ludian, el único contra que le veo es que está en beta. Pero sí viene un curso de Android eso sí!! 😃

2
5502Puntos
3 meses

Es cierto que está en beta, sin embargo Google asegura que el framework ya está listo para usarse en producción, y que ya hay apps críticas que lo están utilizando. Vamos profe, un cursito de Flutter que complemente la carrera de Android 😄

2
8370Puntos
3 meses

Mientras esta en Beta se podría hacer un curso de Dart

1
760Puntos

He estado trabajando con dart y el proximos paso es fluter! Vamos por ese curso! 💪🏼

1
3Puntos

Hola, estoy empezando a aprender a usar flutter, me recomendaron emuladores pero solo funcionan con Intel, pero mi PC no tiene ese procesador, por lo que no funcionan, ¿que emuladores me recomienda usar? mi PC tiene procesador AMD A8

1
3087Puntos

Todo lo que provenga de tus manos @anncode, es chévere, bacano y de mucho provecho, lo espero con los brazos y el corazón abiertos.

1
438Puntos

Hola,
Yo también ya lo he escuchado sonar bastante, sería genial un curso al menos a nivel básico, para irlo aprendiendo a manejar.
Muy buen tutorial de intro sobre Flutter, muy claro todo 😄
Saludos!

1
982Puntos

Excelente tutorial de Flutter. Muy claro y conciso.

0
511Puntos

Muy buen tutorial.
A mi me gustaría un curso de Android Architecture Components. Me parece un tema bastante importante y útil.

0
4062Puntos

Una consulta para poder generar la app para ios es necesario tener una mac?

Saludos desde Bolivia

0
3477Puntos
3 meses

Es el mismo procemiento al emular la aplicación, ya sea que este codificado en swift/objective-c o nativescript/react native. Es decir si no cuentas con una mac necesitas emular el sistema operativo (Hackintosh). y correr dese ahí la compilación o por medio de una terminal hacia tu windows/linux

0
9799Puntos
3 meses

Si es necesario, y tener Xcode instalado y configurado