Flutterで画像にborder radiusをつける

結論

ClipRRectを使ってchildにImageのWidgetを置く。

やりたいこと

FadeInImageにborder radiusをつけたい。

問題

Containerのdecorationにborder radiusを指定しても効かない。

Container(
  width: 100.0,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.circular(8.0),
    ),
  ),
  child: FadeInImage.memoryNetwork(
    placeholder: kTransparentImage,
    image: url,
  ),
);

Containerの上に画像を乗ってくる形になってしまう。
ContainerのchildにFadeInImageを指定するのでなく、BoxDecoration.imageに指定する方法でもダメだった。

Container(
  width: 100.0,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        image: url,
      ).image,
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(8.0),
    ),
  ),
);

heightを指定できる場合(画像によってサイズを変えずに固定サイズの場合)はもしかしたらこれでもいいかも(未検証)。

解決策

ClipRRectを使う。

Container(
  width: 100.0,
  child: ClipRRect(
    borderRadius: BorderRadius.all(
      Radius.circular(8.0),
    ),
    child: FadeInImage.memoryNetwork(
      placeholder: kTransparentImage,
      image: url,
    ),
  ),
);

おそらくFadeInImageでなくても画像widgetであれば同じ対応でできそう。

ちなみに丸にする場合は

同じ要領でClipOvalで対応できる。

Container(
  width: 100.0,
  child: ClipOval(
    child: FadeInImage.memoryNetwork(
      placeholder: kTransparentImage,
      image: url,
    ),
  ),
);