Add Material touch ripples / FlutterKaigi 2023

Transcript

1. FlutterKaigi 2023 NAVITIME JAPAN / 松村航裕 Add Material touch ripples
2. • Android / iOS / Flutter • 個⼈でもFlutter製アプリを公開 • X(Twitter) / @kosuke_mtm  2 松村航裕 / Kosuke Matsumura ⾃⼰紹介
3. 設⽴⽇  3 会社概要 NAVITIME JAPAN 2000年 3⽉ 1⽇ 約420名 (2023年10⽉現在） 社員数 約80％がエンジニア 経営理念 経路探索エンジンの技術で 
 世界の産業に奉仕する
4.  4 事業領域 NAVITIME JAPAN メディア‧トラベル事業 ドライブ事業 ツーリング事業 バス‧ウォーキング事業 キャリア協業事業 MaaS/CASE/交通データ事業 ビジネスナビタイム事業 ソリューション事業 公共交通事業 運転代⾏事業 ロケーションマーケティング事業 スポーツビジネス事業
5.  5 事業領域 NAVITIME JAPAN メディア‧トラベル事業 ドライブ事業 ツーリング事業 バス‧ウォーキング事業 キャリア協業事業 MaaS/CASE/交通データ事業 ビジネスナビタイム事業 ソリューション事業 公共交通事業 運転代⾏事業 ロケーションマーケティング事業 スポーツビジネス事業
6.  6 事業領域 / Flutter採⽤事業 NAVITIME JAPAN メディア‧トラベル事業 ドライブ事業 ツーリング事業 バス‧ウォーキング事業 キャリア協業事業 MaaS/CASE/交通データ事業 ビジネスナビタイム事業 ソリューション事業 公共交通事業 運転代⾏事業 ロケーションマーケティング事業 スポーツビジネス事業
7.  7 事業領域 / Flutter採⽤事業 NAVITIME JAPAN メディア‧トラベル事業 ドライブ事業 ツーリング事業 バス‧ウォーキング事業 キャリア協業事業 MaaS/CASE/交通データ事業 ビジネスナビタイム事業 ソリューション事業 公共交通事業 運転代⾏事業 ロケーションマーケティング事業 スポーツビジネス事業 ナビタイムのコアである地図やナビゲーションは、 
 Android/iOSそれぞれの独⾃ライブラリを開発‧運⽤しているため、 
 ネイティブ実装のアプリの⽅が多い https://speakerdeck.com/navitimejapan/ fl utterhanabitaimuziyapanfalsexin-gui-apurikai-fa-dehui-ku
8. • Jリーグをもっと楽しく！ • 2022年夏リリース • Flutter製アプリ • スポンサーブースに展⽰  8 ユニタビ NAVITIME JAPAN https://site.uni-tabi.jp/ アプリDLリンク
9. みなさんはこんなことありませんか？  9
10. みなさんはこんなことありませんか？  10 タッチエフェクトがはみ出ているウィジェット タッチエフェクトがないウィジェット 本セッションでは、タッチエフェクトの仕組みを理解し、 
 このような事象を避ける実装⽅法を理解することをゴールとしています。
11. Agenda • タッチエフェクトとは • Material Design 3 Guideline • State Layer • 内部実装の解説 • Material • InkWell / InkResponse • タッチエフェクトの付け⽅ • Ink  11 資料中のソースコードはFlutter 3 . 1 3 . 3 のものです。また、簡略化のため⼀部省略および改変しています。 https://github.com/ fl utter/ fl utter/tree/ 3 . 1 3 . 3 /packages/ fl utter/lib/src
12. タッチエフェクトとは  12
13. ユーザーがオブジェクト(図中のContainer)をタッチしたことを視覚的に認識できるようにしたもの  13 Material Design 3 Guideline タッチエフェクトとは https://m 3 .material.io/foundations/interaction/states/state-layers コンテンツ State layer Container = Materialウィジェット = Materialウィジェットの表⾯ = Materialウィジェットのchild
14. 要素の表層を覆う半透過のレイヤーで、透過度で状態を⽰す 
  14 State layer タッチエフェクトとは https://m 3 .material.io/foundations/interaction/states/state-layers#ec 6 8 aa 4 0 -c 1 aa- 4 1 0 a-b 6 7 7 -e 8 3 f 6 f 2 ba 0 2 1 Hover 不透明度 8 % Focus 不透明度 1 2 % Press 不透明度 1 2 % Drag 不透明度 1 6 % State layerの⾊は、 
 基本的にはonColorが使われる
15.  15 State layer タッチエフェクトとは コンテンツ State layer Container = Materialウィジェット = Materialウィジェットの表⾯ = Materialウィジェットのchild https://m 3 .material.io/foundations/interaction/states/state-layers タッチエフェクトもState layerで描画されます。 次は、Materialウィジェットの内部実装を追ってState layerの実態を探ります。
16. class Material extends StatefulWidget { … @override Widget build(BuildContext context) { … contents = NotificationListener<LayoutChangedNotification>( onNotification: (notification) { … }, child: _InkFeatures( absorbHitTest: widget.type != MaterialType.transparency, color: backgroundColor, child: contents, ), ); …  16 Materialウィジェット MaterialウィジェットにおけるState layer .BUFSJBM
17. class Material extends StatefulWidget { … @override Widget build(BuildContext context) { … contents = NotificationListener<LayoutChangedNotification>( onNotification: (notification) { … }, child: _InkFeatures( absorbHitTest: widget.type != MaterialType.transparency, color: backgroundColor, child: contents, ), ); …  17 Materialウィジェット MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT
18.  18 Materialウィジェット MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT class _InkFeatures extends SingleChildRenderObjectWidget { … @override _RenderInkFeatures createRenderObject(BuildContext context) { return _RenderInkFeatures(…); } @override void updateRenderObject(BuildContext context, _RenderInkFeatures renderObject) { … } }
19.  19 Materialウィジェット MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT @3FOEFS*OL'FBUVSFT class _InkFeatures extends SingleChildRenderObjectWidget { … @override _RenderInkFeatures createRenderObject(BuildContext context) { return _RenderInkFeatures(…); } @override void updateRenderObject(BuildContext context, _RenderInkFeatures renderObject) { … } }
20.  20 Materialウィジェット MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController { … List<InkFeature>? _inkFeatures; @override void addInkFeature(InkFeature feature) { … _inkFeatures!.add(feature); } @override void paint(PaintingContext context, Offset offset) { … for (final InkFeature inkFeature in inkFeatures) { inkFeature._paint(canvas); } } } @3FOEFS*OL'FBUVSFT
21.  21 Materialウィジェット MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController { … List<InkFeature>? _inkFeatures; @override void addInkFeature(InkFeature feature) { … _inkFeatures!.add(feature); } @override void paint(PaintingContext context, Offset offset) { … for (final InkFeature inkFeature in inkFeatures) { inkFeature._paint(canvas); } } } -JTU*OL'FBUVSF @3FOEFS*OL'FBUVSFT
22. class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController { … List<InkFeature>? _inkFeatures; @override void addInkFeature(InkFeature feature) { … _inkFeatures!.add(feature); } @override void paint(PaintingContext context, Offset offset) { … for (final InkFeature inkFeature in inkFeatures) { inkFeature._paint(canvas); } } }  22 Materialウィジェット MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF *OL'FBUVSFͷ഑ྻΛ࢖ͬͯQBJOU͍ͯ͠Δ @3FOEFS*OL'FBUVSFT
23. class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController { … List<InkFeature>? _inkFeatures; @override void addInkFeature(InkFeature feature) { … _inkFeatures!.add(feature); } @override void paint(PaintingContext context, Offset offset) { … for (final InkFeature inkFeature in inkFeatures) { inkFeature._paint(canvas); } } }  23 Materialウィジェット MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF *OL'FBUVSFͷ഑ྻΛ࢖ͬͯQBJOU͍ͯ͠Δ ʮ4UBUF
    -BZFSʢ.BUFSJBMͷද໘ʣʯͱ͸ @3FOEFS*OL'FBUVSFTͷ͜ͱ @3FOEFS*OL'FBUVSFT *OL'FBUVSF͕ λονΤϑΣΫτͷඳըΛ୲͏
24. class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController { … List<InkFeature>? _inkFeatures; @override void addInkFeature(InkFeature feature) { … _inkFeatures!.add(feature); } @override void paint(PaintingContext context, Offset offset) { … for (final InkFeature inkFeature in inkFeatures) { inkFeature._paint(canvas); } } }  24 InkFeatureの登録 MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController @3FOEFS*OL'FBUVSFT
25. class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController { … List<InkFeature>? _inkFeatures; @override void addInkFeature(InkFeature feature) { … _inkFeatures!.add(feature); } @override void paint(PaintingContext context, Offset offset) { … for (final InkFeature inkFeature in inkFeatures) { inkFeature._paint(canvas); } } }  25 InkFeatureの登録 MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT /// An interface for creating /// [InkSplash]s and [InkHighlight]s on a [Material]. /// /// Typically obtained via [Material.of]. abstract class MaterialInkController { void addInkFeature(InkFeature feature); … } -JTU*OL'FBUVSF MaterialInkController addInkFeature @3FOEFS*OL'FBUVSFT
26. class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController { … List<InkFeature>? _inkFeatures; @override void addInkFeature(InkFeature feature) { … _inkFeatures!.add(feature); } @override void paint(PaintingContext context, Offset offset) { … for (final InkFeature inkFeature in inkFeatures) { inkFeature._paint(canvas); } } }  26 InkFeatureの登録 MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT /// An interface for creating /// [InkSplash]s and [InkHighlight]s on a [Material]. /// /// Typically obtained via [Material.of]. abstract class MaterialInkController { void addInkFeature(InkFeature feature); … } -JTU*OL'FBUVSF MaterialInkController addInkFeature .BUFSJBM*OL$POUSPMMFSʹBEE*OL'FBUVSF͕։͍͍ͯΔ @3FOEFS*OL'FBUVSFT
27.  27 InkFeatureの登録 MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController addInkFeature 8JEHFU class Material extends StatefulWidget { static MaterialInkController of(BuildContext context) { final MaterialInkController? controller = maybeOf(context); return controller!; } Material.of(context) @3FOEFS*OL'FBUVSFT .BUFSJBMPG
    Ͱ .BUFSJBM*OL$POUSPMMFSʹΞΫηεՄೳ
28. class InkResponse extends StatelessWidget { … InkFeature _createSplash(…) { final MaterialInkController inkController = Material.of(context); … InkFeature? splash; splash = (widget.splashFactory ?? Theme.of(context).splashFactory).create( controller: inkController,…); return splash; } }  28 InkFeatureの登録 MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController addInkFeature *OL8FMM
    
    *OL3FTQPOTF @3FOEFS*OL'FBUVSFT ※InkResponseはInkWellの基底クラス
29. class InkResponse extends StatelessWidget { … InkFeature _createSplash(…) { final MaterialInkController inkController = Material.of(context); … InkFeature? splash; splash = (widget.splashFactory ?? Theme.of(context).splashFactory).create( controller: inkController,…); return splash; } }  29 InkFeatureの登録 MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController addInkFeature *OL8FMM
    
    *OL3FTQPOTF @3FOEFS*OL'FBUVSFT ※InkResponseはInkWellの基底クラス *OL'FBUVSFΛੜ੒͢ΔTQMBTI'BDUPSZʹ .BUFSJBM*OL$POUSPMMFSΛ౉͍ͯ͠Δ
30. class InkRipple extends InkFeature { InkRipple({ required MaterialInkController controller, … }) : … { … controller.addInkFeature(this); }  30 InkFeatureの登録 MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController addInkFeature *OL3JQQMF
    FYUFOET
    *OL'FBUVSF @3FOEFS*OL'FBUVSFT ίϯετϥΫλͰ.BUFSJBM*OL$POUSPMMFSΛड͚औΓ ॳظԽ࣌ʹࣗ෼ΛBEE*OL'FBUVSF͍ͯ͠Δ splashFactory.create() *OL8FMM
    
    *OL3FTQPOTF ※⼀例としてInkRippleを取り上げています
31. class InkRipple extends InkFeature { InkRipple({ required MaterialInkController controller, … }) : … { … controller.addInkFeature(this); }  31 InkFeatureの登録 MaterialウィジェットにおけるState layer .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController addInkFeature @3FOEFS*OL'FBUVSFT ίϯετϥΫλͰ.BUFSJBM*OL$POUSPMMFSΛड͚औΓ ॳظԽ࣌ʹࣗ෼ΛBEE*OL'FBUVSF͍ͯ͠Δ splashFactory.create() *OL8FMM
    
    *OL3FTQPOTF ※⼀例としてInkRippleを取り上げています *OL8FMMͰੜ੒͞Εͨ*OL3JQQMF౳͕ɺ @3FOEFS*OL'FBUVSFT্Ͱ λονΤϑΣΫτͱͯ͠ඳը͞ΕΔ *OL3JQQMF
    FYUFOET
    *OL'FBUVSF
32.  32 概念図 タッチエフェクトとは .BUFSJBM *OL8FMM
33.  33 概念図 タッチエフェクトとは *OL8FMM .BUFSJBM
34.  34 概念図 タッチエフェクトとは @3FOEFS*OL'FBUVSFT .BUFSJBMද໘ͷ@3FOEFS*OL'FBUVSFT .BUFSJBM *OL8FMM
35.  35 概念図 タッチエフェクトとは @3FOEFS*OL'FBUVSFT *OL'FBUVSF *OL8FMMͰ*OL'FBUVSFΛੜ੒ .BUFSJBMද໘ͷ@3FOEFS*OL'FBUVSFT *OL8FMM .BUFSJBM
36.  36 概念図 タッチエフェクトとは *OL'FBUVSF @3FOEFS*OL'FBUVSFT *OL8FMM .BUFSJBM
37.  37 概念図 タッチエフェクトとは *OL'FBUVSF @3FOEFS*OL'FBUVSFT λονΤϑΣΫτͷඳը͸ @3FOEFS*OL'FBUVSFTͷ$BOWBT্ *OL8FMM .BUFSJBM
38.  38 概念図 タッチエフェクトとは *OL'FBUVSF @3FOEFS*OL'FBUVSFT $PMPSFE#PY
    ͳͲ *OL8FMM .BUFSJBM λονΤϑΣΫτ͸ඳը͞Ε͍ͯΔ $PMPSFE#PY ෆಁաͳϨΠϠʔ ͕अຐͰ λονΤϑΣΫτ͸ݟ͑ͳ͍
39. InkWell / InkResponse  39
40. InkWell / InkResponse オブジェクトにタッチエフェクトを付与するには、⼀般的にInkWellを使います  40 class InkWell extends InkResponse { const InkWell({ super.key, super.child, super.onTap, super.splashFactory, … bool?… enableFeedback = true, }) : super( containedInkWell: true, highlightShape: BoxShape.rectangle, enableFeedback: enableFeedback ?? true, ); } *OL8FMM͸*OL3FTQPOTFΛܧঝ ྆ऀͱ΋λονΤϑΣΫτΛ෇༩͢ΔͨΊͷ΋ͷ
41. class InkWell extends InkResponse { const InkWell({ super.key, super.child, super.onTap, super.splashFactory, … bool?… enableFeedback = true, }) : super( containedInkWell: true, highlightShape: BoxShape.rectangle, enableFeedback: enableFeedback ?? true, ); } InkWell / InkResponse オブジェクトにタッチエフェクトを付与するには、⼀般的にInkWellを使います  41 違いは2つのパラメータくらいで、 雑に⾔うとInkResponseは円形、InkWellは矩形のエフェクトが発⽣します。
42.  42 highlightShapeパラメータ InkWell / InkResponse IJHIMJHIU4IBQFͷ஋ ϋΠϥΠτͷදࣔ DJSDMF 
 *OL3FTQPOTFͰ࢖༻ ԁܗ SFDUBOHMF
    *OL8FMMͰ࢖༻ ۣܗ
    ۣܗͷؙ֯͸CPSEFS3BEJVTύϥϝʔλͰࢦఆՄೳ press/focus/hover時のハイライトの挙動を定義します enum BoxShape { rectangle, circle, // Don't add more, instead create a new ShapeBorder. } #PY4IBQF͸ۣܗ͔ԁͷ୒Ͱɺ ࠓޙ૿͑Δ͜ͱ΋૝ఆ͞Ε͍ͯͳ͍
43.  43 containedInkWellパラメータ InkWell / InkResponse DPOUBJOFE*OL8FMMͷ஋ λονΤϑΣΫτͷڍಈ '"-4&
    *OL3FTQPOTFͰ࢖༻ ԁܗ
    λονҐஔ͔Βঃʑʹ 
 ΢ΟδΣοτதԝ΁ͱ޲͔͏ 536&
    *OL8FMMͰ࢖༻ ۣܗ
    λονҐஔ͔ΒΤϑΣΫτ͕޿͕Δ
    ۣܗͷؙ֯͸CPSEFS3BEJVTύϥϝʔλͰࢦఆՄೳ タッチエフェクトの挙動を定義します 元は、タッチエフェクトがウィジェットの境界を越えるかどうか、という意味のフラグ
44. 基本はInkWell（矩形）を使うことが多くなると思います。 円形のエフェクトやカスタマイズが必要な場合に、InkResponseの利⽤を検討してください。 また、InkResponseを使う場合はhighlightShapeパラメータとcontainedInkWellパラメータが 
 ⼀致していないと、下記のような⾒た⽬になるため注意が必要です。  44 InkWell と InkResponse の使い分け InkWell / InkResponse
45. GestureDetectorは、細やかなタッチイベントのハンドリングには便利。 タッチエフェクトをつけることはできないので、onTapは基本InkWellを使う⽅が⾃然。 ちなみに、InkResponseも内部でGestureDetectorを使っています。  45 GestureDetectorとの使い分け InkWell / InkResponse
46. TableRowInkWell Tableで使う 
 Row全体にタッチエフェクトをかけることができる 
 _IndicatorInkWell NavigatorRailで内部的に使われている  46 派⽣クラス InkWell / InkResponse
47.  47 SplashFactory InkWell / InkResponse abstract class InteractiveInkFeatureFactory { … @factory InteractiveInkFeature create({ required MaterialInkController controller, required RenderBox referenceBox, required Color color, bool containedInkWell = false, … }); } タッチエフェクトの挙動を決めるInkFeature(InteractiveInkFeature)を⽣成するfactoryを定義します このfactoryで⽣成されるInteractiveInkFeatureは 主に InkSplash/InkRipple/InkSparkle (,NoSplash) TQMBTI'BDUPSZͷܕ͸
    *OUFSBDUJWF*OL'FBUVSF'BDUPSZܕ
48.  48 InkSplash / InkRipple / InkSparkle SplashFactory factory ThemeData() { ... final bool useInkSparkle = platform == TargetPlatform.android && !kIsWeb; splashFactory ??= useMaterial3 ? useInkSparkle ? InkSparkle.splashFactory : InkRipple.splashFactory : InkSplash.splashFactory; → InkSparkleを使うのはAndroid M 3 ではInkSparkleかInkRipple
49. factory ThemeData() { ... final bool useInkSparkle = platform == TargetPlatform.android && !kIsWeb; splashFactory ??= useMaterial3 ? useInkSparkle ? InkSparkle.splashFactory : InkRipple.splashFactory : InkSplash.splashFactory;  49 InkSplash / InkRipple / InkSparkle SplashFactory M 3 ではInkSparkleかInkRipple M 2 はInkSplash → InkSparkleを使うのはAndroid
50. factory ThemeData() { ... final bool useInkSparkle = platform == TargetPlatform.android && !kIsWeb; splashFactory ??= useMaterial3 ? useInkSparkle ? InkSparkle.splashFactory : InkRipple.splashFactory : InkSplash.splashFactory;  50 InkSplash / InkRipple / InkSparkle SplashFactory M 2 M 3 (Android以外) M 3 
 Android ※InkSplashはShaderを使うため、Web⾮対応 【タッチ時の挙動】 M 3 になって速くなった Sparkleによりキラキラしている
51.  51 InkSplash / InkRipple / InkSparkle SplashFactory タッチ後、すぐ指を離すと 
 InkSplashのみタッチエフェクトがキャンセルされます 【タッチキャンセル時の挙動】 M 2 M 3 (Android以外) M 3 
 Android factory ThemeData() { ... final bool useInkSparkle = platform == TargetPlatform.android && !kIsWeb; splashFactory ??= useMaterial3 ? useInkSparkle ? InkSparkle.splashFactory : InkRipple.splashFactory : InkSplash.splashFactory;
52. Android 1 2 から登場したタッチエフェクトの表現。 
 β版だとsparkleが強かったが、 
 stable版でだいぶ落ち着いた表現に。  52 InkSparkle SplashFactory https://github.com/ fl utter/ fl utter/issues/ 8 2 8 5 0 https:// 9 to 5 google.com/ 2 0 2 1 / 0 7 / 1 4 /android- 1 2 -ripple-sparkle/ Android 1 2 β版のタッチエフェクトの様⼦ FlutterでもM 3 対応の⼀環として登場 
 ※M 3 のガイドラインには載っていない
53. Materialウィジェットを使う  53
54. Materialウィジェットを使う みてきたように、InkWellを使うためにはMaterialが必要となります。 しかし⼤半のウィジェットは、内部的にMaterial (+ InkWell)を持っているため、 
 特に難しいことを考えずにタッチエフェクトを使うことができるようになっています。 ただし、ウィジェットのchildに不透過なレイヤーがあると、 
 やはりタッチエフェクトは⾒えなくなります。 いくつか例を⾒ていきます。  54
55.  55 いつものCounterアプリ Materialウィジェットを使う class MyApp extends StatelessWidget { … @override Widget build(BuildContext context) { return MaterialApp( home: const MyHomePage(title: 'Home Page'), ); } } class MyHomePage extends StatefulWidget { … @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(widget.title)), body: Center( … class Scaffold extends StatefulWidget { … @override Widget build(BuildContext context) { … return _ScaffoldScope( hasDrawer: hasDrawer, geometryNotifier: _geometryNotifier, child: ScrollNotificationObserver( child: Material( child:… .BUFSJBM"QQ͸ɺ.BUFSJBMͱ͸ผ෺ 4DB PMEͷதʹ.BUFSJBM͕͍ΔͨΊɺ 4DB PMEԼͰ͸*OL8FMMΛ࢖͑Δ
56. 内部的にMaterialを持っているので、Cardの下に不透過なレイヤ ーがあってもCard上でタッチエフェクトが表⽰できる。 ただし、⾓丸になっているためInkWellを使う場合は注意が必要 ※タッチエフェクトがCardを超えて表⽰される  56 Card Materialウィジェットを使う class Card extends StatelessWidget { … @override Widget build(BuildContext context) { … return Semantics( child: Container( child: Material( type: MaterialType.card, shape: shape ?? cardTheme.shape ?? defaults.shape, …
57.  57 Card Materialウィジェットを使う Card( clipBehavior: Clip.hardEdge, child: InkWell( child: …, onTap: () { … }, ), ) clipBehaviorで .none以外を指定する必要がある  57
58.  58 TextButton / OutlinedButton / ElevatedButton Materialウィジェットを使う class ElevatedButton extends ButtonStyleButton { } abstract class ButtonStyleButton extends StatefulWidget { @override Widget build(BuildContext context) { … final Widget result = ConstrainedBox( child: Material( shape: resolvedShape!.copyWith(side: resolvedSide), child: InkWell( onTap: widget.onPressed, customBorder: resolvedShape.copyWith(side: resolvedSide), child: … ), ), ); return Semantics(child: _InputPadding(child: result)); } } #VUUPO܈͸ɺ#VUUPO4UZMF#VUUPOΛܧঝ ಺෦Ͱ.BUFSJBM
    
    *OL8FMMΛ࣋ͭ
59. class ElevatedButton extends ButtonStyleButton { } abstract class ButtonStyleButton extends StatefulWidget { @override Widget build(BuildContext context) { … final Widget result = ConstrainedBox( child: Material( shape: resolvedShape!.copyWith(side: resolvedSide), child: InkWell( onTap: widget.onPressed, customBorder: resolvedShape.copyWith(side: resolvedSide), child: … ), ), ); return Semantics(child: _InputPadding(child: result)); } }  59 TextButton / OutlinedButton / ElevatedButton Materialウィジェットを使う $BSEͷ৔߹͸$MJQͷࢦఆ͕ඞཁ͕ͩͬͨɺ
    #VUUPOͷ৔߹͸#PSEFS4JEF͕ࢦఆ͞Ε͍ͯΔͨΊɺෆཁ
60.  60 IconButton(M 3 ) Materialウィジェットを使う class IconButton extends StatelessWidget { @override Widget build(BuildContext context) { if (theme.useMaterial3) { return _SelectableIconButton(…); } … } } class _SelectableIconButton extends StatefulWidget { @override Widget build(BuildContext context) { return _IconButtonM3(…); } } class _IconButtonM3 extends ButtonStyleButton {…} IconButtonはStatelessWidgetだが、M 3 の場合は内部的に ButtonStyleButtonを使っているため、実装はほぼ同じ。
61.  61 IconButton(M 2 ) Materialウィジェットを使う class IconButton extends StatelessWidget { @override Widget build(BuildContext context) { if (theme.useMaterial3) { return _SelectableIconButton(…); } … return Semantics( child: InkResponse( radius: splashRadius ?? … child: result, …), … ); } } .ͱ͸ҟͳΓɺ *OL3FTQPOTF͕࢖ΘΕ͍ͯΔ Materialウィジェットは内包していないので、 
 不透過レイヤーが下にあるとタッチエフェクトは表⽰されません
62.  62 IconButton(M 2 vs M 3 ) Materialウィジェットを使う M 2 M 3 *OL8FMM *OL3FTQPOTF
63.  63 IconButton(M 2 vs M 3 ) / タッチエフェクトの挙動 Materialウィジェットを使う M 2 M 3 特に指定しないとサイズ固定( 3 5 pt) 
 円形 アイコンサイズに応じたサイズになる 
 実は矩形 *OL8FMM *OL3FTQPOTF
64.  64 IconButton(M 2 vs M 3 ) / タッチエフェクトの挙動 Materialウィジェットを使う M 2 M 3 IconButton( onPressed: () {}, icon: Container( padding: const EdgeInsets.symmetric(vertical: 16), color: Colors.yellowAccent.withAlpha(128), child: Icon( Icons.flutter_dash_sharp, ), ), *DPOʹ1BEEJOHΛՃ͑ͯΈΔͱʜ
65.  65 IconButton(M 2 vs M 3 ) / タッチエフェクトの挙動 Materialウィジェットを使う M 2 M 3 円のサイズが固定のため、 
 Paddingの分だけ下寄りになってしまう 矩形のため、アイコンの形状によっては 
 楕円のようになることもある *OL8FMM *OL3FTQPOTF
66.  66 IconButton(M 2 vs M 3 ) / タッチエフェクトの挙動 Materialウィジェットを使う M 2 M 3 円のサイズが固定のため、 
 Paddingの分だけ下寄りになってしまう 矩形のため、アイコンの形状によっては 
 楕円のようになることもある *OL8FMM *OL3FTQPOTF ɹ.ͷ*DPO#VUUPOɿίϯςϯπͷαΠζͱ ɹɹɹɹɹɹɹɹɹɹɹɹɹෆಁաϨΠϠʔʹ஫ҙ
    ɹ.ͷ*DPO#VUUPOɿλονΤϑΣΫτͷܗঢ়ʹ஫ҙ
67. ここまでInkWellの中⾝を⾒てきました。 最後に、不透過なレイヤーがあるためにタッチエフェクトが⾒えない場合の 
 対応を⾒ていきます。  67
68. 不透過レイヤーがある場合の タッチエフェクトの付け⽅  68
69. Inkを使う 不透過なレイヤーでタッチエフェクトが⾒えない場合、 
 Inkを代⽤することでタッチエフェクトが⾒えるようにできることがあります 簡単にいうと、不透過なレイヤーを加える代わりに、 
 InkによってMaterialウィジェットの⾊を変更することができます。  69
70. class Ink extends StatefulWidget { Ink({ Color? color, Decoration? decoration, this.child, }) : decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null); … final Decoration? decoration; @override Widget build(BuildContext context) { return Padding( child: Builder(builder: _build), ); } …  70 内部実装 Ink .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController *OL @3FOEFS*OL'FBUVSFT
71. class Ink extends StatefulWidget { Ink({ Color? color, Decoration? decoration, this.child, }) : decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null); … final Decoration? decoration; @override Widget build(BuildContext context) { return Padding( child: Builder(builder: _build), ); } …  71 内部実装 Ink .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController *OL @3FOEFS*OL'FBUVSFT .BUFSJBM΢ΟδΣοτʹ ృΓ͍ͨ$PMPS
    
    %FDPSBUJPOΛࢦఆ
72. class Ink extends StatefulWidget { Ink({ Color? color, Decoration? decoration, this.child, }) : decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null); … final Decoration? decoration; @override Widget build(BuildContext context) { return Padding( child: Builder(builder: _build), ); } …  72 内部実装 Ink .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController *OL @3FOEFS*OL'FBUVSFT $PMPSΛࢦఆͨ͠৔߹΋ %FDPSBUJPOʹม׵
73. class Ink extends StatefulWidget { Ink({ Color? color, Decoration? decoration, this.child, }) : decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null); … final Decoration? decoration; @override Widget build(BuildContext context) { return Padding( child: Builder(builder: _build), ); } …  73 内部実装 Ink .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController *OL @3FOEFS*OL'FBUVSFT *OLࣗମ͸ඳը͞Εͳ͍
    %FDPSBUJPO͸࢖ΘΕͳ͍
74. class Ink extends StatefulWidget { Ink({ Color? color, Decoration? decoration, this.child, }) : decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null); … final Decoration? decoration; @override Widget build(BuildContext context) { return Padding( child: Builder(builder: _build), ); } … Widget _build(BuildContext context) { … _ink = InkDecoration( decoration: widget.decoration, controller: Material.of(context), ); return widget.child; }  74 内部実装 Ink .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController *OL @3FOEFS*OL'FBUVSFT EFDPSBUJPO͸ *OL%FDPSBUJPO
    *OL'FBUVSF ʹ౉͞ΕΔ
75. class InkDecoration extends InkFeature { InkDecoration({ required Decoration? decoration, required super.controller, … }) : … controller.addInkFeature(this); }  75 内部実装 Ink .BUFSJBM @*OL'FBUVSFT *OL *OL%FDPSBUJPO @3FOEFS*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController
76. class InkDecoration extends InkFeature { InkDecoration({ required Decoration? decoration, required super.controller, … }) : … controller.addInkFeature(this); }  76 内部実装 Ink .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController addInkFeature *OL *OL%FDPSBUJPO @3FOEFS*OL'FBUVSFT *OL಺Ͱੜ੒͞Εͨ%FDPSBUJPOͰ $BOWBTʹඳը͢Δ*OL'FBUVSFΛੜ੒
77. class InkDecoration extends InkFeature { InkDecoration({ required Decoration? decoration, required super.controller, … }) : … controller.addInkFeature(this); }  77 内部実装 Ink .BUFSJBM @*OL'FBUVSFT -JTU*OL'FBUVSF MaterialInkController addInkFeature *OL *OL%FDPSBUJPO @3FOEFS*OL'FBUVSFT *OL'FBUVSFΛ
    @3FOEFS*OL'FBUVSFTʹొ࿥
78.  78 内部実装（図解） Ink *OL'FBUVSF @3FOEFS*OL'FBUVSFT $PMPSFE#PY
    ͳͲ .BUFSJBM *OL8FMM
79.  79 内部実装（図解） Ink *OL'FBUVSF @3FOEFS*OL'FBUVSFT .BUFSJBM *OL $PMPSFE#PYΛ*OL DPMPS ʹࠩ͠ସ͑Δ *OL8FMM
80.  80 内部実装（図解） Ink *OL'FBUVSF @3FOEFS*OL'FBUVSFT *OL8FMM .BUFSJBM *OL%FDPSBUJPO *OL
81.  81 内部実装（図解） Ink *OL'FBUVSF @3FOEFS*OL'FBUVSFT *OL8FMM .BUFSJBM *OL%FDPSBUJPO *OL *OLࣗମ͸ಁա .BUFSJBMͷද໘ͷ৭ %FDPSBUJPO Λ ม͑Δ͜ͱ͕Ͱ͖Δ
82.  82 ⾊を変えたい場合 Ink ColoredBox( color: Colors.lightGreenAccent, child: InkWell( onTap: () {…}, child: …, ), ) ColoredBoxやContainerで指定しているcolor部分を、Inkに差し替える Ink( color: Colors.lightGreenAccent, child: InkWell( onTap: () {…}, child: …, ), )
83.  83 画像の上にタッチエフェクトをつけたい場合 Ink Ink.image({ this.padding, required ImageProvider image, this.child, }) : decoration = BoxDecoration( image: DecorationImage(image: image, …), ); 画像を指定すると、color同様にDecorationに変換される
84.  84 画像の上にタッチエフェクトをつけたい場合 Ink Ink.image({ this.padding, required ImageProvider image, this.child, }) : decoration = BoxDecoration( image: DecorationImage(image: image, …), ); 画像を指定すると、color同様にDecorationに変換される UJQT 画像の⾓丸は、Ink.imageではできない 
 その場合、BoxDecorationを⾃作するのが早い Ink( decoration: BoxDecoration( image: DecorationImage(image: imageProvider), borderRadius: BorderRadius.all(Radius.circular(8)), ), )
85. Ink.image({ this.padding, required ImageProvider image, this.child, }) : decoration = BoxDecoration( image: DecorationImage(image: image, …), ); Ink( decoration: BoxDecoration( image: DecorationImage(image: imageProvider), borderRadius: BorderRadius.all(Radius.circular(8)), ), )  85 画像の上にタッチエフェクトをつけたい場合 Ink UJQT 画像の⾓丸は、Ink.imageではできない 
 その場合、BoxDecorationを⾃作するのが早い ؙ֯ࢦఆ 画像を指定すると、color同様にDecorationに変換される
86. Materialを使う  86 難しいことを考えずに、Materialウィジェットをもう⼀枚置くのも、OK
87.  87 MaterialType.transparency Material Material( type: MaterialType.transparency, child: …, ) MaterialTypeにtransparencyが⽤意されている enum MaterialType { /// ۣܗɻσϑΥϧτ canvas, /// ؙ֯ͷۣܗɻCardͰ࢖͏ card, /// ԁܗɻσϑΥϧτͰ͸৭ͳ͠ɻʢFABͰ࢖͏ʣ circle, /// ؙ֯ͷۣܗɻσϑΥϧτͰ৭ͳ͠ɻʢϘλϯͰ࢖͏ʣ button, /// ಁ໌Ͱink splashes ΍ highlightsΛඳը͢Δɻ transparency }
88.  88 MaterialType.transparencyによる挙動の違い Material @override Widget build(BuildContext context) { final Color? backgroundColor = _getBackgroundColor(context); assert( backgroundColor != null || widget.type == MaterialType.transparency, 'If Material type is not MaterialType.transparency, ‘a color must either be passed in through the ‘`color` property, or be defined in the theme', ); … if (widget.type == MaterialType.transparency) { return _transparentInterior( shape: shape, clipBehavior: widget.clipBehavior, contents: contents, ); } return _MaterialInterior(…); } USBOTQBSFODZͷ৔߹ɺ CBDLHSPVOE$PMPS͸OVMMͰ͋Δඞཁ͕͋Δ
89.  89 MaterialType.transparencyによる挙動の違い Material @override Widget build(BuildContext context) { final Color? backgroundColor = _getBackgroundColor(context); assert( backgroundColor != null || widget.type == MaterialType.transparency, 'If Material type is not MaterialType.transparency, ‘a color must either be passed in through the ‘`color` property, or be defined in the theme', ); … if (widget.type == MaterialType.transparency) { return _transparentInterior( shape: shape, clipBehavior: widget.clipBehavior, contents: contents, ); } return _MaterialInterior(…); } FMFWBUJPO΍TIBQF͕มߋ͞Εͨͱ͖ʹ "OJNBUJPOΛ࣮ߦ͢Δ*NQMJDJUMZ"OJNBUFE8JEHFU
90. @override Widget build(BuildContext context) { final Color? backgroundColor = _getBackgroundColor(context); assert( backgroundColor != null || widget.type == MaterialType.transparency, 'If Material type is not MaterialType.transparency, ‘a color must either be passed in through the ‘`color` property, or be defined in the theme', ); … if (widget.type == MaterialType.transparency) { return _transparentInterior( shape: shape, clipBehavior: widget.clipBehavior, contents: contents, ); } return _MaterialInterior(…); }  90 MaterialType.transparencyによる挙動の違い Material static Widget _transparentInterior({… }) { final _ShapeBorderPaint child = _ShapeBorderPaint(…); return ClipPath( clipper: ShapeBorderClipper( shape: shape, textDirection:Directionality.maybeOf(context) ), … ); }
91. @override Widget build(BuildContext context) { final Color? backgroundColor = _getBackgroundColor(context); assert( backgroundColor != null || widget.type == MaterialType.transparency, 'If Material type is not MaterialType.transparency, ‘a color must either be passed in through the ‘`color` property, or be defined in the theme', ); … if (widget.type == MaterialType.transparency) { return _transparentInterior( shape: shape, clipBehavior: widget.clipBehavior, contents: contents, ); } return _MaterialInterior(…); } static Widget _transparentInterior({… }) { final _ShapeBorderPaint child = _ShapeBorderPaint(…); return ClipPath( clipper: ShapeBorderClipper( shape: shape, textDirection:Directionality.maybeOf(context) ), … ); }  91 MaterialType.transparencyによる挙動の違い Material USBOTQBSFODZͷ৔߹ɺ୯७ͳ4IBQF#PSEFS$MJQQFS
    㱺.BUFSJBMಛ༗ͷ"OJNBUJPO͕ແޮʹͳ͍ͬͯΔ
92.  92 Material or Ink ? Material Inkで代⽤できるならそれに越したことはないけど、 
 Buttonなどでも内部的にMaterialを使⽤しているので、そこまで神経質になる必要はない。 特に汎⽤的なカスタムWidgetを作っている場合などは、 
 むしろ深く考えずにMaterialを使った⽅が良いと、個⼈的には思います。 class ElevatedButton extends ButtonStyleButton { } abstract class ButtonStyleButton extends StatefulWidget { @override Widget build(BuildContext context) { … final Widget result = ConstrainedBox( child: Material( child: InkWell( …
93. Summary  93
94. Summary • タッチエフェクトは、Materialウィジェットの表⾯(_RenderInkFeatures)で描画される • タッチエフェクトはM 2 とM 3 で挙動が少し異なる • タッチエフェクトが表⽰されない場合はInkをうまく使う • 難しく考えずに、Materialを使ってしまってもOK！  94
95. Thank you for your attention!  95
96. 参考 • Material Design 
 https://m 3 .material.io/ • InkResponse と InkWell と Ink、違いを説明できますか？ 
 https://qiita.com/mkosuke/items/e 5 0 6 2 5 6 5 1 5 1 7 9 d 0 f 4 2 1 b • Flutterはナビタイム ジャパンの新規アプリ開発で輝く 
 https://speakerdeck.com/navitimejapan/ fl utterhanabitaimuziyapanfalsexin-gui-apurikai- fa-dehui-ku  96
97. FlutterKaigi 2023