[flutter]画像を使った丸いボタンを作る

長い旅路

「画像を丸く切り取ってボタンにしたい！」

まさかこんな願いによって数時間潰すとは思いませんでした。。

まるでバグ

様々な実装方法を試しました。RaisedButton+Image、InkWell+Material、その他色々。。。flutterはそれぞれのWidgetが優秀な分、いろんな実装方法が頭に浮かびます。しかし、どれも微妙な結果に。画像が丸くならなかったり、タップした時のRipple(エフェクト)が発生しなかったり。
バグじゃないのか！と思いながら色々試してましたが、きっと自分の方向性がflutterとは違うのです。

CircleImageButtonというwidgetあってもいい気がしますが！これくらいぱぱっと実装出来てしまうのでしょう！世のflutter使いは！

シンプルな解決策

ついに自分は見つけたのです。えらいポテンシャルを秘めたwidgetを…

「ClipOval」これを使うととてもシンプルに実装することができました。

RaisedButton(
  shape: CircleBorder(),
  child: ClipOval(
    child: Image(
      width: buttonWidth,
      image: AssetImage('assets/image-name.png'),
      fit: BoxFit.contain,
    )
  ),
)

適宜、buttonWidthと画像のパスを変えてください。まさかここまでシンプルにできるとは。。