📘

【Flutter Widget of the Week #16】ClipRRectを使ってみた

2022/10/22に公開

Flutter

初心者

cliprrect

tech

はじめに

Flutter Widget of the Week #16 ClipRRect についてまとめましたので、紹介します。
https://youtu.be/eI43jkQkrvs

ClipRRectとは

ClipRRect とは四角い画像やコンテンツの角を綺麗に丸くしたいときに使われるものです。
では、サンプルを動かして使い方を見てみましょう。

ClipRRect サンプルコード

まずは API Document にあるサンプルを動かしてみましょう。

ClipRRect サンプル実行画面

main.dart

class ClipRRectApp extends StatelessWidget {
  const ClipRRectApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ClipRRect Sample')),
        body: const ClipRRectExample(),
      ),
    );
  }
}

class ClipRRectExample extends StatelessWidget {
  const ClipRRectExample({super.key});

  @override
  Widget build(BuildContext context) {
    const TextStyle style = TextStyle(color: Colors.white);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
	  // ClipRRect なし
          Container(
            alignment: Alignment.center,
            constraints: const BoxConstraints(
              maxWidth: 300,
              maxHeight: 100,
            ),
            color: Colors.blue,
            child: const Text('No ClipRRect', style: style),
          ),
	  // ClipRRect あり　（四つの角全てに同じだけの丸みをつける） ・・・①
          ClipRRect(
            borderRadius: BorderRadius.circular(30.0),
            child: Container(
              alignment: Alignment.center,
              constraints: const BoxConstraints(
                maxWidth: 300,
                maxHeight: 100,
              ),
              color: Colors.green,
              child: const Text('ClipRRect', style: style),
            ),
          ),
	  // ClipRRect あり　（四つの角で丸みの度合いが異なる） ・・・②
          ClipRRect(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(10.0),
              topRight: Radius.circular(20.0),
              bottomRight: Radius.circular(30.0),
              bottomLeft: Radius.circular(40.0),
            ),
            child: Container(
              alignment: Alignment.center,
              constraints: const BoxConstraints(
                maxWidth: 300,
                maxHeight: 100,
              ),
              color: Colors.purple,
              child: const Text('ClipRRect', style: style),
            ),
          ),
        ],
      ),
    );
  }
}

使い方としては、
角を丸くしたい widget を ClipRRect で囲み、borderRadius に切り取る角丸の半径を指定します。
基本的にはこれだけで角を丸くすることができます。
上記のサンプルを参考に細かく見てみましょう。

①（真ん中のClipRectありの widget） では四つの角全てに同じだけの丸みがついてます。

四つの角全てに同じだけの丸みがついている
これは ClipRRect の borderRadius に
BorderRadius.circular(30.0)を指定したため、四つの角に半径30の丸みが付けられています。

②（一番下のClipRectありの widget) では四つの角で度合いが異なる丸みがついてます。

四つの角で丸みの度合いが異なる
これは ClipRRect の borderRadius に
BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(20.0), bottomRight: Radius.circular(30.0), bottomLeft: Radius.circular(40.0), )
が指定されており、topLeft（左上）、topRight（右上）、bottomLeft（左下）、bottomRight（右下）それぞれに指定した値分だけ丸みが付けられています。

ClipRRect のプロパティについて

ClipRRect にはプロパティがいくつかありますので、一部紹介します。

(new) ClipRRect ClipRRect({
  Key? key,
  BorderRadiusGeometry? borderRadius = BorderRadius.zero,
  CustomClipper<RRect>? clipper,
  Clip clipBehavior = Clip.antiAlias,
  Widget? child,
})

①borderRadius

角丸の境界線半径を指定する
デフォルトは BorderRadius.zero
型は BorderRadiusGeometry 型

②clipBehavior

エッジのカスタマイズを設定する
デフォルトは Clip.antiAlias
型は Clip 型
例：clipBehavior にClip.hardEdge を指定すると角がギザギザのようになります（下図）

clipBehavior にClip.hardEdge を指定

最後に

今回は ClipRRect を紹介しました。画像やアイコンの角が丸みつけることは Twitter やインスタのマイページなどのように、アプリでは良く使うかと思います。ClipRRect は使い方が簡単なので、覚えておいて損はないでしょう。是非使ってみてください。
また、今回紹介した ClipRRect 以外にも ClipOval や ClipPath など類似の widget もあります。これらはまた別の機会で紹介しますので、お楽しみに！
次は #17 Hero です。またお会いしましょう。