Flutter forward
Building Native Apps in Flutter
by Ryan Edge
Ryan Edge
I build multiplatform applications for Web, Desktop, and Mobile
I ❤️ Flutter and React
Interested in JavaScript?
What is Flutter?
Flutter is a portable UI toolkit for building beautiful native applications for mobile, web, and desktop from a single codebase.
Sky: the experiment
- The brainchild of 2 Chrome engineers: Ian Hickson & Eric Siedel
- The experiment: "what if the browser without backwards compatibility?"
Why Flutter?
Why Flutter?
Success stories aplenty
- Getting started with Flutter was truly awesome. The huge power and productivity you get with instant stateful Hot Reload was mind-blowing – Jacob Kristensen, Co-Founder, Reflectly
- We knew that this app needed to be rock solid both in terms of performance and visual fidelity, and really represent the amazing experience that the Hamilton show itself provides – Jessica Wagner, Manager, Posse (Hamilton)
- Flutter significantly reduced the time we need to develop for a new feature from 1 month down to 2 weeks – Bruce Chen, Senior Development Engineer, Alibaba
More success stories
Is Flutter production ready?
Yes
Developer productivity
| Screen | Native Android |
Native iOS | Flutter | Xamarin Forms | React Native |
|---|---|---|---|---|---|
| Cocktail list | 5h 34m | 6h 17m | 4h 39m | 6h 29m | 6h 14m |
| Cocktail detail | 7h 08m | 5h 23m | 3h 24m | 6h 55m | 3h 54m |
| Ingredient list | 3h 58m | 3h 23m | 2h 27m | 5h 04m | 3h 10m |
| Create cocktail | 5h 35m | 4h 56m | 3h 39m | 5h 55m | 4h 31m |
| Total | 22h 15m | 19h 59m | 14h 09m | 24h 23m | 17h 49m |
Time spent
Can Flutter increase developer productivity?
Yes
Application performance
| Native Android | Flutter | Xamarin |
React Native | |
|---|---|---|---|---|
| Minimum | 0 | 0 | 0 | 0 |
| Maximum | 30.1 | 23 | 33.9 | 43.4 |
| Mean | 7.29 | 5.42 | 12.7 | 13.41 |
| Median | 5.4 | 4.4 | 8.3 | 10.75 |
| Standard deviation | 6.02 | 5.08 | 11.13 | 11.22 |
| Coefficient of variation | 36.2 | 25.78 | 123.92 | 126.07 |
CPU-usage
Can Flutter build performant applications?
Yes
Flutter's ideas are not new
- Ship the framework with the application
- Like a game development platform.
- Multiplatform targets
- Like React Native, Xamarin, etc.
- Extensible component system
- Like web, Android, iOS
How does Flutter stand out?
What separates Flutter from the crowd is that it seeks to help developers increase app quality and development velocity while reaching more users.
Feature parity with cost efficiency
- The same features cost more for every platform
- Maintaining multiple platforms is expensive & resource intensive
Availability & reliability
- Android, iOS, macOS, and Web all supported. Linux & Windows under development.
- Guaranteed reliability because of native compilation
How does Flutter accomplish this?
- Control over every pixel
- Compiles to native, GPU accelerated
- Sub-second development cycles w/persisted state
Why Dart?
Why Dart?
- Strongly typed, object-oriented language
- Optimized for UI development
- Developed by Google
Technical overview
Reactive Framework
Layered Cake architecture
Code First UI
- No domain specific language
- Everything is a widget
How do I get started?
Getting started: tooling & tutorials
- VS Code or Android Studio/Intellij
- Widget inspector
- DevTools
- Dart analyzer
Getting started: Community
- Talk to QC Flutter members and attend a meetup
- Join an online community
Conclusion
- All client application development is an exercise in compromise.
- Flutter aims to reduce compromises
- Flutter is ready for production
- Flutter can improve developer productivity.
- Flutter can perform well in most use cases
Show me the code!
Flutter forward: Building Native Apps in Flutter
By Ryan Edge
Flutter forward: Building Native Apps in Flutter
Flutter has quickly become a hot topic, ascending to the fastest-growing skill according to LinkedIn just a year after its 1.0 release. Let’s explore Flutter: what it is, what problems it solves, and what differentiates it from an expanding field of client application development solutions.
