Flutter’da CustomPaint Widget ve Curve

Javascript üzerinde canvas kullanarak pek çok yaratıcı işler yapılıyor. Flutter’da da benzer karmaşık animasyonları ve çizimleri yapabileceğimiz sınıf ve metotlarımız var.

Aynı isimli Canvas sınıfı Flutter’da da var fakat bunu direkt olarak kullanmayacağız bunun yerine CustomWidget widget’ını kullanacağız.

CustomPaint’in 5 parametresi var, aşağıda açıklamaya çalıştım.

Buradaki painter parametresi için kullanacağımız CustomPainter’a genişletilmiş bir sınıfımız olmalı.

Bir şeyler çizelim.

Tam genişlikte ve 50 birim yükseklikte yeşil bir dikdörtgen çizdik. Material ve Padding widgetları ile sardığımız CustomWidget’a painter olarak oluşturduğumuz BobRoss widget’ını verdik. BobRoss widget’ımızın paint metodu bir canvas parametresi alıyor ve bu canvas nesnesine ait onlarca çizim metodu var.

Burada cascade notation denen bir çok faydalı bir syntax var. Kodumuzu daha derli toplu hale getirebiliriz bu yazım ile. Art arda iki nokta kullanılan bu yazımda aynı nesneye ait pek çok metodu ardışık olarak çağırabiliriz.

Şimdi canvası hareketlendirmeye geldi. shouldRepaint metodu true dönmeli öncelikle. Sonra gerekli verileri painter sınıfına ileterek çizime hareket katabiliriz. Verilerden kastım çizdiğiniz objenin koordinatları rengi vs. ya da zaman çizelgesinde hangi anın çizilmesini istediğiniz olabilir. Aşağıda tween ve curve kullanarak hareketli bir çizim oluşturmaya çalıştım.

Önce StatefulWidget’a çevirdik widgetımızı çünkü bir state’imiz var artık. initState metodunda gerekli tanımlamaları yapıyoruz, bunları build metodunda yapamayız çinkü her setState çağrıldığında build metodu tekrar çalışacağından işler karışacaktır. İki saniyelik bir tween oluşturduk. drawTime / drawDuration değeri bize zaman çizelgesinde nerede olduğumuz verecek ve CustomPainter bu değer ile hesaplamasını yapıp çizimini yapacak.

Düz bir şekilde büyüyen animasyonumuz oldu. Curve ekleyerek animasyonu monotonluktan çıkarabiliriz. Aşağıdaki gif’in kodlarını şu gistte görebilirsiniz.

 

Medium hesabımdaki şu yazımın çevirisidir.

Bir Cevap Yazın