INTRODUCCIÓN AL

DESARROLLO MÓVIL
CON FLUTTER
Módulo I
1. Introducción al curso.
2. ¿Que es flutter?
3. Anatomia de flutter
4. Creación del proyecto
5. Preparación de entorno de desarrollo
6. Creación app bombillo
7. Reto: Simple app

Primer clase
Mucho tiempo
¿Para cuando en iOS?
La quiero en
mi iPad la app

Debería estar
para todos!!!
¿Por que no está en
la AppStore?
Aprender ahora
desarrollo para
iOS

Mucho tiempo después

● Kit de herramientas
(SDK) compiladas
nativamente.
● Lanzada en el 2017 por
Google.
● Aplicaciones
multiplataforma.
● Desarrollo en Dart.
DART
DART
DART
DART
DART

Tour dart:

https://dart.dev/guides/l
anguage/language-tour
 Propio renderizado
(widgets)
Bridge
Material Design
Material Design

Más información en:

https://material.io/
Cupertino Design
Anatomía de Flutter
 Bombillo App
¿Qué aprenderemos?
● Crear un proyecto
● Estructura de un proyecto
● Material App y Scaffold
● Agregar imágenes a un proyecto
● Cambiar icono de la aplicación
● Manera correcta de escribir código en
Flutter
Reto App
¡Muchas
gracias!
Módulo II
1. Revisión reto app
2. Hot reload y hot restart
3. Layouts
● Single child (Container-Padding-Margin)
● Multi-child (Columns y Rows)
4. Reto Columns and rows
5. App Identificador de desarrollador
● Fonts
● Pre built widgets
7. Reto Sofka directorio
Segunda clase
Hot reload & Hot restart

Ver código
El tamaño no importa!
 Widgets - SingleChild
Container Div

https://api.flutter.dev/flutter/widgets
/Container-class.html

Ver código
 Widgets - MultiChild
Column Row

https://api.flutter.dev/flutter/widgets https://api.flutter.dev/flutter/widgets
/Column-class.html /Row-class.html

Ver código
Widgets - MultiChild

● https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363
348d037e (maquetar UI con filas y columnas)
Widgets - Challenge
¿Qué aprenderemos?
● Single child widget
● Multi child widget
● Material App y Scaffold (Refuerzo)
● Pre built widgets
● Fonts
 Reto App

Solución:
https://flutter.dev/docs/development/ui/layout/tutorial
¡Muchas
gracias!
Módulo II
1. Revisión reto
2. Estados de los widgets
● Stateless (Sin estado)
● StateFul (Con estado)
3. Reto WhatsAppClone
4. Navegación entre pantallas con Navigator.

Tercera clase
 Stateless (Sin estado)
Los widgets de este tipo no
reaccionan ante el intento de
interacción con el usuario. No tienen
asociado una acción o
comportamiento particular. Son
estáticos en la interfaz. Por ejemplo:
Icono, Texto, Contendor con color,
entre otros.
Stateless (Sin estado)

Ver código
 StateFul (Con estado)
Son todos los widgets con los que el
usuario de la aplicación puede tener
una interacción directa. Por ejemplo:
Checkbox, Radio, Slider, Form. Este
tipo de widgets por lo general
disparan algún evento, acción o
comportamiento determinado como
respuesta a la interacción con el
usuario.
StateFul (Con estado)
StateFul (Con estado)
StateFul (Con estado)

Ver código
Arquitectura de Widget
WhatsApp Clone
¿Qué aprenderemos?
● Temas de material
● Implementación de stateFul widgets
● Componentes de material
● Pre built widgets (Refuerzos)
● Fonts (Refuerzos)
● SliverList
(https://medium.com/comunidad-flutter/slivers-d
esenmascarado-a44781aa7597)
 Dudas

● SliverList
● TabController
● InitState
● Tamaño cámara
● Scaffold
 Navigator
