2018년 6월 10일 GDG Korea 이 주최한 I/O Extended 2018 Seoul 에서 발표한 Flutter 소개 및 전망 발표자료입니다.

1. Flutter Beta but
강동혁
Better and Better

2. • (현) 쇼플릭 대표
• 단비랩스 CTO
• 맥스트 Senior Researcher
• 한솔헬스케어 Dev Team Leader
• SK커뮤니케이션즈 과장
• 네트빌 Junior Researcher
• Java, PHP, Python, Shell Script, Javascript,
Lua, ASP
• AWS, Docker, Linux, MySQL
강동혁
2

3. Flutter
3

4. •Open source By Google
•Mobile development SDK for iOS and
Android
•Dart
•Widgets and Widget Tree
4

5. Mobile Development History
5

6. 6
2007.6
iPhone
(Objective C)
2007
2008.7
App Store
2008.9
Android
(Java)
2009.6
Appcelerator
Titanium(HTML5)
2009
PhoneGap(HTML5)
2009.12
Corona SDK(Lua)
2010.7
Sencha Touch(HTML5)
2012.12
Xamarin(C#)
2011.3
Appspresso(HTML5)
2013.11
Ionic(HTML5)
2015.1
React Native(JavaScript)
2015.3
NativeScript(JavaScript)
2017.5
Flutter Alpha(Dart)
2018.2
Flutter Beta
2018

7. Dart
7

8. I WILL FIND YOU AND KILL YOU, JAVASCRIPT

9. CATCH ME IF YOU CAN

10. 2011.10 Dart 1
• General-purpose programming language
• Object-oriented, class defined, single inheritance
• C-style syntax similar to JavaScript, Java
2018.2 Dart 2
• Type system
• Compiled as JavaScript by dart2js
• Stand-alone Dart VM
• For web, server and mobile applications
• Fastest growing language inside Google
10

11. Building beautiful native apps
11

12. Material Components Widgets
12
Scaffold
Appbar BottomNavigationBar TabBar
IconButton

13. Drawer FloatingActionButton PopupMenuButton Date & Time Pickers
SimpleDialog Card GridView
ListTile

14. Cupertino (iOS-style) Widgets
14
CupertinoNavigationBar
CupertinoActivityIndicator
CupertinoTabBar
CupertinoSwitch
CupertinoSlider
CupertinoDialog
CupertinoPicker

15. Widgets & Widget Tree
15

16. •Stateless Widgets
• 상태 없음
• Icon, IconButton, Text
•Stateful Widgets
• 상태에 따라 위젯이 변동
• Checkbox, Radio, Form, TextField
• 상태는 State 객체에 저장
• 위젯의 상태가 변경될 때, setState() 호출하여 위젯을
다시 그림
16

17. class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget titleSection = new Container(
child: new Row(
children: [
new Expanded(
child: new Column()
),
new FavoriteWidget(),
],
),
);
return new MaterialApp();
}
}
17

18. @override
Widget build(BuildContext context) {
return new Row(
children: [
new Container(
child: new RaisedButton(
child: new Text(widget.title),
onPressed: _toggleFavorite,
),
),
new SizedBox(
child: new Container(
child: new Text('$_favoriteCount'),
),
),
],
18
class FavoriteWidget extends StatefulWid
get {
final String title;
FavoriteWidget(this.title);
@override
_FavoriteWidgetState createState()
=> new _FavoriteWidgetState();
}
class _FavoriteWidgetState extends State
<FavoriteWidget> {
int _favoriteCount = 41;
void _toggleFavorite() {
setState(() {
_favoriteCount += 1;
});
}

19. Widget Tree
19

20. Fast Development
20

21. Hot Reload & Restart
21

22. 22

23. IDE Friendly
23

24. Android Studio
IntelliJ
Visual Studio Code
24

25. Widget Inspector
25

30. Native Performance
30

31. Web View
React Native
Flutter

32. Google I/O ’18 on Flutter
32

33. • I/O '18 Guide - Flutter
• I/O '18 Guide - Interview on Flutter Beta 3
• Customize Material Components for your product
• Build great Material Design products across platforms
• Code beautiful UI with Flutter and Material Design
• Total mobile development made fun with Flutter and
Firebase
• Add Firebase to your cross-platform React Native or
Flutter app
• Build reactive mobile apps with Flutter
33

34. 34
Material Design
Firebase
Flutter
Building beautiful mobile apps easily
+
↓
+

35. Build reactive mobile apps with Flutter
35

36. 36

40. ScopedModel
(model)
ScopedModelDecendant
ScopedModelDecendant

43. “If there’s one thing that we’d like you to take away from this,
It’s that Flutter’s widgets, in combination with Streams, gives you a ver
y reactive way to not only handle your UI but handle the flow of data
through your app, and handle the updating of your UI when that data
changes. So we highly recommend you go and check out Dart Stre
ams, and the rxdart as an option for building state in your apps.”

44. 해외 사례
44

46. Google AdWords

48. 국내 사례
48

49. 49

51. 51

52. 52

53. 53

54. 54

55. 55

56. 56

57. 57

58. 58

59. 59

60. 60

61. How to Learn
61

62. • https://flutter.io
• https://codelabs.developers.google.com/?cat=Flutter
• Youtube Channels
• Google Developers
• Tensor Programming
• Brandon Donnelson
• VoidRealms
• Fluttery ★
• Facebook Group
• Flutter Mobile App Developers
• 구글 Flutter 한국 사용자 그룹
62

63. 결론 및 전망
63

64. •구글 vs 오라클 자바 특허 분쟁
•구글 – 오픈소스 기반 기술 플랫폼 지향
•Android, Go Lang, Chromium, Angular, gRPC,
Kubernetes, TensorFLow, Material Design
•Dart & Flutter
64

65. •Beta
•Issues out there
•WebView, MapView native component issues
•Better and Better
•Easy & Convenient
•Beautiful design
•Fast
65

66. Dart vs TypeScript
Flutter vs React Native
66

67. Build beautiful mobile apps easily
with Flutter

68. Thank You
68
fb.com/kangdonghyeok
wolfkang@gmail.com