42

Tutorial: Hola Mundo con Flutter

14288Puntos

hace un año

Curso de Flutter
Curso de Flutter

Curso de Flutter

Flutter es el framework de Google para desarrollar interfaces móviles nativas en iOS y Android, basado en los principios de Material Design y Cupertino (iOS) tendrás un look and feel totalmente natural en tus aplicaciones. Desarrolla aplicaciones móviles nativas de alta calidad y mucho más rápido usando Flutter.

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 Flutter
Curso de Flutter

Curso de Flutter

Flutter es el framework de Google para desarrollar interfaces móviles nativas en iOS y Android, basado en los principios de Material Design y Cupertino (iOS) tendrás un look and feel totalmente natural en tus aplicaciones. Desarrolla aplicaciones móviles nativas de alta calidad y mucho más rápido usando Flutter.
Ann
Ann
@anncode

14288Puntos

hace un año

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

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

7
14288Puntos
un año

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í!! 😃

4
6546Puntos
un año

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 😄

4
10869Puntos
un año

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

2
4Puntos

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
12Puntos
un año

Genymotion

1
635Puntos
9 meses

@janet54 Encontraste alguna solución, tengo el mismo problema. En github he creado un issue . Espero puedan encontrar una solución. Lo interesante es que con React Native normal corre en Genymotion con el procesador AMD.

2
1289Puntos

Esperar el lanzamiento de este curso! Flutter

1
3781Puntos
un año

¿Lo van a lanzar? ¿Cuándo?

2
1659Puntos

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

2
1301Puntos

Excelente tutorial de Flutter. Muy claro y conciso.

2
5201Puntos

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.

2
479Puntos

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

Puedo ejecutar las en mi móvil sin necesidad de usar un emulador 😃

1
71Puntos

Me pueden decir que carrera debo seguir para poder hacer este curso?

1
71Puntos

Hola estimada @anncode, en flutter ¿existe una estructura de directorios para poder aplicarlo en proyectos de mayor complejidad?. Agradecería tu colaboración

1

muy buenas, descargue el android studio 3.2.1, sincronize la implementacion que es el 28.0.0 todo salio bien, en la actividad cuando inserto un cuadro de texto de google me envia varios errores, la verdad no se cual es la solucion, gracias

1
3822Puntos

Me gustaría un curso completo de flutter y dark, por mi parte ya estoy aprendiendo lo básico

1
4462Puntos

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

Saludos desde Bolivia

1
4245Puntos
un año

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

1
14288Puntos
un año

Si es necesario, y tener Xcode instalado y configurado

1
1141Puntos

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