¿Qué aprenderemos?
● Cómo funciona el flujo de pantallas en
dispositivos móviles
● Ir de una pantalla a otra
● Pasar información entre pantallas
● Ir a otra pantalla y volver únicamente con el back
● Ir a otra pantalla y volver con información
● Navegar a otra pantalla con animación
● Navegar a otra pantalla y eliminar de la pila la
actual
Flujo de navegación y pila
Flujo de navegación y pila
Flujo de navegación y pila
Flujo de navegación y pila
Flujo de navegación y pila
Flujo de navegación y pila
Flujo de navegación y pila
¡Muchas
gracias!
Módulo III
1. Introducción al asincronismo con Dart
(Isolates y event loops)
2. Futures
3. Async/Await
4. Traer datos de internet.
 (Isolates y event loops)
Isolates (Aislamientos): Es como un pequeño espacio
en la máquina con su propia porción de memoria privada
y un solo hilo que ejecuta un bucle de eventos.

*Por rendimiento, debemos de ejecutar tareas complejas

o costosas en otro Isolate que no sea el principal.
(Isolates y event loops)

Un Isolate puede enviar un mensaje a otro Isolate, y el receptor lo interpreta usando un bucle
de eventos (event loops).
 (Isolates y event loops)
Event loops (Bucle de eventos): Es una línea de tiempo en donde se procesan eventos que
ocurren dentro de la aplicación, del más antiguo al más reciente.
(Isolates y event loops)

“Aquí hay un código, ejecutalo más tarde”

 ¿Cuando usarlos?

En la medida de lo posible usar Future para

darle al usuario la sensación de que el
código trabaja en paralelo aunque no lo
esta.

https://medium.com/comunidad-flutter/modos-de-ejecuci%C3%B3n-de-c%C3%B3digo-en-fl
utter-f7941030e3a1
Future

https://hp-api.herokuapp.com/
Future

Ver código
 Traer datos de internet

● Json to Dart class

● FutureBuilder
● Mostrar datos en la UI

https://hp-api.herokuapp.com/
 SplashScreen

Pantalla de presentación de la
aplicación al usuario, donde
generalmente esta el logo de la
app y la empresa o dueños de
la aplicación.

Dash imagen:
https://miro.medium.com/max/4000/1*ahk6
_yAMJB-YOdteacYVbw.png
 Proyecto final
La OMS necesita de tu ayuda como programador por lo que te dan la siguiente API:

● https://documenter.getpostman.com/view/10808728/SzS8rjbc?versio=&versio
n=latest

Se necesita una app que tenga lo siguiente:

1. Primer tab: Información general sobre el covid y de Colombia
2. Información global con el listado de países.
3. Opcional (Al dar click a un país, ir al detalle)
4. Diseño totalmente libre.
Proyecto final
 Proyecto final
¿Que se necesita? // Recursos
1. JSON to Dart plugin.
2. Traer datos de internet (Future).
3. TabPage o BottomNavigationBar en Flutter (https://flutter.dev/docs/cookbook/design/tabs o
https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html)

4. Vectores, iconos, imagenes (https://www.flaticon.com/, https://icons8.com/)

5. Navigator y pasar data.
6. Endpoints puntual, filtrar por slug = ‘colombia’
○ https://api.covid19api.com/summary

https://drive.google.com/drive/folders/1NVI0f0ote9lqsPl0-FJGygXj9oijIe2H?usp=sh
aring iconos y response
Referencias:
● Documentación oficial de Flutter https://flutter-es.io/docs
● Canal oficial de Flutter en YouTube
https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw
● Introduction to Flutter development por App Brewery
https://www.appbrewery.co/courses/enrolled/851555
● Curso de Flutter por Platzi https://platzi.com/clases/flutter/
● Curso Avanzado de Flutter por Platzi https://platzi.com/clases/flutter-avanzado/
● Road map
https://medium.com/flutter-community/a-practical-road-map-for-flutter-developm
ent-e247e2d64eb8
● Modos de ejecución de código en Dart
https://medium.com/comunidad-flutter/modos-de-ejecuci%C3%B3n-de-c%C3%
B3digo-en-flutter-f7941030e3a1
¡Muchas
gracias!