Flutterを言い訳にしない！アプリの使い心地改善テクニック5選🔥

FlutterKaigi 2024 の LT です！

Transcript

1. ʙΞϓϦͷ࢖͍৺஍վળςΫχοΫબʙ 'MVUUFSΛݴ͍༁ʹ͠ͳ͍ʂ
3. ͳΜ͔εΫϩʔϧ͢Δͱ
   ΧΫπΫΜ͚ͩͲʜ
4. ͳΜ͔εΫϩʔϧ͢Δͱ
   ΧΫπΫΜ͚ͩͲʜ ͔͠΋ͣͬͱݟͯΔͱ
   ୺຤͕೤͘ͳͬͯΔؾ͕͢Δʂ
6. ಈը͕දࣔ͞Ε͍ͯΔͱ͖ʹ΍͹ͦ͏
8. ˞
   J1IPOF
   
   J04
   
   Λ࢖༻
10. Ƃō
12. 5FYUVSF8JEHFU
    ࢖͏ͱ
    ݹΊͷ
    J1IPOF
    ͰύϑΥʔϚϯε໰୊͕ൃੜ
    
    1MBUGPSN7JFX
    Λ࢖͓͏ʂ
14. ݱࡏͷϏσΦϑϨʔϜͷ
    (16
    ্ͷϐΫηϧόοϑΝʔΛ
    ຖϑϨʔϜ
    $16
    ʹίϐʔ͍ͯ͠Δ
    
    ͦΕ͕ॏͦ͏ʁ
15. 1MBUGPSN7JFX
    ͔͓ͭ?@?
17. ݟ͚ͭͨʂʂʂ ˞
    ࣮ࡍͷϓϩμΫτͰ͸ɼωΠςΟϒଆͰ
    )-4
    ϓϨΠϦετͷඇಉظϩʔυ͕ඞཁͩͬͨΓ
    )%3
    ରԠ͕ඞཁͩͬͨΓͨ͠ͷͰɼͪ͜ΒͷϥΠϒϥϦΛࢀߟʹϑϧεΫϥονͯ͠·͢
18. ˞
    J1IPOF
    
    J04
    
    Λ࢖༻
20. ͳΜ͔ΞΠίϯઃఆ
    ൓ө͞ΕΔ·Ͱ஗͘ͳ͍ʁ
22. UP#ZUF%BUB
    Ͱ
    QOH
    Λ
    %BSU7.
    Ͱ
    Τϯίʔυ͢Δͱ͜ΖͰ͕͔͔࣌ؒͬͯΔ
