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

SUZURIのAndroidアプリをFlutterで作っている話 / SUZURI-meets-Flutter

SUZURIのAndroidアプリをFlutterで作っている話 / SUZURI-meets-Flutter

Osamtimizer

May 14, 2020
Tweet

More Decks by Osamtimizer

Other Decks in Programming

Transcript

  1. ࣌ాཧ(.01FQBCP *OD
    ϖύϘɾ͸ͯͳٕज़େձʙ!ΦϯϥΠϯ
    46;63*ͷ
    "OESPJEΞϓϦΛ
    'MVUUFSͰ࡞͍ͬͯΔ࿩

    View full-size slide

  2. ϞόΠϧ8FCΞϓϦέʔγϣϯΤϯδχΞ
    ࣌ాཧ!PTBNUJNJ[FS
    46;63*ࣄۀ෦ϓϩμΫτνʔϜ
    IUUQTPTBNUJNJ[FSIBUFOBCMPHDPN

    View full-size slide

  3. ΦϦδφϧάοζ͕࡞ΕΔɺചΕΔɺങ͑Δɻ
    ը૾Λ1ຕΞοϓ
    ͢Δ͚ͩ
    ࣗಈతʹ঎඼͕
    Ͱ͖·͢
    ࣗ෼Ͱ΋ങ͑Δ͠ 

    ചΔ͜ͱ΋Ͱ͖·͢

    View full-size slide

  4. ͸͡Ίʹ
    wࢿྉ͸ޙ΄ͲΠϯλʔωοτ্Ͱެ։͠·͢
    wIUUQTTQFBLFSEFDLDPNPTBNUJNJ[FS

    View full-size slide

  5. ࠓ೔࿩͢͜ͱ
    wͳͥ46;63*ͷ"OESPJEΞϓϦ։ൃʹ'MVUUFSΛ࠾༻ͨ͠ͷ͔
    w'MVUUFSͱ͸Կ͔
    w'MVUUFSΛ࠾༻ͯ͠Α͔ͬͨ͜ͱ
    w'MVUUFSͰ։ൃ͢Δ্Ͱͭ·͍ͮͨ͜ͱ
    w'MVUUFSΛ࠾༻͢Δʹ͋ͨͬͯߟ͑Δ͜ͱ

    View full-size slide

  6. 46;63*"OESPJE
    ։ൃத

    View full-size slide

  7. ۙ೔தʹϦϦʔεʂ

    View full-size slide

  8. ࣮͸։ൃ͕଺͍ͬͯͨ

    View full-size slide

  9. "OESPJE൛ͷ։ൃఀ଺
    w"OESPJEઐ೚ͷϞόΠϧΞϓϦΤϯδχΞ͕͍ͳ͔ͬͨ
    w։ൃ్தͰ"OESPJEҎ֎ͷλεΫ༏ઌ౓্͕͕ͬͯ͠·ͬͨ
    wϑΝʔετϦϦʔε΁ͷ੎͍͕ࣦΘΕɺ์ஔ͞Ε͕ͪʹ

    View full-size slide

  10. 'MVUUFSͱͷग़ձ͍

    View full-size slide

  11. 'MVUUFSͱͷग़ձ͍
    wࣾ಺Ͱ'MVUUFSʹڵຯ͕͋Δਓ͕૿͍͑ͯͨ
    w'MVUUFSͷษڧ͕ͯΒɺ46;63*ͷΞϓϦΛࣗ༝ݚڀͰ࡞͍ͬͯͨ
    wࢥ͍ͬͯͨΑΓΞϓϦ͕ૉૣ͘࡞ΕΔ͜ͱ͕Θ͔ͬͨ
    wˠ"OESPJE൛Λ'MVUUFSͰ࡞Γ௚͢ʁ

    View full-size slide

  12. 'MVUUFS࠾༻Λݕ౼
    w"OESPJEઐ೚͸͍ͳ͍͕ɺαϙʔτ͸ड͚ΒΕΔ
    wJ04൛Λ͢ͰʹϦϦʔε͍ͯͨ͠
    wϑΝʔετϦϦʔεͰରԠ͢Δൣғ͕ܾ·͍ͬͯͨ
    w3FBDU/BUJWF΋ߟ͕͑ͨɺ3FBDUʹ௕͚ͨਓ͕νʔϜʹ͍ͳ͍
    w'MVUUFS΁ͷؔ৺͕ࣾ಺Ͱߴ·͍ͬͯͨ
    wJ04Λ4XJGU6*ʹ৐Γ׵͑ΔͨΊͷ஌ݟ΋ಘΒΕΔ

    View full-size slide

  13. 'MVUUFS࠾༻ΛܾΊͨͱ͖ͷྲྀΕ

    View full-size slide

  14. ͡Ό͋'MVUUFSͰ͍͖·͠ΐ͏

    View full-size slide

  15. 'MVUUFS
    w(PPHMF੡ͷ6*πʔϧΩοτ
    w"OESPJEJ04ΞϓϦΛ୯ҰͷίʔυϕʔεͰ࡞ΕΔ
    w 8FC σεΫτοϓΞϓϦ΋࡞ΕΔ͕ɺΫϩεϓϥοτϑΥʔϜϞόΠϧΞϓϦ։ൃͷจ຺ͰޠΒΕΔ͜ͱ͕ଟ͍
    wશͯ͸΢ΟδΣοτ
    wએݴత6*ϓϩάϥϛϯά

    View full-size slide

  16. શͯ͸΢ΟδΣοτ

    View full-size slide

  17. શͯ͸΢ΟδΣοτ
    wը໘ʹදࣔ͞ΕΔ΋ͷ͸શͯ΢ΟδΣοτͱࢥͬͯྑ͍
    w4DB⒎PME 5FYU $POUBJOFS 3PX $PMVNO *NBHF *DPO FUDʜ
    w΢ΟδΣοτΛ૊Έ߹Θͤͯɺ֊૚ߏ଄Λ࡞Δ
    w)5.-ͷΑ͏ͳ֊૚ߏ଄

    View full-size slide

  18. એݴత6*ϓϩάϥϛϯά

    View full-size slide

  19. એݴత6*ϓϩάϥϛϯά
    w͋Δ΂͖ঢ়ଶΛهड़͢Δ͜ͱͰɺ6*Λ૊Έཱ͍ͯͯ͘
    w໋ྩతʢखଓ͖తʣϓϩάϥϛϯάͱൺֱ͞ΕΔ͜ͱ͕ଟ͍

    View full-size slide

  20. ໋ྩతͱએݴతͷൺֱ

    View full-size slide

  21. ໋ྩతͱએݴతͷൺֱ
    w໋ྩత6*ϓϩάϥϛϯά
    w"ͷ஋͕#ͱ͍͏ঢ়ଶʹͳͬͨΒɺ͜ͷΑ͏ʹදࣔΛม͑Δ
    wએݴత6*ϓϩάϥϛϯά
    w"ͷ஋ʹ#ͱ͍͏ঢ়ଶ͕༩͑ΒΕͨΒɺ͜ͷΑ͏ʹදࣔ͢Δ

    View full-size slide

  22. ໋ྩత
    customButton.onTap((event) {
    currentStatus = !currentStatus;
    customButton.enabled = currentStatus;
    if (currentStatus == true) {
    customButton.color = Colors.blue;
    } else {
    customButton.color = Colors.red;
    }
    });
    w಺෦Ͱঢ়ଶΛ؅ཧ
    wঢ়ଶ͕มΘ͔ͬͨΛ൑ఆ͠ɺඞཁͩͬͨΒߋ৽͢Δ

    View full-size slide

  23. એݴత
    Widget _button(BuildContext context, bool enabled, Color color) {
    return CustomButton(
    enabled: enabled,
    color: color,
    );
    }
    wঢ়ଶ͸6*૚Ͱ࣋ͨͳ͍
    wঢ়ଶΛߋ৽ͨ͘͠ͳͬͨΒɺ৽͍͠஋Λ༩͑ͯ࡞Δ
    wݹ͍΋ͷ͸ࣺͯΔ

    View full-size slide

  24. એݴతʹ6*Λهड़Ͱ͖Δ͜ͱͷϝϦοτ
    wݟͨ໨ͱঢ়ଶʹؔ͢ΔίʔυΛ෼཭͠΍͍͢
    wʮલͷঢ়ଶʯΛ6*૚Ͱҙࣝ͢Δඞཁ͕ͳ͘ͳΔ
    wˠίʔυ͕ॻ͖΍͍͢ʂ
    w'MVUUFSҎ֎ʹ΋ɺ3FBDU΍4XJGU6*Ͱ࠾༻͞Ε͍ͯΔ

    View full-size slide

  25. 'MVUUFSΛ࠾༻ͯ͠Α͔ͬͨ͜ͱ

    View full-size slide

  26. ։ൃମݧ͕ྑ͍

    View full-size slide

  27. ։ൃମݧ͕ྑ͍
    w)PU3FMPBE͸ศར
    wΞϓϦ։ൃʹඞཁͳ΢ΟδΣοτ͕େମἧ͍ͬͯΔ
    wϓϥάΠϯ΍πʔϧ͕੔͍ͬͯΔ

    View full-size slide

  28. )PU3FMPBE
    wϏϧυ଴ͪ࣌ؒͷ࡟ݮ
    wʮ͜͜ม͑ͨΒͲ͏ͳΔΜ͚ͩͬʁʯ͕ҰॠͰΘ͔Δ
    w J04ͱൺֱͯ͠
    4UPSZ#PBSEͱ࣮ଶͷဃ཭ʹ೰Ή͜ͱ͕ͳ͘ͳΔ

    View full-size slide

  29. ๛෋ͳ΢ΟδΣοτ
    w5FYU $FOUFS -JTU7JFX (SJE7JFX 4DB⒎PME FUDʜ
    wJ04"OESPJEωΠςΟϒͱൺ΂ͯɺγϯϓϧͳઃܭ
    wಛʹ(SJE7JFX -JTU7JFX͸ͱͯ΋࢖͍΍͍͢
    wঢ়ଶ؅ཧ͕Ͱ͖Δ1SPWJEFS͸͔ܽͤͳ͍ଘࡏ

    View full-size slide

  30. ϓϥάΠϯ΍πʔϧ
    wಛʹ"OESPJE4UVEJP74DPEFͷϓϥάΠϯ͸ศར
    w'MVUUFS͸ωετ͕ਂ͘ͳΓ͕͕ͪͩɺด͡ΔҐஔΛදࣔͯ͘͠ΕΔ

    View full-size slide

  31. 'MVUUFSͰ։ൃ͢Δ͏͑Ͱ
    ͭ·͍ͮͨ͜ͱ

    View full-size slide

  32. 8FC7JFX
    wಛʹ"OESPJE൛
    wύϑΥʔϚϯε͕ྑ͘ͳ͍
    wιϑτ΢ΣΞΩʔϘʔυ͕བྷΉͱ͞Βʹ໽հ
    w$PPLJFΛηοτ͢Δͷʹ&WBMVBUF+BWBTDSJQUΛ࢖͏
    wFUDʜ

    View full-size slide

  33. 8FC7JFX
    wจࣈΛೖྗ͠Α͏ͱ͢Δͱɺจࣈ͝ͱʹڧ੍֬ఆ
    w೔ຊޠͷม׵͕Ͱ͖ͳ͘ͳΔ
    wೖྗ͠Α͏ͱ͢ΔͱΞϓϦ͕ॏ͘ͳΔ
    wจࣈೖྗ࣌ʹ΢ΟδΣοτ͕ϦαΠζ͞ΕΔͷ͕ݪҼ
    wϦαΠζ͞Εͳ͍Α͏ͳઃఆʹมߋͯ͠ରԠ
    w͜Ε͸8FC7JFX୯ҐͰ͸ͳ͘ɺΞϓϦ୯Ґͷઃఆ

    View full-size slide

  34. 4UBUFGVM8JEHFU

    View full-size slide

  35. 4UBUFGVM8JEHFU
    w໊લͷ௨Γɺঢ়ଶΛ࣋ͬͨ΢ΟδΣοτ
    wΞχϝʔγϣϯͳͲҰ෦ͷ΢ΟδΣοτ͸4UBUFGVMͰ͋Δඞཁ͕͋Δ
    wࢥΘ͵όά͕ೖΓࠐΉ͜ͱ͕ଟ͍

    View full-size slide

  36. 'MVUUFSΛ࠾༻͢Δʹ͋ͨͬͯ
    ߟ͑Δ͜ͱ

    View full-size slide

  37. 'MVUUFSΛ࠾༻͢Δ্Ͱߟ͑Δ͜ͱ
    wJ04"OESPJEͦΕͧΕͷϓϥοτϑΥʔϜʹৄ͍͠ਓ͸͍Δ͔ʁ
    wΞϓϦͷϝϯςφϯε͸ܧଓͰ͖Δ͔ʁ

    View full-size slide

  38. ϓϥοτϑΥʔϜʹৄ͍͠ਓ͸͍Δ͔ʁ
    wΫϩεϓϥοτϑΥʔϜͱ͸͍͑ɺϏϧυपΓ͸ωΠςΟϒͷྖҬ
    wҰ෦ϥΠϒϥϦ͸CVJME(SBEMFͳͲʹखΛೖΕͨΓ͢Δ
    w'BTUMBOFͰͷࣗಈԽ΋ϓϥοτϑΥʔϜຖ
    wνʔϜ಺ʹ͍ͳ͘ͱ΋ɺؾܰʹखΛିͯ͠΋Β͑Δঢ়ଶ͕ཧ૝

    View full-size slide

  39. ΞϓϦͷϝϯςφϯε͸ܧଓͰ͖Δ͔ʁ
    w'MVUUFSWϦϦʔε͸೥
    wόʔδϣϯΞοϓͷස౓͕ଟ͍
    wഁյతมߋΛ൐͍ͭͭɺύϑΥʔϚϯεͷ޲্͕ਤΒΕΔ͜ͱ΋
    wόʔδϣϯΞοϓʹ͍͍ͭͯ͘ඞཁੑ
    w͋Δ͍͸ɺϝϯς͕΄΅ෆཁͷΞϓϦͰ࠾༻͢ΔͳͲ
    wྫɿ.FSDBSJ5FDI$POG %SPJE,BJHJ

    View full-size slide

  40. ·ͱΊ
    w'MVUUFSΛ࠾༻ͯ͠͏·͍͘͘έʔε΋͋Δ
    wએݴత6*ϓϩάϥϛϯά͸׳ΕΕ͹ڧྗͳಓ۩ʹͳΔ
    w։ൃମݧ͕ྑ͍ͷͰɺ·ͩ৮ͬͨ͜ͱ͕ͳ͍ਓ΋ࢼͯ͠Έͯ΄͍͠

    View full-size slide

  41. 'MVUUFSʹڵຯ͋Δํ
    ࠾༻ืूதͰ͢

    View full-size slide