20210219 Flutterに入門してみた

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
    qVUUFS@QMBUGPSN@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