flutterのInkwellでリップルエフェクトを実現しようとして詰まった

Containerに色を付けたら、内部のInkwellの波紋表現が表示されなくなった

flutterの標準的なWidgetである"Container"。これのBoxDecorationを使えば、簡単にContainerの色や形を変えることが出来る。

Container(
   decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10)
        ),
   child: Text("テスト文字列"),
)

InkWellはマテリアルコンポーネントの一つで、触ると波紋状のエフェクトが出る今風のデザインだ。

InkWell(
   child: Text("テスト文字列"),
   onTap:(){},
)

単体ではうまく機能したが、いざContainerにInkWellをぶち込んで見ると、なぜかRippleEffectが表示されない

Container(
   decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10)
        ),
   child: InkWell(
          child: Text("テスト文字列"),
          onTap: (){},
   ),
)

どうやらリップルエフェクトを合成するとき、なぜか外側のContainerの色が優先されるらしい。

解決法

その1

BoxDecorationのBackgroundBlendModeを変更してみる

Container(
   decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
          backgroundBlendMode: BlendMode.color,
        ),
   child: InkWell(
          child: Text("テスト文字列"),
          onTap: (){},
   ),
)

これはうまく行かない。一応波紋は出るが、さらに外側の背景の色も混ざってコンテナの色がおかしくなる。

Container()をInk()に変える

Ink(
   decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
        ),
   child: InkWell(
          child: Text("テスト文字列"),
          onTap: (){},
   ),
)

これでうまくいった。

その他

backgroundBlendModeはたくさん設定があるのでそれを使えば普通にうまく行った可能性はある。
でもめんどくさかったので……