Flutter Clipper Kullanımı

Merhabalar,

Öncelikle konumuza başlamadan önce biraz Clip hakkında konuşalım. Clip yani adındanda anlayacağınız gibi bir alanda sınırlama, kırpma, kesme işlemidir. Bazen Clipper kullanarak bir Widget’ı kırpmak, belirli başlı yerlerde radius gibi eklemeler ile kullanmak isteyebilirsiniz. Bu durumlar için hazırlanmış özel methodlar yada Custom bir clipper kullanarak belirlediğiniz şekiller oluşturabilirsiniz.

Flutter tarafında belirli başlı basit kırpma işlemleri için hazırlanmış ClipRect, ClipRRect, ClipOval, ClipPath gibi kullanabileceğiniz 4 sınıf bulunmaktadır.

Yukarıda bahsettiğimiz default sınıfları kısaca açıklayalım.

ClipRect Örnek kullanımı;

child: ClipRect(
  child: Container(
     color: Colors.blue,
     width: 200.0,
     height: 200.0,
    ),
  ),
),

Örnektende anlayacağınız gibi dikdörtgenin köşelerini kırpmak için kullanılır.

ClipRRect Örnek kullanımı

child: ClipRRect(
  borderRadius: BorderRadius.circular(15.0),
  child: Container(
     color: Colors.blue,
     width: 200.0,
     height: 200.0,
    ),
  ),
),

Yukarıda verdiğimiz ilk örnekten farklı olarak parametre olarak radius değeri aldığını görüyoruz. Burada tanımlanan radius değeri ile istenilen köşelerden istenen değer kadar kırpabiliriz.

ClipOval Örnek kullanımı

child: ClipOval(
  child: Container(
     color: Colors.blue,
     width: 200.0,
     height: 200.0,
    ),
  ),
),

Aslında anlaşıldığı gibi oval olacak şekilde kırpma işlemleri için kullanılır.

ClipPath (CustomClipper) Örnek kullanımı

Aslında en çok kullanılan ve en karmaşık olan olarak düşünülebilir. Kullanacağımız ClipPath işleminde, kullanılacak bir class hazırlamamız gerekmekte. Böylece özel ve istenen şekilde kesme işlemleri yapılabiliriz.

Konuyu çok uzatmadan örnek üzerinden ilerleyelim.

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0.0, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }
@override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

Burada bilmemiz gereken önemli iki nokta bulunuyor. CustomClipper sınıfından türettiğimiz bu sınıf içerisinde override etmemiz gereken iki sınıf bulunuyor.

getClip: Kırpılacak alanın hazırlandığı ve bu alanın ClipPath işlemine geriye döndürüldüğü method.

shouldReclip: Burada ki dönüş değerine göre clipPath’in tekrar tetiklenmesini sağlar. Burada ki değer true olması durumunda değişiklikler direkt olarak ekrana yansıyacaktır. False olması durumunda ise clipper tetiklendiğinde getClip işleminden sonra yansır.

Sıkça kullanılan 2 path yöntemini de anlatarak yazımıza son verelim.

lineTo: Bir noktadan diğerine doğru düz çizgi çekmek için kullanılır.

quadraticBezierTo İki nokta arasında eğriler çizmek için kullanılır.

Burada ki path işlemleri ile ilgili daha detaylı bilgi almak isterseniz link üzerinden ulaşabilirsiniz.

Konuyla ilgili önerileriniz ve sorularınız varsa yorumlarınızı bekliyorum. Okuduğunuz için teşekkür ederim..