【Flutter】CardウィジェットにRippleエフェクトを実装する

結論

FlutterでRippleエフェクトをつけたいときはInkWellを使うと思いますが、
Cardウィジェットと一緒に使う際は、CardをInkWellでラップするのではなく、CardでInkWellをラップする。

main.dart

Card(
  child: InkWell(  // InkWellはCardの子ウィジェット
    onTap: () {},
    child: Container(
      height: 300.0,
    ),
  ),
),

背景

例えば、こんな感じのCardがあります。

コードはこちら

home_page.dart

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Card(
          child: Container(
            height: 300.0,
            child: Column(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(4.0),
                      topRight: Radius.circular(4.0),
                    ),
                    color: Colors.grey,
                  ),
                  height: 150.0,
                ),
                Container(
                  margin: const EdgeInsets.symmetric(
                    vertical: 15.0,
                    horizontal: 15.0,
                  ),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Title...',
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.symmetric(
                    horizontal: 15.0,
                  ),
                  alignment: Alignment.centerLeft,
                  child: Text(
                      'SubTitleSubTitleSubTitleSubTitleSubTitleSubTitle...'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

このCardに対して、InkWellでRippleエフェクト付きでクリックイベントを実装してみます。
最初に書いたのはこのコード。
他のウィジェットと同様にCardをInkWellでラップしてみました。

home_page.dart

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: InkWell(  // CardをInkWellでラップしてみる
          onTap: () {},
          child: Card(
            child: Container(
              height: 300.0,
              child: Column(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4.0),
                        topRight: Radius.circular(4.0),
                      ),
                      color: Colors.grey,
                    ),
                    height: 150.0,
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(
                      vertical: 15.0,
                      horizontal: 15.0,
                    ),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Title...',
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(
                      horizontal: 15.0,
                    ),
                    alignment: Alignment.centerLeft,
                    child: Text(
                        'SubTitleSubTitleSubTitleSubTitleSubTitleSubTitle...'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

するとタップ時のRippleがカードの後ろに行ってしまいました。

解決法

InkWellはCardの子ウィジェットとして定義しないといけないらしいです。

おそらくこちらの記事で触れられているようにCardが不透明な背景色を持っているせいなのかな？と思いました。
https://qiita.com/najeira/items/db6edb1c8d8f75042b98

home_page.dart

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Card(      
          child: InkWell( // Cardの子ウィジェットとしてInkWellを使用する
            onTap: () {},
            child: Container(
              height: 300.0,
              child: Column(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4.0),
                        topRight: Radius.circular(4.0),
                      ),
                      color: Colors.grey,
                    ),
                    height: 150.0,
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(
                      vertical: 15.0,
                      horizontal: 15.0,
                    ),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Title...',
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(
                      horizontal: 15.0,
                    ),
                    alignment: Alignment.centerLeft,
                    child: Text(
                        'SubTitleSubTitleSubTitleSubTitleSubTitleSubTitle...'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ), 
    );
  }
}

このようになります。