23. ϥΠϒϥϦଆͰ͸ը૾ʹͤͣ
    3(#"
    όΠτͷ··ฦ͢Α͏ʹϥΠϒϥϦΛվ଄
    
    ωΠςΟϒଆͰ
    3(#"
    ΛΫϩοϓͯ͠ը૾Խ͢ΔΑ͏ʹʂ
26. J1IPOF
    ࣌ܭͷͱ͜λοϓͰϦετ͕
    Ұ൪্·Ͱ໭ͬͯཉ͍͠Μ͚ͩͲʜ
28. Ұ൪্·ͰεΫϩʔϧͯ͘͠Εͳ͍ʜ
29. 4DB ff PME -JTU7JFX
30. 4DB ff PME -JTU7JFX 1SJNBSZ4DSPMM$POUSPMMFS
31. 4DB ff PME -JTU7JFX 1SJNBSZ4DSPMM$POUSPMMFS 1SJNBSZ4DSPMM$POUSPMMFS
32. 4DB ff PME -JTU7JFX 1SJNBSZ4DSPMM$POUSPMMFS 4DSPMM$POUSPMMFS ԣʹεΫϩʔϧόʔΛग़ͨ͠Γ
    Ϧετ຤ඌ·ͰεΫϩʔϧ͞Εͨݕ஌Λ͢ΔͨΊ௥Ճ
33. 4DB ff PME -JTU7JFX 1SJNBSZ4DSPMM$POUSPMMFS 4DSPMM$POUSPMMFS εΫϩʔϧόʔΛग़ͨ͠Γ
    Ϧετ຤ඌ·ͰεΫϩʔϧ͞Εͨݕ஌Λ͢ΔͨΊ௥Ճ εςʔλεόʔλοϓͷݕ஌͸
    ͬͪ͜ʹ͘Δʂ
34. 4DB ff PME -JTU7JFX 1SJNBSZ4DSPMM$POUSPMMFS 4DSPMM$POUSPMMFS εΫϩʔϧόʔΛग़ͨ͠Γ
    Ϧετ຤ඌ·ͰεΫϩʔϧ͞Εͨݕ஌Λ͢ΔͨΊ௥Ճ εςʔλεόʔλοϓͷݕ஌͸
    ͬͪ͜ʹ͘Δʂ ແ൓Ԡʂ
35. 4DB ff PME -JTU7JFX 1SJNBSZ4DSPMM$POUSPMMFS 4DSPMM$POUSPMMFS εΫϩʔϧόʔΛग़ͨ͠Γ
    Ϧετ຤ඌ·ͰεΫϩʔϧ͞Εͨݕ஌Λ͢ΔͨΊ௥Ճ εςʔλεόʔλοϓͷݕ஌͸
    ͬͪ͜ʹ͘Δʂ ແ൓Ԡʂ 1SJNBSZ4DSPMM$PUSPMMFS
    ͷ
    λοϓݕ஌ΛΩϟον͢Ε͹ྑ͍ʂ
36. class _FakeScrollPositionWithSingleContext extends ScrollPositionWithSingleContext { _FakeScrollPositionWithSingleContext({ required BuildContext context, required Future<void> Function() callback, }) : _callback = callback, super( physics: const NeverScrollableScrollPhysics(), context: _FakeScrollContext(context), ); final Future<void> Function() _callback; @override Future<void> animateTo( double to, { required Duration duration, required Curve curve, }) { return _callback.call(); } }
37. class _FakeScrollPositionWithSingleContext extends ScrollPositionWithSingleContext { _FakeScrollPositionWithSingleContext({ required BuildContext context, required Future<void> Function() callback, }) : _callback = callback, super( physics: const NeverScrollableScrollPhysics(), context: _FakeScrollContext(context), ); final Future<void> Function() _callback; @override Future<void> animateTo( double to, { required Duration duration, required Curve curve, }) { return _callback.call(); } } ࣗ෼͕ͨͪ౉ͨ͠
    ίʔϧόοΫ͕ݺ͹ΕΔΑ͏ʹ
38. class _FakeScrollPositionWithSingleContext extends ScrollPositionWithSingleContext { _FakeScrollPositionWithSingleContext({ required BuildContext context, required Future<void> Function() callback, }) : _callback = callback, super( physics: const NeverScrollableScrollPhysics(), context: _FakeScrollContext(context), ); final Future<void> Function() _callback; @override Future<void> animateTo( double to, { required Duration duration, required Curve curve, }) { return _callback.call(); } } ࣗ෼͕ͨͪ౉ͨ͠
    ίʔϧόοΫ͕ݺ͹ΕΔΑ͏ʹ 4DSPMM1PTJUJPO8JUI4JOHMF$POUFYU
    Λ
    ܧঝِͨ͠෺Λ࡞Δʂ
39. final primaryScrollController = PrimaryScrollController.maybeOf(Navigator.of(context).context) ?? PrimaryScrollController.maybeOf(context); if (primaryScrollController == null) return; final scrollPositionWithSingleContext = _FakeScrollPositionWithSingleContext( context: context, callback: widget.onTap, ); primaryScrollController.attach(scrollPositionWithSingleContext);
40. final primaryScrollController = PrimaryScrollController.maybeOf(Navigator.of(context).context) ?? PrimaryScrollController.maybeOf(context); if (primaryScrollController == null) return; final scrollPositionWithSingleContext = _FakeScrollPositionWithSingleContext( context: context, callback: widget.onTap, ); primaryScrollController.attach(scrollPositionWithSingleContext); ͦͷِ෺Λ
    1SJNBSZ4DSPMM$POUSPMMFS
    ʹΞλονʂ
43. J1IPOF
    ඪ४ͱൺ΂ͯ
    ֆจࣈͷදࣔখ͘͞ͳ͍ʁ
46. SwiftUI Flutter
47. SwiftUI Flutter
48. SwiftUI Flutter খ͍͞Θʂʂʂ
49. ྗٕͰ ղܾ
50. import 'package:flutter/material.dart'; class EmojiUtil { static const r = r'[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194- \u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED- \u23EF\u23F1\u23F2\u23F8- \u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600- \u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E \u262F\u2638-\u263A\u2640\u2642\u2648- \u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694 - \u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4 \u26C8\u26CF\u26D1\u26E9\u26F0- \u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D \u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05- \u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?| [\u261D\u270C\u270D](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\u270A\u270B](?: \uD83C[\uDFFB-\uDFFF])?|[\u23E9- \u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD \u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]| \u26D3\uFE0F?(?:\u200D\uD83D\uDCA5)?|\u26F9(?:\uFE0F|\uD83C[\uDFFB-
51. text.splitMapJoin( EmojiUtil.regex, onMatch: (m) { final emojiCharacters = m.group(0)!.characters; for (final emojiCharacter in emojiCharacters) { state._add(emojiCharacter, true); } return ''; }, onNonMatch: (s) { if (s == '\u200D') { // ZeroWidthJoiner͸ֆจࣈͱͯ͠ొ࿥͓ͯ͘͠ state._add(s, true); } else { state._add(s, false); } return ''; }, ); return state._build(); } }
52. text.splitMapJoin( EmojiUtil.regex, onMatch: (m) { final emojiCharacters = m.group(0)!.characters; for (final emojiCharacter in emojiCharacters) { state._add(emojiCharacter, true); } return ''; }, onNonMatch: (s) { if (s == '\u200D') { // ZeroWidthJoiner͸ֆจࣈͱͯ͠ొ࿥͓ͯ͘͠ state._add(s, true); } else { state._add(s, false); } return ''; }, ); return state._build(); } } ड͚औͬͨςΩετΛ
    ֆจࣈͱจࣈʹ෼ׂ
53. TextStyle _emojiStyle(TextStyle textStyle, double originalFontSize) { if (Platform.isAndroid) { return textStyle; } else { return textStyle.copyWith( fontSize: textStyle.fontSize! * 1.4, fontFamilyFallback: [], height: 1.0, ); } } ͱΓ͋͑ͣ
    
    ഒʹͯ͠ΈΔʂ
54. Before After
55. ࣮ࡍͷϓϩμΫτͰ͸ͪ͜Βͷ
    JTTVF
    ΛࢀߟʹɼϑΥϯτͷେ͖͞ʹΑͬͯֆจࣈͷഒ཰Λม͑ͨΓ
    จࣈͱ֦େֆจࣈͷηϯλʔϥΠϯΛἧ͑ͨΓ͍ͯ͠·͢ʂ
57. ͳΜ͔
    J1IPOF
    ͩͱ
    จࣈ͕ࡉͯ͘ݟʹ͍͘ؾ͕͢Δʜ
58. SwiftUI Flutter
61. ϑΥϯτϨϯμϦϯά࣌ͷ
    ΞϯνΤΠϦΞεͷೱ౓͕ωΠςΟϒͱҧ͏ʂ
62. ྗٕͰ ղܾ
63. return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: Text(widget.title), ), body: const Center( child: Stack( children: [ Text( 'Hello, FlutterKaigi 2024 LT!', style: TextStyle(fontSize: 24), ), Text( 'Hello, FlutterKaigi 2024 LT!', style: TextStyle(fontSize: 24), ), ], ), ), );
64. ild: Stack( children: [ Text( 'Hello, FlutterKaigi 2024 LT!', style: TextStyle(fontSize: 24), ), Text( 'Hello, FlutterKaigi 2024 LT!', style: TextStyle(fontSize: 24), ),
65. Before After
66. ˞
    ࣮ࡍͷϓϩμΫτͰ͸ͪ͜Βͷ
    JTTVF
    ίϝϯτ
    IUUQTHJUIVCDPN fl VUUFS fl VUUFSJTTVFTJTTVFDPNNFOU
    Λࢀߟʹ
    ͨͩ
    4UBDL
    ͰॏͶΔͷͰ͸ͳ͘
    4USPLF
    Λௐ੔ͯͨ͠Γ͠·͢ʂ
67. Sample GitHub: https://github.com/kno3a87/flutterkaigi-2024-lt ͓ΘΓ
68. ,VOP
    "ZBOB גࣜձࣾ
    .*9*
    ͨΜΆΆࣨ
    'MVUUFS,BJHJ
    ӡӦελοϑ