Upgrade to PRO for Only $50/Yearโ€”Limited-Time Offer! ๐Ÿ”ฅ

GDG DevFest Suwon 2018 - Flutter 101 (Jake Yoon)

Avatar for GDG Suwon GDG Suwon
November 13, 2018

GDG DevFest Suwon 2018 - Flutter 101 (Jakeย Yoon)

GDG DefFest Suwon Flutter 101 - Jake Yoon

Avatar for GDG Suwon

GDG Suwon

November 13, 2018
Tweet

More Decks by GDG Suwon

Other Decks in Technology

Transcript

  1. Goal of Session 1. ์š”์ฆ˜ ๋ชจ๋ฐ”์ผ ๊ฐœ๋ฐœ ํŠธ๋žœ๋“œ ์•Œ๊ธฐ 2.

    Flutter๋Š” ๊ทธ๋ž˜์„œ ๋“ฑ์žฅํ–ˆ๊ตฌ๋‚˜ 3. Flutter ๋ฐ๋ชจ๋ฅผ ๋ณด๋ฉฐ, ์‹ค์ œ๋กœ ์“ฐ๋ฉด ์ด๋ ‡๊ตฌ๋‚˜ Flutter 101 a.k.a. Flutter for Android Devs Suwon
  2. Global App Economy Growing from $1.31tn to $6.35tn Between 2016

    and 2021 Source: App Annie Estimated / Forecasts. Numbers include mobile commerce, app store, in-app purchases. $0.22tn โ€˜17 revenue of year $1.53th โ€˜17 GDP of South Korea * 28 * 4 Flutter 101 a.k.a. Flutter for Android Devs Suwon
  3. Number of mobile app downloads worldwide In 2017, 2018 and

    2022 Source: App Annie Forecast 2017-2022, Statista 15% โ–ฒ 25% โ–ฒ Flutter 101 a.k.a. Flutter for Android Devs Suwon
  4. User Session Length: Apps vs. Mobile Web Source: comScore Mobile

    App Report, U.S., Age 18+, June 2017 Apps Mobile Web 186.9 Average minutes per visitor 15.7 10x โ–ฒ Flutter 101 a.k.a. Flutter for Android Devs Suwon
  5. What boosts app usage ? Source: Think with Google 63%

    Simplification, design and UX boost app usage Make my life easier 63% Clear instructions for using app 57% Appealing design and aesthetic 57% Consistent experience on multiple devices 47% Always has new content 43% Brand I interact with offline Flutter 101 a.k.a. Flutter for Android Devs Suwon
  6. Suwon ๋‹ค์‹œ ์ •๋ฆฌํ•ด๋ณด๋ฉด โ€ฆ - ๋ชจ๋ฐ”์ผ ์‹œ์žฅ์€ ์•„์ง ๋๋‚˜์ง€ ์•Š์•˜๊ณ ,

    - ๋ชจ๋ฐ”์ผ ์›น ๋ณด๋‹ค๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์„ ๋” ์˜ค๋žœ์‹œ๊ฐ„ ์‚ฌ์šฉํ•˜๋ฉฐ, - ์•ฑ์„ ๋” ์‚ฌ์šฉํ•˜๊ฒŒ ํ•˜๋ ค๋ฉด ๋””์ž์ธ์„ ์‹ฌํ”Œํ•˜๊ฒŒ ํ•ด์•ผ ํ•œ๋‹ค. Flutter 101 a.k.a. Flutter for Android Devs Suwon
  7. 1 9 17 25 33 2 10 18 26 3

    11 19 27 4 12 20 28 5 13 21 29 6 14 22 30 7 15 23 31 8 16 24 32 ํ™•๋ฅ ์— ๋„์ „ํ•˜์„ธ์š”. (1) Suwon Flutter 101 a.k.a. Flutter for Android Devs Suwon
  8. Flutter 101 a.k.a. Flutter for Android Devs Suwon Suwon 1

    9 17 25 33 2 10 18 26 3 11 19 27 4 12 20 28 5 13 21 29 6 14 22 30 7 15 23 31 8 16 24 32 ์ •๋‹ต : 1
  9. Suwon 1 9 17 25 33 2 10 18 26

    3 11 19 27 4 12 20 28 5 13 21 29 6 14 22 30 7 15 23 31 8 16 24 32 ํ™•๋ฅ ์— ๋„์ „ํ•˜์„ธ์š”. (1) Flutter 101 a.k.a. Flutter for Android Devs Suwon
  10. Flutter 101 a.k.a. Flutter for Android Devs Suwon Suwon 1

    9 17 25 33 2 10 18 26 3 11 19 27 4 12 20 28 5 13 21 29 6 14 22 30 7 15 23 31 8 16 24 32 ์ •๋‹ต : 1
  11. Suwon 3% of new mobile app users remain active after

    30 days Source: AppsFlyer Flutter 101 a.k.a. Flutter for Android Devs Suwon
  12. Suwon ๋‹ค์‹œ ํ•œ๋ฒˆ ๋” ์ •๋ฆฌํ•ด๋ณด๋ฉด โ€ฆ - ๋ชจ๋ฐ”์ผ ์‹œ์žฅ์€ ์•„์ง

    ๋๋‚˜์ง€ ์•Š์•˜๊ณ , - ๋ชจ๋ฐ”์ผ ์›น ๋ณด๋‹ค๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์„ ๋” ์˜ค๋žœ ์‹œ๊ฐ„ ์‚ฌ์šฉํ•˜๋ฉฐ, - ์•ฑ์„ ๋” ์‚ฌ์šฉํ•˜๊ฒŒ ํ•˜๋ ค๋ฉด ๋””์ž์ธ์„ ์‹ฌํ”Œํ•˜๊ฒŒ ํ•ด์•ผ ํ•œ๋‹ค. - ์ƒˆ๋กญ๊ฒŒ ์ถœ์‹œ๋œ ์•ฑ์ด 30์ผ ๋’ค์—๋„ ์‚ฌ์šฉ๋  ํ™•๋ฅ ์€ 3% ์ด๋‹ค. - ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ๋งŒ๋“ค๋ฉด ๋„ˆ๋ฌด ๋งŽ์€ ๊ฒƒ์„ ์œ ์ง€๋ณด์ˆ˜ ํ•ด์•ผ ํ•˜๊ณ , ๋„ค์ดํ‹ฐ๋ธŒ๊ฐ€ ์•„๋‹ˆ๋ฉด ์ œ๋Œ€๋กœ ๋งŒ๋“ค๊ธฐ ์–ด๋ ต๋‹ค. - ํฌ๋กœ์Šคํ”Œ๋žซํผ์ด ๋Œ€์„ธ์ด๋‹ค. Flutter 101 a.k.a. Flutter for Android Devs Suwon
  13. Suwon ๋‹ค์‹œ ํ•œ๋ฒˆ ๋” ์ •๋ฆฌํ•ด๋ณด๋ฉด โ€ฆ ์ฆ‰, ์‚ฌ์šฉ์ž๋Š” ์›น ๋ณด๋‹จ

    ๋„ค์ดํ‹ฐ๋ธŒ ์ด๋ฉด์„œ, ๋””์ž์ธ๋„ ์‹ฌํ”Œํ•œ ์•ฑ์„ ์›ํ•˜๋ฉฐ ๋ชจ๋ฐ”์ผ ๊ฐœ๋ฐœ์ž๋Š” ๋„ˆ๋ฌด ๋งŽ์€ ๊ฒƒ์„ ์œ ์ง€๋ณด์ˆ˜ ํ•˜์ง€ ์•Š์•„๋„ ๋˜๋Š” ๊ฒƒ์„ ์›ํ•œ๋‹ค Flutter 101 a.k.a. Flutter for Android Devs Suwon
  14. - ๊ตฌ๊ธ€์˜ ๋ชจ๋ฐ”์ผ SDK - ํฌ๋กœ์Šค ํ”Œ๋žซํผ์„ ์œ„ํ•œ ๋ชจ๋ฐ”์ผ UI

    ํ”„๋ ˆ์ž„์›Œํฌ - ์–ธ์–ด : ๋‹คํŠธ(Dart) - ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ (https://github.com/flutter) What is Flutter? Flutter 101 a.k.a. Flutter for Android Devs Suwon
  15. ๋น ๋ฅธ ์†๋„์˜ ๊ฐœ๋ฐœ Hot Reload ๋ฅผ ํ†ตํ•ด ๋งค์šฐ ์งง์€ ์‹œ๊ฐ„

    ๋‚ด์— ์ฝ”๋“œ ๋ฐ˜์˜ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ์Œ Flutter's hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android. Flutter 101 a.k.a. Flutter for Android Devs Suwon
  16. ๋น ๋ฅธ ์†๋„์˜ ๊ฐœ๋ฐœ Android Studio, IntelliJ, Visual Studio Code ๋ฅผ

    IDE๋กœ ์ง€์›ํ•˜์—ฌ ๋ณด๋‹ค ์ต์ˆ™ํ•œ ํ™˜๊ฒฝ์—์„œ ๋น ๋ฅด๊ฒŒ ์‹œ์ž‘ ๊ฐ€๋Šฅ Flutter 101 a.k.a. Flutter for Android Devs Suwon
  17. ํ’๋ถ€ํ•˜๊ณ , ์•„๋ฆ„๋‹ค์šด UI Delight your users with Flutter's built-in beautiful

    Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness. Google์˜ ๋จธํ„ฐ๋ฆฌ์–ผ ๋””์ž์ธ๊ณผ iOSํ–ฅ ์ฟ ํผํ‹ฐ๋…ธ ์œ„์ ฏ์„ ์ œ๊ณตํ•˜์—ฌ, ํ’๋ถ€ํ•˜๊ณ  ์•„๋ฆ„๋‹ค์šด UI๋ฅผ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ ๊ฐ€๋Šฅ Flutter 101 a.k.a. Flutter for Android Devs Suwon
  18. ๋„ค์ดํ‹ฐ๋ธŒ ์„ฑ๋Šฅ Flutterโ€™s widgets incorporate all critical platform differences such

    as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android. Scrolling, Navigation, Icons, Fonts์™€ ๊ฐ™์€ ์ค‘์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ๋„ค์ดํ‹ฐ๋ธŒ์˜ ์„ฑ๋Šฅ์œผ๋กœ ์ œ๊ณตํ•œ๋‹ค. Flutter 101 a.k.a. Flutter for Android Devs Suwon
  19. Dart - ๊ตฌ๊ธ€์ด ๊ฐœ๋ฐœํ•œ ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด - AOT (Ahead

    Of Time), JIT (Just In Time) ์ง€์› - React ๊ด€๋ จ ๊ธฐ๋Šฅ (Future, Stream) ์ œ๊ณต - ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ (https://github.com/dart-lang) Flutter 101 a.k.a. Flutter for Android Devs Suwon
  20. Why Flutter Uses Dart - AOT์™€ JIT์„ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์— (์ƒ์‚ฐ์„ฑโ–ณ)

    - Dart๋Š” 60FPS์˜ Animation์„ ๊ตฌํ˜„ํ•˜๊ธฐ์— ์ ํ•ฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— (์„ฑ๋Šฅโ–ณ) - Layout์ด ํ•˜๋‚˜์˜ ์ฝ”๋“œ๋กœ ํ†ตํ•ฉ ๋˜์–ด์žˆ์–ด, ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ํ•œ ๋ˆˆ์— ๋ณผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— (?!) - Dart๋Š” Java, C# ๋“ฑ๊ณผ ์œ ์‚ฌํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๊ฐ€ ์‰ฝ๊ฒŒ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Source: Hackernoon https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf Flutter 101 a.k.a. Flutter for Android Devs Suwon
  21. What is the equivalent of a View in Flutter? -

    In short, the equivalent of a View is a Widget. - Everything is a Widget. Flutter 101 a.k.a. Flutter for Android Devs Suwon
  22. - Stateless Widget is immutable and not updated directly. -

    for update we should use StatefulWidget. Source: Slideshare https://www.slideshare.net/abueldahab/google-flutter-and-why-does-it-matter What is the equivalent of a View in Flutter? Flutter 101 a.k.a. Flutter for Android Devs Suwon
  23. class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) {

    return Text( โ€I like Flutter!โ€, style: TextStyle(fontWeight: FontWeight.bold), ); // Text } } Flutter 101 a.k.a. Flutter for Android Devs GDG Suwon StatelessWidget
  24. StatefulWidget - ์ปจํ…์ธ ๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž์˜ Interaction๋“ฑ์œผ๋กœ ์ธํ•ด ๋‹ค์‹œ ๊ทธ๋ ค์ ธ์•ผ ํ•˜๋Š”

    Widget - createState๋ฅผ ์žฌ ์ •์˜ํ•ด์„œ State๋ฅผ ํ• ๋‹น - setState๋ฅผ ํ˜ธ์ถœํ•ด์„œ state์˜ ๋ณ€๊ฒฝ์„ ์•Œ๋ฆผ Flutter 101 a.k.a. Flutter for Android Devs Suwon
  25. class MyStatefulWidget extends StatefulWidget { @override State<StatefulWidget> createState() => MyWidgetState();

    } class MyWidgetState extends State<MyStatefulWidget> { โ€ฆ // next page } Flutter 101 a.k.a. Flutter for Android Devs GDG Suwon StatelessWidget
  26. class MyWidgetState extends State<MyStatefulWidget> { String textToShow = โ€œI like

    Flutter!โ€; void updateText() { setState(() { textToShow = โ€œFlutter is Awesome!โ€; } } @override Widget build(BuildContext context) { return Text( textToShow ); // Text } Flutter 101 a.k.a. Flutter for Android Devs GDG Suwon StatelessWidget
  27. How do I lay out my widgets? Where is my

    XML layout file? - In short, there is no XML file in Flutter. - In Flutter you write your layouts with a widget tree. Flutter 101 a.k.a. Flutter for Android Devs Suwon
  28. @override Widget build(BuildContext context) { return Scaffold ( appBar :

    AppBar ( title : Text(โ€œSample Appโ€); ), // AppBar body : Center ( child : MaterialButton ( onPressed : () {}, child : Text(โ€œHelloโ€); padding : EdgeInsets.only(left: 10.0, right: 10.0), ), // MaterialButton ), // Center ); // Scaffold } Flutter 101 a.k.a. Flutter for Android Devs GDG Suwon