ClipRRectとは？

子Widgetの角を丸める

https://api.flutter.dev/flutter/widgets/ClipRRect-class.html

ClipRRectでラップしたWidgetの角を丸めて使うことができるWidgetです。分かりやすい例を出すと、四角い箱の角を丸くすることができて、角丸の正方形を作る以外に、丸の形状にすることもできます。

🟥正方形、🔴円形

import 'package:flutter/material.dart';

class ClipRectObject extends StatelessWidget {
  const ClipRectObject({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10),// borderRadiusは、ClipRRectの子Widgetの角を丸める
            // 横と縦の幅が300px赤色のコンテナを作る
            child: Container(
              width: 300,
              height: 300,
              color: Colors.red,
            ),
          ),
        ],
      ),
    ));
  }
}

BorderRadius.circular(10)の場合
ちょっと角丸ですね。

BorderRadius.circular(50)の場合
角丸だとはっきりわかるぐらい角が丸いですね。

borderRadius: BorderRadius.circular(1000)
1000にすると円形になります。

BorderRadius.onlyを使う

左上の角を丸くしたい、右下の角を丸くするなら、BorderRadius.onlyを使います。工夫したら羽のようなオブジェクトを作れそうですね。

import 'package:flutter/material.dart';

class ClipRectObject extends StatelessWidget {
  const ClipRectObject({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ClipRRect(
            // 指定した箇所を角丸にする
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(10.0),// 左上の角
              topRight: Radius.circular(100.0),// 右上の角
              bottomRight: Radius.circular(30.0),// 右下の角
              bottomLeft: Radius.circular(100.0),// 左下の角
            ),
            child: Container(
              width: 300,
              height: 300,
              color: Colors.red,
            ),
          ),
        ],
      ),
    ));
  }
}

まとめ

ClipRRectを使えば、角丸の図形が簡単に作ることもできますし、丸の図形も作れます。皆さんも色々試してみてください。僕は普段角丸の図形は作らないので、これ面白いな〜と感動しておりました。