【Flutter】ContainerにImageを載せた時にRadiusが効かず闘った話

Flutterの書き方をだいぶ覚えてきた頃のことです。
画像にRadiusをつけた状態で表示したかったため、BorderRadiusをつけたContaierに画像を載せました。
その時に実装したコードはこちらです。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('画像表示'),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 180,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6.0),
          ),
          child: Image.asset(
            'assets/image_sample.jpeg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

この状態で表示するとこうなりました。

「あれ、なんか思ってたのと違う。」
試しに子要素の画像を外して、Containerの形を確かめたらこう。

「Radiusはついてるな。fitもboxfit.coverにしているし。これじゃダメなのか？」

なんてことが起き、当時の自分はこれっぽっちのために複数のサイトを経由しました。
その結果たどり着いたのが以下のコード。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('画像表示'),
      ),
      body: Center(
        child: SizedBox(
          height: 300,
          width: 180,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(6.0),
            child: Image.asset(
              'assets/image_sample.jpeg',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }

表示結果がこちら。

「ClipRRectを使えばいいのね！」
当時はこれでことなきを得ました。

それから時間が経って、もう一度このコードを記載した。
「そういえば、あの時なんでContainerにRadiusつけただけじゃできなかったんだろう。」
って思って調べてみたら、あった。

冷静に考えた時に、画像を角丸にできなかった時のコードでは、Containerに対してのみRadiusを指定していました。そりゃ画像も変わらないわなって感じなんですけど、どうやら子要素がContaierの領域をはみ出したら、はみ出した分を切り取ってくれるという指定ができるみたい！

というわけで、以下を試してみると。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('画像表示'),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 180,
          clipBehavior: Clip.antiAlias, // ここを1行追加するだけ！
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6.0),
          ),
          child: Image.asset(
            'assets/image_sample.jpeg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

最初にうまくいかなかったコードから1行追加するだけで、画像を角丸にできたんです！
clipBehavior：antiAliasを追記することで、Containerの領域からはみ出した部分を切り取ってくれるみたいです！
さらに、元々fit: BoxFit.coverにしていたので、Containerのサイズに合わせて画像が引き伸ばされていたって感じですね！

ClipRRectを使用する方法も、Container内でclipBehaviorのパラメータを指定する方法も、どちらも間違いではないですが、2通りの書き方を知っておくことで、仕様に合わせて出しわけできそうですよね！

以上！ありがとうございました！