📝

【コラム】実務で使える「画像×角丸」

2025/06/22に公開

Flutter

tech

画像に角丸を付けたいとき、初めは案外時間かかっちゃうんですよね。
いまどきAI使えばそれなりに書いてくれるけど、スマートにカッコ良く書いてこそFlutterエンジニア！

今回は画像に角丸をつける方ほを2つご紹介します。

ClipRRect

おそらくこれが一番目に止まるWidgetかなと思います。

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ClipRRect( // ここを追加
        borderRadius: BorderRadius.all(Radius.circular(16)),
        child: Image.asset(
          "assets/images/take.jpg",
          height: 200,
        ),
      ),
    ),
  );
}

ただ、角丸ができたからといって、これにBorder等のデザイン性を加えたい時って結構頻繁にありますよね。そんな時は難しく考えずContainerを使っちゃいましょう！

Container

結局自分画像表示させるときに使うのはこの方法

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Container(
        height: 200,
        clipBehavior: Clip.antiAlias, // この一行を追加するだけ！
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(16)),
        ),
        child: Image.asset(
          "assets/images/take.jpg",
        ),
      ),
    ),
  );
}

これでContainerのスタイリングにデザインを依存させて表示することができます！
結構この方法を知らずに、Containerと画像のどちらにもRadiusをつけちゃうことあるんですよね。

もちろん、ContainerのchildにClipRRectで作成した角丸を乗せる方法でも実装が不可能というわけではありません。

ただ、画像一つ表示させるのに冗長なコードを書くくらいだったら、シンプルにClipを渡す方法で実装してみてはどうでしょうか😁

ClipRRect

Container

Discussion