La magia de Flutter
•Descargar como PPTX, PDF•
2 recomendaciones•1,036 vistas
Flutter es un SDK de Google para crear aplicaciones móviles para Android e iOS de forma rápida y con un solo código base. Permite diseñar interfaces gráficas mediante widgets reutilizables y personalizables que se actualizan en tiempo real, ofreciendo un excelente desempeño.
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a La magia de Flutter
Similar a La magia de Flutter (20)
Más de Mauricio Angulo Sillas
Más de Mauricio Angulo Sillas (10)
Último
Último (20)
La magia de Flutter
- 1. La Magia de Flutter Mauricio Angulo S. UX Strategist & Sprintmaster mauricio@tesseractspace.com @mauricioangulo | @tesseractspace Basado en la presentación de Tim Messerschmidt - Regional Lead, Developer Relations messerschmidt@google.com | @SeraAndroid
- 2. Trabajo en Tesseract Space, una empresa mexicana como consultor en experiencia de usuario y sprintmaster certificado. Soy miembro del grupo de Google Experts y de la iniciativa de Microsoft Regional Director como mentor en usabilidad, diseño y desarrollo de software. En 2014 fundé UX Nights, una comunidad sobre experiencia de usuario. Soy escritor, ponente internacional, maestro de UX en la Universitat Pompeu Fabra en Barcelona, sensei de UX en Dev.f y formador técnico en LinkedIn Education. > www.about.me/mauricioangulo > https://developers.google.com/experts/people/mauricio-angulo > @mauricioangulo Mauricio Angulo S.
- 3. ¿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* Tiene más de 100 colaboraciones de la comunidad open source * Actualmente se encuentra en Beta
- 4. ¿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.
- 7. ¿Qué es lo que ves aquí?
- 8. 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?
- 9. Diseño de abajo hacia arriba
- 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. 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
- 19. 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
- 20. El Poder de los Widgets
- 21. Widgets que se ven bien y funcionan bien
- 22. Todo es un Widget
- 23. 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.
- 25. 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 { ... }
- 26. Cada capa se construye sobre la anterior Skia Dart Texto Bases Animación Pintado Renderizado Widgets Material Gestos Engine (C++) Framework (Dart) Cupertino
- 27. Canales de la Plataforma
- 28. Al utilizar canales de plataforma podemos recibir y enviar resultados.
- 29. 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 } } }
- 30. 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
- 31. 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; }); }
- 33. - Compila a código nativo - No depende de widgets de terceros - No se necesitan puentes - Repintado estructural
- 34. Frameworks Reactive en la Web Comparar Actualizar DOM Real DOM Virtual Aplicación Plataforma R e n d e r Canvas Eventos
- 35. Frameworks Reactive en Móviles Comparar Actualizar Widgets de la plataforma Widgets Virtuales Aplicación Plataforma R e n d e r Canvas Eventos
- 37. Basado en Dart
- 38. - Sistema de tipado sencillo - Tree Shaking - Bibliotecas base enriquecidas - Multi-gen, lockless GC
- 39. - Una sola base de código para Android y iOS - Ciclos de desarrollo rápidos - Buenas herramientas
- 40. “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
- 41. “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
- 42. "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
- 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! Mauricio Angulo S. UX Strategist & Sprintmaster mauricio@tesseractspace.com @mauricioangulo | @tesseractspace Basado en la presentación de Tim Messerschmidt - Regional Lead, Developer Relations messerschmidt@google.com | @SeraAndroid
Notas del editor
- Brand-driven == customized Internal teams at Google (CRM system) have managed to build functioning prototypes in a week. Designers with 0 coding experiences became productive with Flutter in weeks - allowing them to build prototypes in hours.
- Quieron concentrarme en dos partes de Flutter, que personalmente admiro
- Permite construir rápidamente UIs que se ven bien. Después veremos algunos widgets
- When talking to a designer and a developer, you will most definitely receive two different answers, leading to different understanding of the same UI and effectively leading to confusion. We can avoid that by bringing in designers and developers early on and cooperate on the same language and same UI toolkit.
- Try to place some of the implementation into functions to avoid deeply nested code
- There is a whole section in the Flutter docs that deals with this and helps people familiar with HTML and CSS to quickly become productive designers with Flutter
- If I wanted to limit the package to a specific range of versions, I could do that with the following syntax. Very similar to what Gradle offers you on Android.
- Formatter also exists for IntelliJ using the Dart plugin Analyzer also runs automatically in IntelliJ with the Flutter plugin
- The beauty of hot reload is, that even after fixing an error, state is still maintained - allowing to iterate and develop far quicker.
- Also available via IntelliJ’s built-in debugger
- The team analyzed popular apps and noticed a lot of custom widgets. So Flutter is designed to allow for that. Composition goes over inheritance
- This could be centering a text (by wrapping it in a center widget) or putting three column items into a row (widget).
- StatelessWidget is used for immutable elements that only rely on the object configuration information StatefulWidget is used for elements that can dynamically change based on state-changes in the system Everytime that state changes, setChange() is called by the object
- RaisedButton combines a Material widget with a GestureDetector widget
- Skia is the same graphics engine that Android uses. This one is built directly from source - compiled whenever you build Flutter The text engine is from Blink, the rendering engine from Chromium. Layout for text is terribly hard - think about right to left, displaying dates and more. Every layer of the Framework builds upon the layer below it. For instance, the Material and Cupertino layers compose basic widgets from the widgets layer, which itself orchestrates objects from the rendering layer. This also allows to customize the framework as you please. This part of the beauty of Dart’s tree shaking mechanism (eliminates dead code).
- If you’re coming from Android: this is very similar to serialization of data and then sending it across a channel - similar to an event bus or Intent
- Let’s focus on the blue bit for a second to understand how you’d do this on Android
- This works completely analog on iOS using Swift
- The call may fail – for example if the platform does not support the platform API (such as when running in a simulator), so we wrap the invokeMethod call in a try-catch statement.
- Flutter comes with it’s own widgets and renderer No support library needed. Not depended on OEM updates. Thanks to composition, we can only redraw what changed Bit blitting moved items that didn’t change from Cache
- The virtual DOM is immutable and needs to be rebuilt every frame - so 60 times per second when targeting 60fps
- The app being in control of the renderer gives it more potential for controlling animations
- Dart as a language is designed to be reliable. No surprises, no magic that can create confusion. Very familiar for people with background in Java, JS, C# and more
- Coming with Dart 2: sound type system (static and runtime type checks) Used to be optional in Dart 1 Dealing with Reactive Views requires dealing with a lot of small objects Here’s where Dart’s GC is super helpful Tree shaking != dead code elimination It only includes what you need instead of eliminating what you don’t need Originally written in JavaScript and C++. Tested out about 20 languages until the team ended up with Dart. Compiles to native so C++ isn't even needed anymore.