【Flutter】ClipOvalでの画像の切り抜きと注意点

ClipOvalとは

子ウィジェットを楕円(円)の形で切り抜くことができるウィジェット。
切り抜く位置、サイズを指定することができる。

使い方

今回サンプルの縦長画像の上部を切り抜きます。(黄色の枠線部分)

　

ClipOval(
    clipper: CustomUpperClipper(),
    child: Image.asset('images/sample.jpg', width: 250),
),

切り抜く位置、サイズをCustomUpperClipperクラスで指定する

class CustomUpperClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(
        center: Offset(size.width / 2, size.width / 2),
        radius:　size.width / 2
    );
  }

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
    //複数回異なるインスタンスを作るような場合はtrue、この場合false
    return false;
  }
}

注意点

添付の画像を見てわかるように、切り抜いたにも関わらず画像の高さが変わっていない。
切り抜き後に高さを合わせたい場合、Alignウィジェットを使い高さ調整をする。

Align(
    alignment: Alignment.topCenter, 
    heightFactor: 0.625, //切り抜き後の高さ/元の高さ
    child: ClipOval(
        clipper: CustomUpperClipper(),
        child: Image.asset('images/sample.png', width: 250),
    ),
),

---