Curso de Bases Técnicas de Android

Curso de Bases Técnicas de Android

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Flutter la nueva forma de hacer interfaces en Android y iOS

20/27

Lectura

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.

Aportes 44

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Me gustaría un curso donde enseñaran mas a fondo como programar en Android, ya he hecho 6 cursos de esta ruta y aún tengo muchas dudas sobre como programar. Los cursos han sido muy buenos explicando interfaz gráfica pero si me ha hecho mucha falta entender muchos conceptos de programación y más iniciando desde cero. Muchas gracias!!

Flutter se ha convertido en una de mis herramientas de desarrollo favoritas 😄
Tuve la oportunidad de dar una ponencia sobre el desarrollo de apps en esta tecnología, aquí les comparto la presentación que hice:
https://docs.google.com/presentation/d/1gu--04D4j2Wh9-1aNAxAvUcDJUfJdODQUpWthUVzTo4/edit
Además hice una app de demostración, que es para mensajería, les comparto el repositorio en github de esta app por si alguien la quiere revisar
https://github.com/carlosmoran97/mussol_messenger
Este fue el resultado final:



Algunos inconvenientes que tuve que solucionar, porque difería al tutorial:

1 - Los plugins están en “File > Settings > Pluggins” (Tengo Android Studio 3.3).

2 - Para no tener que dejar el SDK de Flutter en la carpeta Downloads, la moví a “C://src/flutter”. NO la dejen en “C://flutter”, porque no va a funcionar (requiere mas permisos)

3 - Para que Android Studio auto detecte la ubicación de flutter, lo agregue a las variables de entorno. Inicio > Buscar > Path > Variable de entorno > Path > Agreguen “C://src/flutter”.

4 - La tarta es una mentira.

Saludos!

Vamos a hecharle un ojo a Fluter

tomo un buen tiempo pero ya esta!

No vi ningún “Hola Mundo”.

lo mas chevere de platzi es que siempre te tiene con las innovaciones de la industria

Ya esta el curso de Flutter?

El curso de Dart deberia estar despues de este 😃

Realmente no pude realizarlo , estaria muy bueno que pudieran explicarlo de manera gráfica en fvideos.

Flutter es genial, aunque me falta aprenden muchas cosas estoy contento y espero que la comunidad siga creciendo 😄

Bueno aun sea lo más fácil del mundo creo que lo que realmente me hace falta es I-M-A-G-I-N-A-C-I-O-N

Flutter hace mas facil la creacion de interfazes, pero usar solo Flutter para Interfaz es desperdiciar a Dart que nos da un soporte total para desarrollar cualquier app

x2

parece interesante como funciona Flutter y si me gustaria otro curso para aprender a usarlo

Esperando un curso completo de Flutter!

Si me gustaría un curso completo de flutter.

Si! Me encantaria ver un curso de Flutter, lo postiivo de esto es que dentro de pocos dias va a estar disponible! GRACIAS. 😄

https://platzi.com/clases/flutter/

Ya lo lleve aquí en Platzi, es muy bueno, se los recomiendo.
Dale uno con Flutter y Firebase por favor Ann Code.

Me inscribí en platzi principalmente por el curso que promocionaste sobre Flutter, pero mientras espero el inicio estoy estudiando todo lo que puedo y felicidades, lo haces muy bien.

Seria bueno tener un blog sobre como trabaja flutter a comparacion de react native, pros y contra.

Ademas seria bueno saber cual es la proyeccion de google con respecto a flutter

Me tomó un bueen, pero lo logramos! Me encanta! Gracias Anahí!

Tengo una APP en Android y iOS nativos, recomiendas migrar a Flutter?

Con esto queda bien amarrado que es Flutter

Sii, Seria genial un curso completo de Flutter y Dart.

Excelente tutorial!.

Interesante manera de conocer flutter!!!

Si me encantaría un curso…! se ve super interesante

Estoy deseando ponerme con este curso pero creo que primero forjaré las bases para tener un stack estable y así adentrarme con mas facilidad en Flutter 😃

Sería genial tomar el curso de Flutter!!

la parte donde sale el emulador no me da me dice no devices que hago

una pregunta, con flutter puedo hacer todo, o la UI con flutter y el resto con JAVA o KOTLIN. Gracias

interesante

Que interesante

Yo estoy emulando en Genymotion, aunque también en mi dispositivo móvil

Entonces flutter es una nueva forma de crear interfaces gráficas??? entonces si es asi no sustituye a kotlin o java para la parte lógica de la app

me gustaria ver a anahi dando un bue curso de dart… la primera ves que trabaje con flutter fue fabuloso y lo sigue siendo

bueno, me hubiera gustado intentar esto, pero no tengo una buena pc como para hacerlo
y este tutorial solo esta enfocado para Android Studio

Funcionando, claro que lento pero funcionando

¿Que tan robusto es Flutter para incorporarlo en alguna aplicación empresarial?.

Dicen que flutter es bastane robusto.

La mejor tecnologia para desarrollar android e iOS que conozco

Se pueden crear interfaces con Flutter y seguir la lógica con Java o Kotlin?