FlutterのClipOvalウィジェットを使ってみた！

ClipOvalとは？

ClipOvalは、画像などで角ばった部分を円形や楕円形に切り抜くことができるウィジェットです。

使い方

使い方はこのようにClipOvalでラップして使います。

ClipOval(
    child: Image.asset('hoge.jpg'),
)

ClipOvalはデフォルトではそのままのサイズで切り抜かれるため、縦長の画像は縦長の楕円形になり、横長の画像は横長の楕円形で切り抜かれます。

好みのサイズにしたい場合は、clipperを追加します。

ClipOval(
    clipper: MyClipper(),
    child: Image.asset('hoge.jpg'),
)

新しいクラスとしてclipperを実装し、CustomClipper<Rect>を拡張し、getClipとshouldReclipの2つのメソッドを実装します。

getClipメソッドは子のサイズを取得し、Rectに返し、Flutterが楕円を描画します。どの位置でもサイズでもRectを配置できます。例えば、下記のコードでは楕円を子の左を20、上を20、幅を200、高さを200ピクセルに設定しています。

shouldReclipは、Clipperの過去の状態に基づきFlutterが再度切り抜くかを指示します。Clipperの状態が同じ切り抜きになるのが明確なら、効率的にfalseを返します。

class MyClipper extends CustomClipper<Rect> {
    Rect getClip(Size size) {
        return const Rect.fromLTWH(20, 20, 200, 200);
    }

    bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
        throw UnimplementedError()
    }
}

まとめ

・ClipOvalは画像などを円形や楕円形に切り抜くことができる。
・好みのサイズに切り抜きたい場合はclipperを追加する。