Flutter es el SDK de aplicaciones móviles de Google para crear interfaces nativas de alta calidad en iOS y Android en un tiempo récord. Sirve para crear fácilmente app móviles modernas, bonitas y de alto desempeño Funciona para Android y iOS Es una herramienta open-source, desarrollada por Google Actualmente se encuentra en Beta 3 Listo para producción.

1. Introducción a
Flutter
• Victor Alfonso Rodas Ona
• Fb.com/victordevcode
• victordevcode@gmail.com
@VictorRancesCode

3. • Flutter es el SDK de aplicaciones móviles de Google para crear
interfaces nativas de alta calidad en iOS y Android en un tiempo
récord.
• Sirve para crear fácilmente app móviles modernas, bonitas y de
alto desempeño Funciona para Android y iOS Es una herramienta
open-source, desarrollada por Google* Tiene más de 100
colaboraciones de la comunidad open source
• Actualmente se encuentra en Beta 3 Listo para producción.
Qué es Flutter?

4. • ¿Qué tipo de aplicaciones puedo construir con Flutter?
• Flutter está optimizado para aplicaciones móviles 2D que desean
ejecutarse tanto en Android como en iOS.
• Puede crear aplicaciones completas con Flutter, que incluyen
cámara, geolocalización, red, almacenamiento, SDK de terceros y
más.
• ¿Con qué tecnología está fabricado Flutter?
• Flutter está construido con C, C ++, Dart y Skia (un motor de
renderización 2D).

5. • Los programadores de Google y de otros lugares usan Dart para crear
aplicaciones de misión crítica de alta calidad para iOS, Android y la web. Con
características destinadas al desarrollo del lado del cliente, Dart es ideal para
aplicaciones móviles y web.
Flutter y Dart

6. • Productivo
• La sintaxis de Dart es clara y concisa, sus herramientas son simples pero poderosas. El
mecanografiado sano te ayuda a identificar los errores sutiles temprano. Dart tiene bibliotecas
centrales endurecidas por la batalla y un ecosistema de miles de paquetes.
• Rápido
• Dart ofrece la optimización de la compilación anticipada para obtener un alto rendimiento
predecible y un inicio rápido en dispositivos móviles y la web.
• Portátil
• Dart compila código ARM y x86, de modo que las aplicaciones móviles Dart pueden ejecutarse
nativamente en iOS, Android y más. Para aplicaciones web, Dart transpila a JavaScript.
Dart

7. • Accesible
• Dart es familiar para muchos desarrolladores existentes, gracias a su orientación y sintaxis de
objetos no sorprendente. Si ya conoce C ++, C # o Java, puede ser productivo con Dart en solo
unos días.
• Reactivo
• Dart es muy adecuado para la programación reactiva, con soporte para administrar objetos de
corta duración, como widgets UI, a través de la asignación rápida de objetos de Dart y el
recolector de basura generacional. Dart es compatible con la programación asincrónica a través
de características de lenguaje y API que usan objetos Future y Stream.
Dart

9. • Diseñadores que desean una experiencia de marca
convergente tanto en Android como en iOS
• Prototipadores que buscan alta fidelidad y una forma
rápida de construir prototipos interactivos.
• Programadores que pueden beneficiarse de las
herramientas de desarrollo, un lenguaje sencillo y una
rica librería de widgets. Flutter ayuda a ahorrar tiempo
de desarrollo para crear experiencias memorables.
¿Para quién es Flutter?

10. Analogía de HTML/CSS con Flutter
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}

12. $ flutter doctor
Revisa el entorno y muestra un reporte en la ventana de la terminal
$ flutter upgrade
Actualiza tanto el SDK de Flutter así como los otros paquetes

13. pubspec.yaml
name: flutter_project
description: An amazing Flutter project using Firebase Auth
dependencies:
flutter:
sdk: flutter
firebase_auth: "^0.2.5"

14. pubspec.yaml
name: flutter_project
description: An amazing Flutter project using Firebase Auth
dependencies:
flutter:
sdk: flutter
firebase_auth: ">=0.1.2 <0.2.6"

15. $ flutter packages get
Revisa el entorno y muestra un reporte en la ventana de la terminal
$ flutter packages upgrade
Buscará la versión más reciente disponible del paquete

