Flutter Overview

Talk about Flutter, new entrant in Cross Platform Mobile Application Development and also discuss the capability along with Pros and Cons with existing Cross Platform Mobile Application Development SDK's.

Transcript

1. Flutter Overview Anuj Panwar
2. Agenda • What is Flutter? • Architecture Overview • Widgets • Performance • PoC Demo • Questions
3. What is Flutter? • A SDK that makes building high-performing, modern and beautiful apps easy • Works for both Android and iOS • An open-source toolkit, developed by Google (Released in May 2017) • 100+ contributions from the open source community • Widget can be re-rendered whenever state changes
4. Why? • Learn Once • High Performance compile AOT • Good Tooling support with IDE • Its not web-app • Fast Startup Time
5. Ionic Source: https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
6. React Native Source: https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
7. OEM Android and iOS Source: https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
8. Flutter Source: https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
9. Flutter Architecture Source: flutter.io
10. Widgets • Widget based UI, Everything is Widget • Stateful and Stateless Widget • Flutter’s Widget system was designed to be easily customizable • Composition: Widgets are built out of smaller widgets that you can reuse and combine in novel ways to make custom widgets
11. Widgets Source: flutter.io
13. Widgets • Constraints Flow Top to Bottom • Local layouts: Every Widget defines it’s own layout. No need to tell the parent that it’s children are supposed to be centered. new Center( child: new Text('Centered Text', style: textStyle), )
14. Few Examples Source: flutter.io
15. DART • Dart is AOT (Ahead Of Time) compiled to fast, predictable, native code. (Can be Used as JIT) • Tree Shaking • Dart makes it easier to create smooth animations and transitions that run at 60fps. • Dart can do object allocation and garbage collection without locks • Everything’s an object—no “primitives” • Dart allows Flutter to avoid the need for a separate declarative layout language like JSX, XML, interface builders • Google uses Dart for web application development for dozens of different projects including Google Ads, Google Shopping
16. Key Pointers Recap • Everything is Widget • Runtime Widget Tree Rendering • The advantages of reactive views, with no JavaScript bridge • Compiles directly to native ARM Code • Stateful Hot Reload • Lockless GC
17. Drawbacks • Maturity • Learning Curve • No Preview of UI without running application
18. PoC Demo
19. Efficient Tooling • flutter doctor • flutter upgrade • Pubspec.yml (Add dependencies) • flutter packages get/upgrade • flutter analyze • Statement-level single-stepping debugger and profiler • See which lines of code have executed • Check out memory allocations • Debug memory leaks & fragmentation
20. References Blog: What’s Revolutionary about Flutter by Wm Leler: goo.gl/bZcFR9 Video: Flutter's Rendering Pipeline by Adam Barth: youtu.be/UUfXWzp0-DU Video: The Mahogany Staircase by Ian Hickson: youtu.be/dkyY9WCGMi0 And of course: github.com/flutter & flutter.io
21. Questions