長い旅路
「画像を丸く切り取ってボタンにしたい!」
まさかこんな願いによって数時間潰すとは思いませんでした。。
まるでバグ
様々な実装方法を試しました。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と画像のパスを変えてください。まさかここまでシンプルにできるとは。。