16. $ flutter format
Automáticamente formatea tu código de acuerdo al estilo de Flutter
$ flutter analyze
Analiza tu código y te ayuda a encontrar errores

17. Inserta código actualizado dentro
de la máquina virtual de Dart
que se está ejecutando
Stateful: El estado de la app se
mantiene después de la
actualización. Sirve para iterar
con rapidez en una pantalla que
se encuentra en un nivel de
navegación profundo dentro de tu
app
Hot Reload

19. Widgets que se ven bien y funcionan bien
• El equipo analizó aplicaciones populares y notó muchos widgets
personalizados. Así que Flutter está diseñado para permitir eso.

20. Todo es un Widget

21. new Center(
child: new Text('Texto Centrado', style: textStyle),
)
Estilos locales: Cada widget define su propio estilo. No hay
necesidad de decirle al widget padre que sus hijos se supone
que deben ir centrados.
Adiós, sistema de
posicionamiento global

22. El sistema de Widget de Flutter fue diseñado para ser
fácilmente personalizable.
Composición: Los widgets se construyen sobre widgets más
pequeños que se pueden reutilizar y combinar para hacer
widgets personalizados.
class RaisedButton extends StatelessWidget {
...
}
Personalizando y extendiendo
Widgets

23. Arquitectura
Skia Dart Text
Base
Animación Pintado
Renderizado
Widgets
Material
Gestos
Engine
(C++)
Framework
(Dart)
Cupertino
Skia es el mismo motor de gráficos que usa Android. Este está
construido directamente desde la fuente, compilado cada vez
que construyes Flutter El motor de texto es de Blink, el motor
de renderizado de Chromium.

26. Al utilizar canales de
plataforma podemos recibir
y enviar resultados.

27. Ejemplo: Obtener el estado de la batería*
class MainActivity() : FlutterActivity() {
private val CHANNEL = "samples.flutter.io/battery"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
GeneratedPluginRegistrant.registerWith(this)
MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
// TODO
}
}
}
* Example written in Kotlin for Android

28. Trabajando con el argumento de la respuesta*
MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
if (call.method == "getBatteryLevel") {
val batteryLevel = getBatteryLevel()
if (batteryLevel != -1) {
result.success(batteryLevel)
} else {
result.error("UNAVAILABLE", "Battery level not available.", null)
}
} else {
result.notImplemented()
}
}
* Example written in Kotlin for Android

29. Invocación desde Flutter de los métodos de plataforma
String _batteryLevel = 'Unknown battery level.';
Future<Null> _getBatteryLevel() async {
String batteryLevel;
try {
final int result = await platform.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level at $result % .';
} on PlatformException catch (e) {
batteryLevel = "Failed to get battery level: '${e.message}'.";
}
setState(() {
_batteryLevel = batteryLevel;
});
}

30. “Al correr a 60 fps, las interfases de usuario creadas con
Flutter tienen un mejor desempeño que las que fueron
creadas en otros frameworks de desarrollo
multiplataforma.”
code.tutsplus.com/tutorials/developing-an-android-app-with-flutter--cms-28270

31. “Programar con Dart y Flutter me ayudó a disfrutar de
nuevo lo que hacía cuando comencé a desarrollar para
móviles hace unos años..., sin $%&@”
traversoft.com/blog/2017/08/08/conference-app-flutter

32. "La UI es fluida y elegante (al compilar una versión de
producción), nunca había visto una app para Android tan
fluida"
Pascal Welsch, ponente en Droidcon Berlin

33. Recursos y Ejemplos
• Proyecto App Esperanza
• https://github.com/VictorRancesCode/Esperanza
• Proyecto Ebay Search
• https://github.com/VictorRancesCode/flutter-ebay-search
• Proyecto Lib. Json to Form
• https://github.com/VictorRancesCode/json_to_form
• Proyecto Lib. Flutter Dialogflow
• https://github.com/VictorRancesCode/flutter_dialogflow
• Awesome Flutter
• https://github.com/Solido/awesome-flutter
• Blog: What’s Revolutionary about Flutter por Wm Leler
• https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
• Flutter
• https://github.com/flutter
• https://flutter.io/

34. Gracias Hasta la Próxima