Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flutter Beta but Better and Better

103 views

Published on

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

Published in: Software

Flutter Beta but Better and Better

  1. 1. Flutter Beta but 강동혁 Better and Better
  2. 2. • (현) 쇼플릭 대표 • 단비랩스 CTO • 맥스트 Senior Researcher • 한솔헬스케어 Dev Team Leader • SK커뮤니케이션즈 과장 • 네트빌 Junior Researcher • Java, PHP, Python, Shell Script, Javascript, Lua, ASP • AWS, Docker, Linux, MySQL 강동혁 2
  3. 3. Flutter 3
  4. 4. •Open source By Google •Mobile development SDK for iOS and Android •Dart •Widgets and Widget Tree 4
  5. 5. Mobile Development History 5
  6. 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. 7. Dart 7
  8. 8. I WILL FIND YOU AND KILL YOU, JAVASCRIPT
  9. 9. CATCH ME IF YOU CAN
  10. 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. 11. Building beautiful native apps 11
  12. 12. Material Components Widgets 12 Scaffold Appbar BottomNavigationBar TabBar IconButton
  13. 13. Drawer FloatingActionButton PopupMenuButton Date & Time Pickers SimpleDialog Card GridView ListTile
  14. 14. Cupertino (iOS-style) Widgets 14 CupertinoNavigationBar CupertinoActivityIndicator CupertinoTabBar CupertinoSwitch CupertinoSlider CupertinoDialog CupertinoPicker
  15. 15. Widgets & Widget Tree 15
  16. 16. •Stateless Widgets • 상태 없음 • Icon, IconButton, Text •Stateful Widgets • 상태에 따라 위젯이 변동 • Checkbox, Radio, Form, TextField • 상태는 State 객체에 저장 • 위젯의 상태가 변경될 때, setState() 호출하여 위젯을 다시 그림 16
  17. 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. 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. 19. Widget Tree 19
  20. 20. Fast Development 20
  21. 21. Hot Reload & Restart 21
  22. 22. 22
  23. 23. IDE Friendly 23
  24. 24. Android Studio IntelliJ Visual Studio Code 24
  25. 25. Widget Inspector 25
  26. 26. Native Performance 30
  27. 27. Web View React Native Flutter
  28. 28. Google I/O ’18 on Flutter 32
  29. 29. • 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
  30. 30. 34 Material Design Firebase Flutter Building beautiful mobile apps easily + ↓ +
  31. 31. Build reactive mobile apps with Flutter 35
  32. 32. 36
  33. 33. ScopedModel (model) ScopedModelDecendant ScopedModelDecendant
  34. 34. “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.”
  35. 35. 해외 사례 44
  36. 36. Google AdWords
  37. 37. 국내 사례 48
  38. 38. 49
  39. 39. 51
  40. 40. 52
  41. 41. 53
  42. 42. 54
  43. 43. 55
  44. 44. 56
  45. 45. 57
  46. 46. 58
  47. 47. 59
  48. 48. 60
  49. 49. How to Learn 61
  50. 50. • 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
  51. 51. 결론 및 전망 63
  52. 52. •구글 vs 오라클 자바 특허 분쟁 •구글 – 오픈소스 기반 기술 플랫폼 지향 •Android, Go Lang, Chromium, Angular, gRPC, Kubernetes, TensorFLow, Material Design •Dart & Flutter 64
  53. 53. •Beta •Issues out there •WebView, MapView native component issues •Better and Better •Easy & Convenient •Beautiful design •Fast 65
  54. 54. Dart vs TypeScript Flutter vs React Native 66
  55. 55. Build beautiful mobile apps easily with Flutter
  56. 56. Thank You 68 fb.com/kangdonghyeok wolfkang@gmail.com

×