Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[ABCD2021Winter]Flutterアプリ開発実践

 [ABCD2021Winter]Flutterアプリ開発実践

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

#abcd2021w #androidjp #flutterjp

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

December 11, 2021
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

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