Fundamentos de Flutter

Flutter es una plataforma (SDK) opensource creado por Google para creación de apps para móviles Android y iOS. En esta presentación, adaptada del material de Tim Messerschmidt se presenta una introducción técnica a la arquitectura del modelo de diseño/desarrollo en Flutter.

Transcript

1. Fundamentos de Flutter Mauricio Angulo S. Gerente de Diseño de UX mauricio.angulo@coppel.com about.me/mauricioangulo Noviembre 2019 Basado en la presentación de Tim Messerschmidt - Regional Lead, Developer Relations messerschmidt@google.com | @SeraAndroid
2. ¿Qué es Flutter? Un SDK que 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 Es uno de los proyectos opensource más populares en GitHub
3. ¿Para quién es Flutter? 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.
4. 1. Experiencia de Desarrollo 2. Desempeño
5. Design-oriented Development Flow
6. ¿Qué es lo que ves aquí?
7. Diagrama de composición - Observa las filas y columnas - ¿Hay alguna rejillas? - ¿Hay elementos que se traslapen? - ¿Necesitamos pestañas? - ¿Se necesita más espacio en los bordes, o mejorar la alineación?
8. Diseño de abajo hacia arriba
9. 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; }
10. Herramientas eficientes
11. $ 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
12. pubspec.yaml name: flutter_project description: An amazing Flutter project using Firebase Auth dependencies: flutter: sdk: flutter firebase_auth: "^0.2.5"
13. 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"
14. $ 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
15. $ 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
16. Hot Reload 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
18. Es una herramienta de depuración y perfilamiento paso a paso Corre automáticamente cuando se inicia una app usando flutter run Sirve para: - Ver cuáles líneas de código se han ejecutado - Revisar asignaciones de memoria - Depurar fugas de memoria y fragmentación Dart Observatory
19. El Poder de los Widgets
20. Widgets que se ven bien y funcionan bien
21. Todo es un Widget
22. Adiós, sistema de posicionamiento global 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.
23. StatefulWidget vs. StatelessWidget
24. Personalizando y extendiendo Widgets 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 { ... }
25. Cada capa se construye sobre la anterior Skia Dart Texto Bases Animación Pintado Renderizado Widgets Material Gestos Engine (C++) Framework (Dart) Cupertino
26. Canales de la Plataforma
27. Al utilizar canales de plataforma podemos recibir y enviar resultados.
28. Ejemplo: Obtener el estado de la batería* * Ejemplo escrito en Kotlin para Android 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 } } }
29. 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", "El nivel de la batería no está disponible.", null) } } else { result.notImplemented() } } * Ejemplo escrito en Kotlin para Android
30. Invocación desde Flutter de los métodos de plataforma String _batteryLevel = 'Nivel de la batería desconocido.'; Future<Null> _getBatteryLevel() async { String batteryLevel; try { final int result = await platform.invokeMethod('getBatteryLevel'); batteryLevel = 'Nivel de la batería al $result % .'; } on PlatformException catch (e) { batteryLevel = "No fue posible obtener el nivel de la batería: '${e.message}'."; } setState(() { _batteryLevel = batteryLevel; }); }
31. Optimizado para Desempeño
32. - Compila a código nativo - No depende de widgets de terceros - No se necesitan puentes - Repintado estructural
33. Frameworks Reactive en la Web Comparar Actualizar DOM Real DOM Virtual Aplicación Plataforma R e n d e r Canvas Eventos
34. Frameworks Reactive en Móviles Comparar Actualizar Widgets de la plataforma Widgets Virtuales Aplicación Plataforma R e n d e r Canvas Eventos
35. Usando Flutter Aŕbol de Widgets R e n d e r Canvas Eventos Aplicación Plataforma
36. Basado en Dart
37. - Sistema de tipado sencillo - Tree Shaking - Bibliotecas base enriquecidas - Multi-gen, lockless GC
38. - Una sola base de código para Android y iOS - Ciclos de desarrollo rápidos - Buenas herramientas
39. “Al correr a 60 fps, las interfaces 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
40. “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
41. "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
42. Empresas usando Flutter Más apps y casos de estudio en https://flutter.dev/showcase
43. Recursos adicionales Blog: What’s Revolutionary about Flutter por Wm Leler: goo.gl/bZcFR9 Video: Flutter's Rendering Pipeline por Adam Barth: youtu.be/UUfXWzp0-DU Video: The Mahogany Staircase por Ian Hickson: youtu.be/dkyY9WCGMi0 y por supuesto: github.com/flutter & flutter.io
44. ¡Gracias! Basado en la presentación de Tim Messerschmidt - Regional Lead, Developer Relations messerschmidt@google.com | @SeraAndroid Mauricio Angulo S. Gerente de Diseño de UX mauricio.angulo@coppel.com @mauricioangulo Noviembre 2019