46

Tutorial: Hola Mundo con Flutter

26734Puntos

hace 6 años

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.

Ann
Ann
anncode

26734Puntos

hace 6 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
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
5889Puntos

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

1

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

1
164Puntos

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

1
32482Puntos

Hola, amigos.

Me subí al tren de Flutter, llevo algunas semanas trabajando en crear un mapa de apoyo para que estudiantes, maestros y familia puedan asegurar la transición entre niveles y reducir la repetición de grados.

Si tienes curiosidad y un tiempito, agradeceré un poco de retroalimentación. También me encantará responder cualquier duda.

5to grado
Ciencias Nturales y Tecnología