Dart and Flutter were introduced, with Dart being a programming language and Flutter a framework for building native mobile apps using Dart. Everything in Flutter is represented as widgets, which can be stateless or stateful. The app lifecycle in Flutter was also discussed, including how to observe lifecycle state changes. Finally, ways to integrate native code and a sample currency exchange app project called "Mimi" were briefly presented before opening for questions.

1. Dart / Flutter： Hands-on
Casper Chiang / 18.07.2018
casperchiang@chocolabs.com / cychiang0823@gmail.com
github.com/cychiang / medium.com/@cy.chiang

2. Outline
01 What is Dart / Flutter?
02 Fultter so far
03 Mini-project
04 Live Demo
05 Q&A

3. Who Am I
Casper Chiang (江川)
- Big Data Solution Architect @CHOCO MEDIA
- Interesting in:
- Data Analysis Pipeline & System Architecture
- Kubernetes / Service Mesh(Istio)
- Flutter / AngularDart
- Neo4j
- Image Processing / Pattern Recognition /
Machine Learning
- ...
- Love to program in Go / Dart / Python

4. There is no JS / React Native TODAY

5. How many of you know “Dart” before?

6. How many of you know “Flutter” before?

7. What is Dart / Flutter?

8. Dart
-
-
-
-
-
-
-
-
void main() {
print('Hello World');
}

10. Flutter: Build beautiful native apps
-
-
-
-
-
-
-

13. Everything is Widget

17. Stateless / Stateful

18. Stateless
-
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Do something
)
}
}

19. Stateful
-
class MyStatefulWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyStatefulWidget> {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Do something
)
}
}

20. App Life cycle in Flutter?

21. App life cycle in flutter
-
-
-
-
-
-
-
-

22. class MyStatefulWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyStatefulWidget> with WidgetsBindingObserver {
AppLifecycleState _lastLifecycleState;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
setState(() {
_lastLifecycleState = state;
});
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
...
}

23. Integrate with Native Code?

25. Mimi project: exchanger

26. Full of

27. exchanger-appexchanger-server
exchanger-protos
gRPC
gRPC: server gRPC: client
open_exchange_rates currency_icons
protobuf

28. -
-
-
-
-
-
-
-
-
-
-
Exchanger - All avaliable in github

29. Hands-on experiences

30. Modularize everything if possible

31. Reference:

32. Widget & Logic

33. -
-
-
-
-

34. Order Business Logic
Sink<String>
order
Stream<OrderResult>
results
Stream<String>
log
Api
EatInApi TakeOutApi
Widget
Send order Receive result

35. StreamBuilder / FutureBuilder

36. Live Demo?

38. Q & A