Brief explanation of Flutter(Android / iOS cross platform development framework made by Google), presented on May 2018 at developers meetup, by Hyperconnect Inc.

1. My cross platform app
development experience with
Flutter
And its bright and dark sides
16 - May - 2018
Francesco Jo (nimbusob@gmail.com)

2. Table of Contents
- Dart language characteristics
- Bright and dark side of Flutter
- Live code demo
- Conclusion

3. Dart language at the first glance (1/2)
- JAVA minor copy / Degenerated Groovy
// Thanks god it would be hopeless if there’s macro in this language
typedef O transformer(I input);
typedef void VoidCallback();
abstract class StateTemplate<T extends StatefulWidget> extends State<T> {
bool _isBuilt = false; //// Library-level private
@override void setState(VoidCallback fn) {
if (_isBuilt) {
super.setState(fn);
} else {
fn.call();
}
}
}

4. Dart language at the first glance (2/2)
- JAVA styled Javascript… or something… an abomination?
var name = 'Voyager I';
var year = 1977;
var antennaDiameter = 3.7;
var flybyObjects = ['Jupiter', 'Saturn', 'Uranus', 'Neptune'];
var image = {
'tags': ['saturn'],
'url': '//path/to/saturn.jpg'
};
static const String label_ok = “Okay”;
final myObject = new MyObject(); // Reference(s) inside object can be modified
const personality = const Personality(); // Object is totally immutable

5. Dart language characteristics
- Similar syntax to the most widely used programming languages
- Could be procedural / object-oriented / functional
- Syntactically no primitive types. Smalltalk/Strongtalk in action?
- No function/method overloading
- Mirror(Reflection) support
- Single-threaded programming model (async/await, .then(...))
- Code reuse by mix-in
- No public, private, protected

6. Flutter explained - the bright side
- Still in BETA - many things would be better in the future
- Greatly inspired by React Native(RN)
- Small but very responsive developer community
- Internationalisation(i18n), localisation(l10n) support
- Material, Cupertino design support
- Perfect IDE integration with IntelliJ IDEA or Android Studio
- Hot reload support
- No freakin’ UI lifecycle, everything are reactive
- No JSX
- 100% Open source

7. - Literally everything in Flutter is “Widgets”
- Easily to code business logic inside UI logic, which seems not
desirable(Reactive architecture is forced to avoid this problem)
- UI can be formed with composition of StatefulWidget and
StatelessWidget, those should be immutable
- Simple(push-pop) but handy UI navigation
- No reliance on platform widgets
- Consistent 60 fps environment
- No bytecode/IL/JS source inside package. Damn hard to reverse-engineer
Flutter explained - Flutter original

8. Flutter explained - the dark side
- Dart as the first citizen programming language
- No Reflection support(although Dart allows it). No excuse, this is inevitably
BAD for large scaled applications
- Embedding native UI is IMPOSSIBLE in 2018
- We must choose MaterialApp or CupertinoApp by our own
- If you code your MaterialApp strongly dependent to Material Scaffold
and trying to code iOS side, you’re doomed
- Lack of iOS examples and factory default widgets
- I18n support is nearly useless in 2018. Produces non-compilable code

9. Flutter’s Reactive architecture
- According to the official document:
- Everything’s a Widget
- Every logic are separated as 2 categories: UI changer or not
- We can tell state-changer is “Stateful”, and standalone logic is “Stateless”
- There are StatefulWidget and StatelessWidget in Flutter
- Only StatefulWidget can hold its state
- No invalidate(), but setState() for our custom State<T> bound to
MyCustomWidget extends StatefulWidget

10. StatelessWidget and StatefulWidget

11. UI redrawing in Flutter
State<PopupMenuButton>

12. Live code demo
Demo with more practical case
- Fetches list of image metadata from network
- Parse the metadata
- Show a list of image thumbnails and its description
- And let’s see what happens if we change the UI of this list
- https://github.com/FrancescoJo/practice_flutter_imagelist

13. Conclusion
- Different experience vs. ‘native’ Android/iOS development
- Code in reactive way is forced which is a good decision
- Not a silver bullet for “code once, run everywhere” concept
- Dart as first citizen language - most mobile developers prefer Kotlin/Swift, I bet
- Platform abstraction problem will linger forever
- “unnatural” UI sometimes. Maybe fixed, but another problem will arise
- Strong competitor: React Native, Progressive webapp
- Close to “Major upgrade” of webapp (Mar. 2018 current) rather than native
substitute
- Very productive in quick and dirty coding development - good for prototyping
- ‘might’ replace our good old Android development in the far future

14. Good posts to read
- Flutter technical overview
- https://flutter.io/technical-overview/
- “Dart is not the language you think it is.”
- https://developers.slashdot.org/story/13/05/21/2123245/dart-is-not-the-language-you-think-it-is
- “Is Flutter likely to replace Android app development?”
- https://www.quora.com/Is-Flutter-likely-to-replace-Java-for-Android-app-development
- “Why Flutter will change mobile development for the best”
- https://android.jlelse.eu/why-flutter-will-change-mobile-development-for-the-best-c249f71fa63c
- “Using Flutter in a real-life application with 200k downloads”
- https://medium.com/google-developer-experts/using-flutter-in-a-real-life-application-with-100k-
downloads-ab64ecd8e03f

15. The end