[ABCD2021Winter]Flutterアプリ開発実践

ABCD 2021 Winterの「Flutterアプリ開発実践」のセッション資料です。

#abcd2021w #androidjp #flutterjp

Transcript

1. 2021.12.11 ਆݪ ݈Ұ (@korodroid) FlutterΞϓϦ։ൃ࣮ફ
2. About me •Mobile App Development •Speeches (e.g. 9 International confs.) •Writings (e.g. 6 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org ਆݪɹ݈Ұ (@korodroid)
3. About my product (Private works) Sekaiphone(Kotlin/Swift+Firebase) MyToDo(Flutter+Firebase)
4. •ԡ͓͖͍͑ͯͨ͞Tips •࣮ફςΫχοΫ Agenda
5. ԡ͓͖͍͑ͯͨ͞Tips
6.  Tips 1. ϥΠϒςϯϓϨʔτͷ׆༻
7. Tips 1. ϥΠϒςϯϓϨʔτͷ׆༻ class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } } //Before: ΢ΟδΣοτΛશͯखॻ͖  //After: stless/stful/stanim+[Tab]Ωʔ
8. ΑΓଟ͘ͷςϯϓϨʔτ  Tips 1. ϥΠϒςϯϓϨʔτͷ׆༻
9. Tips 1. ϥΠϒςϯϓϨʔτͷ׆༻ සग़͢Δίʔυ͸ɺࣗલςϯϓϨʔτԽ΋͓͢͢Ί 
10.  Tips 2. ίʔυΞγετػೳͷ׆༻
11. Widgetͷબ୒& ALT+ENTER  Tips 2. ίʔυΞγετػೳͷ׆༻
12. Tips 3. FlutterGenͷ׆༻ ΞηοτɾϑΥϯτɾΧϥʔ౳ͷ؅ཧࢧԉ // Before class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return Image.asset("assets/images/chara1.png"); } } // After  ref. FlutterGen: https://github.com/FlutterGen/ fl utter_gen
13. ࣮ફςΫχοΫ
14. Android: Kotlin, iOS: Swift Android/iOS:Flutter എܠ. Flutter΁ͷҠߦ 
15. ૺ۰ͨ͠໰୊ͱରࡦ 1. ෳࡶͳUI 2. ঢ়ଶ؅ཧ 3. ϥϯλΠϜύʔϛογϣϯ 
16. 1. ෳࡶͳUI  Ͳ͏΍࣮ͬͯݱ͢Δʁ •Step1. ը૾ͷ௥Ճ •Step2. ը૾ͷॏͶ߹Θͤ •Step3. Ґஔ߹Θͤ Ϧιʔε … 100 
 images
17. Step1. ը૾ͷ௥Ճ(with FlutterGen) flutter: assets: - assets/images/imgKokkiLeftl.png # - assets/images/ pubspec.yaml 
18. Step2. ը૾ͷॏͶ߹Θͤ (How?) ref. Stack: https://api. fl utter.dev/ fl utter/widgets/Stack-class.html + + 
19. Widget _getKokkiImage() { return Stack( children: [ Assets.images.kokkiEn.image( height: 80.0, ), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Assets.images.imgSpeak.image( height: 24, ), ], ); ref. Stack: https://api. fl utter.dev/ fl utter/widgets/Stack-class.html Step2. ը૾ͷॏͶ߹Θͤ 
20. Step3. Ґஔ߹Θͤ //Before Widget _getKokkiImage() { return Stack( children: [ Assets.images.kokkiEn.image( height: 80.0, ), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Assets.images.imgSpeak.image( height: 24, ), ], ); 
21. Step3. Ґஔ߹Θͤ (How?) ref. Positioned: https://api. fl utter.dev/ fl utter/widgets/Positioned-class.html 
22. // After Widget _getKokkiImage() { return Stack( children: [ Assets.images.kokkiEn.image( height: 80.0, ), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Positioned( left: 4.0, top: 60.0, child: Assets.images.imgSpeak.image( height: 24, ), ), ), ], ); } Step3. ϨΠΞ΢τˍҐஔ߹Θͤ 
23. 2. ঢ়ଶ؅ཧ ͚ͩ͜͜ߋ৽ 
24. 2. ঢ়ଶ؅ཧ  •StatefulWidget •Provider (InheritedWidget) •Riverpod •Bloc •GetX •… ಛ௃Λཧղͯࣗ͠෼ͷߟ͑Ͱબ୒͢Δ͜ͱ͕େ੾
25. 2. ঢ়ଶ؅ཧ  •StatefulWidget •Provider (InheritedWidget) •Riverpod •Bloc •GetX •… ಛ௃Λཧղͯࣗ͠෼ͷߟ͑Ͱબ୒͢Δ͜ͱ͕େ੾
26. ྫ. GetXΛ༻͍ͨঢ়ଶ؅ཧ  ൺֱతγϯϓϧʹར༻Մೳ // Before Text(‘Χ΢ϯλʔ’), Text("$count"), // After class MainController extends GetxController { var count = 0.obs; increment() => count++; } [View]main_view.dart [Controller]main_contoroller.dart // After final MainController c = Get.put(MainController()); Text(‘Χ΢ϯλʔ’), Obx(() => Text(“${c.count}”)),
27. GetXͷศརػೳ  ͦͷଞʹ΋ଟ͘ͷศརػೳ Get.to(NextScreen()); Get.toNamed(‘/details'); Get.back(); ը໘ભҠ(ൈਮ) Get.snackbar('͓஌Βͤ', ‘৽ணΫʔϙϯ͕͋Γ·͢ɻ'); Get.defaultDialog( title: "֬ೝ", content: Text("ࠓ͙͢ɺϢʔβొ࿥͠·͔͢ʁ"), confirm: TextButton( child: Text("Ok"), onPressed: () => print("OK࣌ͷॲཧ"), )); ϢʔςΟϦςΟ(ൈਮ) ※↑Ҏ֎ʹ΋͞·͟·ͳػೳ͕ఏڙ͞Ε͍ͯ·͢ɻ
28. 3. ϥϯλΠϜύʔϛογϣϯ 
29. ंྠͷ࠶ൃ໌ͷલʹ https://pub.dev/ 
30. My choice: permission_handler ϥΠϒϥϦͷ௥Ճ ϥΠϒϥϦͷΠϯϙʔτ 
31. ྫ. ϥϯλΠϜύʔϛογϣϯͷར༻ཁٻ // ϚΠΫػೳͷར༻ύʔϛογϣϯͷཁٻ var status = await Permission.microphone.request(); औಘͰ͖Δ݁Ռͷྫ - Granted - Denied - PermanentlyDenied - Restricted 
32. Conclusion •Tipsˍ࣮ફςΫχοΫΛ׆༻ͯ͠ޮ཰తͳ։ൃΛʂ •ࣗ෼ͨͪͷϕλʔϓϥΫςΟεΛฤΈग़͢ͷ͕͓͢͢Ίʂ •Flutterͷੈք΋੝Γ্͍͖͛ͯ·͠ΐ͏🏃  ref.1 : Twitter @korodroid ref.2 : Speaker Deck https://speakerdeck.com/korodroid/
33.  Please let me know if you have any requests 
 such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much