【Flutter】InkWell|色が変化するタップイベントを追加

今回はInkWell の基本的な使い方を紹介します。

InkWellGestureDetector と同じようにタップできないWidgetにタッチイベントを追加でき、タッチされた際に色が変化するエフェクトを付与できます。

\ 世界最大級のオンライン学習サービス /

目次

InkWellの使い方

InkWell(
  child: Container(
    height: 150,
    width: 150,
    child: Center(
      child: Text(
        'Click',
        style: TextStyle(fontSize: 30),
      ),
    ),
  ),
  highlightColor: Colors.blue.withOpacity(0.7),
  splashColor: Colors.grey.withOpacity(0.7),
  onTap: () {},
),

InkWellは基本的にGestureDetector と同じように扱います。

highlightColor でWidget全体のハイライトエフェクト、splashColorでタップされたポイントから変色が広がるエフェクトの色を指定できます。

InsWllのエフェクトを角丸にする

InkWell(
  child: Container(
    height: 150,
    width: 150,
    child: Center(
      child: Text(
        'Click',
        style: TextStyle(fontSize: 30),
      ),
    ),
  ),
  highlightColor: Colors.blue.withOpacity(0.7),
  splashColor: Colors.grey.withOpacity(0.7),
  borderRadius: BorderRadius.circular(40),
  onTap: () {},
),

タップイベント時のエフェクトを各丸にするにはborderRadius の引数にBorderRadius.circular を渡して角丸を調整します。

一緒に読みたい

参考

  • URLをコピーしました!
目次