【Flutter】画像の角を丸くするには？

柔らかい印象を持たせたくて、画像の角を丸くしたいことってありますよね。
この記事では、Flutterで画像の角を丸くするための方法を説明していきます。

画像を表示しただけの状態

こちらがとりあえず画面の真ん中に画像を表示しただけの状態です。
しっかりと角は尖っています。

ソースコードはこんな感じ。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Image.asset('images/ochazuke.jpeg'),
        ),
      ),
    );
  }

ここから画像の角を丸くしていきます。

ClipRRectを追加

画像の角を丸くするには、ClipRRectを使います。
先にコードを載せてから説明しますね。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: ClipRRect( // これを追加
            borderRadius: BorderRadius.circular(20), // これを追加
            child: Image.asset('images/ochazuke.jpeg'),
          ),
        ),
      ),
    );
  }

ClipRRectとは、画像などの長方形のコンテンツを角丸にしてくれるものです。
ただ、デフォルトでは角丸にする範囲は0、つまりは角丸にはしないことになっているので、
BorderRadius.circular([どれくらい丸くするか])を追加することで角丸になってくれます。
今回は[どれくらい丸くするか]に20を指定しましたが、
ここは実際にエミュレータなどで画像を見て、お好みで設定することができます。

それでは実際に動かしてみましょう。

無事角を丸くすることができました。

（おまけ）うまくいかなかった例

最初は単純に「Containerで囲んでBorderRadius.circularで角丸にできるんじゃないの？」と思っていました。
Containerで囲めば画像もContainerの形に沿って角丸になってくれるんじゃないかなー、という考えです。
ソースコードで言うとこんな感じですね。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container( // PaddingからContainerに変更
          padding: const EdgeInsets.all(20),
          decoration: BoxDecoration( // BoxDecorationを追加
            borderRadius:
                BorderRadius.circular(20), // BorderRadius.circular(20)を追加
          ),
          child: Image.asset('images/ochazuke.jpeg'),
        ),
      ),
    );
  }

が、しかし、角丸にはならない。

試しにContainerに色をつけて、Containerの範囲をわかるようにしてみたところ、
こんな感じになっていました。

画像の周りを囲むような感じでContainerができていたんですね。
Containerでダメなら、どしたらいいの？　という疑問から、上述のClipRRectにたどり着いた次第です。

以上、失敗例も合わせて、画像を角丸にする方法をご説明しました。
参考になれば幸いです。