Help us understand the problem. What is going on with this article?

flutterでCustomClipperを用いて要素を切り抜く

flutterでクリッピングを行う方法についてです。

CustomClipper

基本的なクリッピングはカスタムクリップを提供するためのインターフェイスであるCustomClipperを実装しているクラスを用いることで実現できます。
具体的には、ClipRect、ClipRRect、ClipOval、ClipPathの4つのウィジェットでクリッピングが行えます。

ClipOval

ClipOvalは円形のクリッピングを行う際に使用するウィジェットです。

円形にくり抜く

スクリーンショット 2018-11-24 14.35.54.png

ClipOval(
 child: Container(
  color: Colors.red,
  width: 100.0,
  height: 100.0,
 ),
),

楕円形

コンテナの高さまたは幅を変更すると、楕円形になります。

スクリーンショット 2018-11-24 14.35.54.png

ClipOval(
 child: Container(
  color: Colors.red,
  width: 150.0,
  height: 100.0,
 ),
),

ClipRect

大きな画像から矩形領域を切り抜くのに使用します。
たとえば、大きな画像の小さな矩形部分だけを必要とする場合は、ClipRectを使用します。

スクリーンショット 2018-11-24 14.56.04.png

ClipRect(
  child: Align(
  alignment: Alignment.bottomRight,
  heightFactor: 0.8,
  widthFactor: 0.8,
  child: Image.network(
  "https://static.vinepair.com/wp-content/uploads/2017/03/darts-int.jpg"),
  ),
),

ClipRRect

角を丸めるために使用します。

スクリーンショット 2018-11-24 14.58.58.png

ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(50.0),
    topRight: Radius.circular(50.0),
    bottomRight: Radius.circular(50.0),
  ),
  child: Align(
    alignment: Alignment.bottomRight,
    heightFactor: 0.8,
    widthFactor: 0.8,
    child: Image.network("https://www.pakutaso.com/shared/img/thumb/iPhonexrFTHG8710_TP_V.jpg"),
  ),
),

ClipPath

パスを使用してクリップする領域を決めることが出来ます。

ClipPath(
  child: new Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
  clipper: TriangleClipper(),
),

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width / 2, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

Clipのサイズと位置をカスタマイズする

CustomClipperクラスを継承することで独自のクリップ領域を定義することも出来ます。
継承するときは、2つのメソッドをオーバーライドする必要があります。

一つはgetClipです。
このメソッドではRectを返す必要があり、このRectで、クリップのサイズと位置を定義します。
RectはfromLTRBコンストラクタを使用して、左、上、右、下の点を指定します。

もう1つはshouldReclipです。
このメソッドは、古いオブジェクトと比較するために新しいオブジェクト(この場合はCustomClipper )を作成するたびに呼び出され、trueを返すとgetClipメソッドが呼び出され、getClipメソッドも呼び出すことができます。  
ボックスのサイズが変更されたときにトリガーされます。  

スクリーンショット 2018-11-24 14.43.56.png

class CustomHalfRect extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    Rect rect = Rect.fromLTRB(0.0, 0.0, size.width*2, size.height);
    return rect;
  }

  @override
  bool shouldReclip(CustomHalfRect oldClipper) {
    return true;
  }
}

 参考

https://docs.flutter.io/flutter/rendering/CustomClipper-class.html
https://medium.com/flutter-community/clipping-in-flutter-e9eaa6b1721a

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away