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

20210219 Flutterに入門してみた

Kei Ito
February 19, 2021

20210219 Flutterに入門してみた

Kei Ito

February 19, 2021
Tweet

More Decks by Kei Ito

Other Decks in Programming

Transcript

  1. 'MVUUFSʹ
    ೖ໳ͯ͠Έͨ
    .PCJMF"DU0/-*/&
    JUPL!ͦΒ͔ͥ

    View Slide

  2. JUPL!ͦΒ͔ͥ
    w ͍ͱ͏͚͍ʢJUPLʣ
    w ɹɹɹɹɹɹͷதͷਓ
    w ϞόΠϧΞϓϦΤϯδχΞ݉$&0
    w ෭ۀͰϑϦʔϥϯεత
    w IUUQTJUPLKQ IUUQTTPSBLB[FDPKQ !JUPLKQ

    View Slide

  3. ॴࡏ஍ɿژ౎ࢢதژ۠
    ࣾһਓࣗ෼

    View Slide

  4. ࣮੷
    डୗ
    ࣗࣾ

    View Slide

  5. J04"OESPJENBD048JOEPXTαʔό
    ҰਓͰ΍ͬͯ·͢ʢσβΠϯҎ֎ʣ

    View Slide

  6. ݴޠɾϓϥοτϑΥʔϜྺ
    w ೥ʙɹ0CKFDUJWF$
    w ೥ʙɹJ04
    w ೥ʙɹ"OESPJE+BWB
    w ೥ʙɹ4XJGU
    w ೥ʙɹ,PUMJO
    w ೥ʙɹ'MVUUFSˡΠϚίίʢೖ໳ͯ͠िؒ΄Ͳ

    View Slide

  7. 'MVUUFSʹ
    ೖ໳ͯ͠Έͨ

    View Slide

  8. 'MVUUFSͱ͸
    w (PPHMF੡ϞόΠϧΞϓϦϑϨʔϜϫʔΫʢʙ
    w J04"OESPJE8FCͷϚϧνϓϥοτϑΥʔϜ
    w ݴޠ͸%BSU
    w IUUQTqVUUFSEFW

    View Slide

  9. ൺֱ
    'MVUUFS 3FBDU/BUJWF 9BNBSJO
    ݴޠ %BSU +BWF4DSJQU $
    "1* ಠࣗ ಠࣗ
    ಠࣗ
    XSBQQFS
    6* ಠࣗ ωΠςΟϒ ωΠςΟϒ
    ։ൃ؀ڥ
    "OESPJE4UVEJP
    74$PEF
    ͳΜͰ΋ 7JTVBM4UVEJP

    View Slide

  10. ߏ଄

    View Slide

  11. ϚϧνϓϥοτϑΥʔϜ
    🤔

    View Slide

  12. 🤔
    w ϚϧνϓϥοτϑΥʔϜͬͯେৎ෉ͳͷʁ
    w ֶशɾಋೖίετ͸ʁ
    w ϝϯςφϯε͸ʁ
    w τʔλϧͰ͸݁ہίετ͕༨ܭʹ͔͔Δͱ͔ʁ

    View Slide

  13. ͦΖͦΖࢼͯ͠ΈΔʁ
    🤔

    View Slide

  14. ͳͥ'MVUUFSʁ
    w ެ։͞Εͯ਺೥ܦͬͨ͠ɺ҆ఆͯ͠Δ͔΋
    w ͳΜ͔·ΘΓͰ͸ྲྀߦ͍ͬͯΔؾ͕͢Δ
    w ษڧձωλͱͯ͠ࢼͯ͠ΈΔͷ͸Αͦ͞͏
    w ॳ৺ऀωλͱͯ͠ษڧձͰൃදͯ͠ɺ͍Ζ͍Ζͱ
    ڭ͑ͯ΋Β͑ͨΒ͍͍ͳͱ͍͏ελΠϧͰ

    View Slide

  15. ͱΓ͋͑ͣ
    ΞϓϦ࡞ͬͯΈ·ͨ͠

    View Slide

  16. ؀ڥ
    w NBD04
    w 'MVUUFS
    w %BSU
    w "OESPJE4UVEJP
    w 9DPEF

    View Slide

  17. %JBOB

    View Slide

  18. %JBOB
    w Ґஔ৘ใʹج݄ͮ͘ྸදࣔΞϓϦ
    w ೔ӳ྆ରԠ
    w ΋ͱ΋ͱJ044XJGU"OESPJE,PUMJOͰ࣮૷
    w 'MVUUFSͰϑϧεΫϥον
    w WϦϦʔεࡁΈ
    w IUUQTNPPOC[

    View Slide

  19. ೖ໳લޙͰ
    ؾʹͳͬͨ఺ͳͲΛ
    ྻڍ͍͖ͯ͠·͢

    View Slide

  20. 'MVUUFSͷجຊ

    View Slide

  21. 'MVUUFSͷجຊ
    w એݴܕͷ6*
    w 8JEHFUͷ֊૚ߏ଄
    w ϨΠΞ΢τ΋8JEHFUͱͯ͠૊Έ্͍͛ͯ͘
    Widget _buildMoon(...) {
    return Container(
    child: AspectRatio(
    aspectRatio: 1,
    child: CustomPaint(
    painter: MoonPainter(...),
    ),
    ),
    );
    }

    View Slide

  22. 8JEHFUT

    View Slide

  23. ։ൃɾσόοά؀ڥ

    View Slide

  24. ։ൃɾσόοά؀ڥ
    w ಋೖ͸؆୯
    w 4%,ͷల։ઃஔ
    w "OESPJE4UVEJPͷϓϥάΠϯಋೖˠ׬ྃ👍
    w )PUSFMPBE͋Γ
    w "OESPJE4UVEJP͔Β௚઀σόοάͰ͖Δ
    w J04΋"OESPJE΋ͲͪΒ΋

    View Slide

  25. $POUJOVPVT
    *OUFHSBUJPO

    View Slide

  26. $POUJOVPVT*OUFHSBUJPO
    w ஶ໊Ͳ͜Ζ͸͍͍ͩͨରԠ
    w 'BTUMBOF
    w #JUSJTF
    w (JU)VCBDUJPOT

    View Slide

  27. ϓϥοτϑΥʔϜ
    ґଘ෦෼

    View Slide

  28. ϓϥοτϑΥʔϜґଘ෦෼
    w ֤QBDLBHFͰରԠʢIUUQTQVCEFWʣ
    w ެࣜɾඇެࣜ͞·͟·
    w ओཁͳ΋ͷ͸͍͍ͩͨ͋Δ
    w Ґஔ৘ใɺΧϝϥɺࣸਅϥΠϒϥϦͳͲ

    View Slide

  29. ྫʣҐஔ৘ใऔಘ
    import 'package:location/location.dart';
    Future _getLocationData() async {
    Location location = Location();
    bool serviceEnabled = await location.serviceEnabled();
    if (!serviceEnabled) {
    serviceEnabled = await location.requestService();
    if (!serviceEnabled) {
    return null;
    }
    }
    PermissionStatus permissionGranted = await location.hasPermission();
    if (permissionGranted == PermissionStatus.denied) {
    permissionGranted = await location.requestPermission();
    if (permissionGranted != PermissionStatus.granted) {
    return null;
    }
    }
    return await location.getLocation();
    }

    View Slide

  30. σβΠϯ

    View Slide

  31. σβΠϯ
    w جຊతʹ͸.BUFSJBMσβΠϯ
    w ϓϥοτϑΥʔϜؒͰڞ௨
    w J04෩ͷ$VQFSUJOPXJEHFU܈΋͋Δ
    w ྆σβΠϯΛ࣮ߦ࣌ʹ੾Γସ͑Δ
    QBDLBHF΋͋Δ

    View Slide

  32. J04෩
    4XJUDI $VQFSUJOP4XJUDI
    1MBUGPSN4XJUDI
    [email protected]@XJEHFUT

    View Slide

  33. λϒϨοτ
    ʢBEBQUJWFʣ

    View Slide

  34. λϒϨοτʢBEBQUJWFʣ
    w ը໘αΠζΛΈͯࣗલͰௐ੔͢Δඞཁ͋Γ
    LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth < constraints.maxHeight) {
    return _portraitLayout(moonBox, dataTableBox);
    } else {
    return _landscapeLayout(moonBox, dataTableBox);
    }
    }
    )

    View Slide

  35. μʔΫϞʔυ

    View Slide

  36. μʔΫϞʔυ
    w 5IFNF5IFNF%BUBͰରԠ
    Widget build(BuildContext context) {
    return MaterialApp(
    theme: ThemeData.light(),
    darkTheme: ThemeData.dark(),
    ...);
    }

    View Slide

  37. ϩʔΧϥΠζ

    View Slide

  38. ϩʔΧϥΠζ
    w J04"OESPJE྆ରԠՄೳ
    {
    "moon": "݄",
    "newMoon": "৽݄",
    ...
    Text(AppLocalizations.of(context).moon)
    {
    "moon": "Moon",
    "@moon": {},
    "newMoon": "New",
    "@newMoon": {},
    ...

    View Slide

  39. ޿ࠂ

    View Slide

  40. ޿ࠂ
    w "E.PCͳͲҰ෦ͷ4%,ʹ͍ͭͯ͸QBDLBHF͋Γ

    View Slide

  41. ·ͱΊ

    View Slide

  42. ·ͱΊ
    w ؾʹͳΓϙΠϯτ
    w ωΠςΟϒ6*ײ͸ബ͍ʢಛʹJ04ʣˡٯʹ04ͷ
    มߋͰಈ͔ͳ͘ͳΔ͜ͱ͸গͳͦ͏ʁ
    w 04ಠࣗʢ͋Δ͍͸֎෦4%,ʣͷ৽͍͠"1*Λ͢
    ͙ʹ࢖͑ΔΘ͚Ͱ͸ͳ͍

    View Slide

  43. ·ͱΊ
    w ͱ͸͍͑
    w దࡐదॴͰ͸͋Δ͕։ൃͷબ୒ࢶͱͯ͠͸े෼ʹՄೳ
    ੑ͋Γ
    w J04"OESPJEͷ։ൃܦݧ͕͋Δͱͳ͓Αͦ͞͏
    w ެࣜυΩϡϝϯτʢIUUQTqVUUFSEFWEPDTʣ͕ॆ
    ࣮͍ͯ͠Δ͔Β࠷ऴతʹ͸ͦ͜ΛݟΔ΂͠
    w qVUUFSͷHPPHMFBCJMJUZ͕ߴ͍ͷ͸ॿ͔Δ
    ʢ΋͏গ͠୳ٻͯ͠ΈΔ͔΋ʣ

    View Slide