Flutter Drag&Drop
Merhabalar 👋 Bu yazımda Flutter’da Drag&Drop işlemlerini nasıl yapabileceğimizi anlatacağım.
Aslında temelde Drag&Drop işlemleri için 2 ana widget kullanıyoruz.
Draggable: Bu widget sürükleyebildiğimiz kısımdır ve burada sürüklemek istediğimiz widgetları tanımlıyoruz.
DragTarget: Bu widget ise sürekleyebildiğimiz widgetı kabul eden kısımdır burada gerekli durum kontrolleriyle draggable widgetları kabul edebiliriz.
Drag&Drop’lar genel olarak uygulamalarda bazı kolaylıklar ve kullanım kolaylıkları sağlar. Örneğin kullanıcı tarafından sıralanabilir bir liste oluşturmak istediğimizde bunu kendimiz yapmak istersek Draggable ve DragTarget kullanarak oldukça kolay bir şekilde yapabiliriz. Aksi halde paket kullanmak zorunda kalacağız. Zorunda olmadıkça projelerime paket yükü almayı sevmem. Sanıyorum herkes böyle düşünüyordur.
Hadi Başlayalım!
Drag & Drop için kullanacağımız widgetları ayrıntılı inceleyebilmek adına bir senaryo oluşturdum. Hani o barbie giydirme oyunları var ya onlara benzetebiliriz 😂
İki farklı targetimiz olacak. Bir tanesi vücudun üst kısmını hedef alacak, diğeri ise alt kısmını yani üstümüze Tshirt giyerken altımıza Jean giyeceğiz.
Öncelikle vücudun kısımlarını tanımlayalım.
Vücudun üst kısmınıda aynı şekilde UpperBody olarak tanımlıyoruz.
Şimdide bu sınıflardan kalıtacağımız bir kaç tane kıyafet yapalım. Vücudun üst kısmına giyilebilecekleri UpperBody’den alt kısıma giyilenleri LowerBody’den kalıtacağız.
Aynı Şekilde UpperBody’den Hoodie ve LowerBody’den Jean, Trousers oluşturuyoruz.
Şimdi mock bir repository oluşturalım.
Datalarımızda hazır olduğuna göre arayüze ve Draggable widgetımızı oluşturabiliriz.
Widgetın içersine farklı tipte kıyafetler koyabileceğimiz için Widgetımızı Generic olarak oluşturuyoruz. Draggle ve LongPressDraggable olarak iki farklı Draggable var burada istediğimizi kullanabiliriz. Draggable olarak direkt tanımlamış olduğumuz Scroll kullandığımız durumlarda sorunlar yaratabilir bu durumlarda LongPress’i tercih etmek daha doğru olacaktır. LongPressDraggable’da press için delay set edebilme şansımız var.
Draggable widget içerisinde bulunan child bilindiği üzere ana tasarımlı widgetımızı alır, feedback’de içerisine widget alır ve taşıma sırasında elimizdeki widgetın tasarımında değişiklikler yapabiliriz. Ayrıca childWhenDragging’te ise taşıma sırasında sabit duran Draggable tasarımını farklı bir şekilde gösterebiliriz. Draggable widgetının axis özelliği sürükleme hareketlerinin yönünü belirlememize, hareket yönünü sınırlamamıza olanak sağlıyor.
Son olarak kritik olarak bahsedebileceğim taşıma işleminin başlaması, bitmesi ya da iptal edilmesi gibi durumları tetikleyen fonksiyonlara da sahiptir.
İçerisine göndermiş olduğumuz model’i Draggable içerisinde bulunan data kısmına koyuyoruz. Bu şekilde sürükleme eventleri sırasında içerisinde bulunan dataya erişerek DragTarget’lerde bu datayı işleyebiliriz.
Şimdi bu DraggableWidget’ımızı kullanarak bir Gardrop widgetı oluşturalım.
Oluşturduğumuz örnek kıyafetleri repositoryden alarak bir widgetın içerisinde bu şekilde oluşturuyoruz.
Gardrobumuzu da oluşturduğumuza göre gelelim DragTarget olayına. Şimdiye kadar sürüklenebilir widgetlerımızı oluşturduk. Bunları sürükleyeceğimiz alan ise DragTarget tarafından oluşturulacak. Hadi Targetlerimizin bulunduğu widgetımızı yazalım.
LowerBody DragTarget’imizi oluşturduk. DragTarget’in onAccept kısmında kabul edildiğinde yapmasını istediğimiz işleri yaptırıyoruz ben örnekte kıyafetin imageUrl’ini aldım ve DragTarget görünümüne koydum böylelikle sürüklemiş olduğumuz Draggable widgetımızın görselini DragTarget üzerinde görebiliyoruz. Aynı şekilde UpperBody ‘i de oluşturmalıyız.
Oluşturmuş olduğumuz Draggable widgetlar içerisine farklı kıyafet türleri alıyordu. Aldığı bu türler UpperBody ve LowerBody üzerinden kalıtılmış türlerdi. Oluşturduğumuz DragTarget’lerinde UpperBody ve LowerBody tipini kabul edebiliyor olması UpperBody tarafının Hoodie, Tshirt ve LowerBody tarafının Jean, Trousers gibi subclassları kabul etmesine olanak sağlar.
DragTarget için çok farklı kontrol vardır. Genellikle onWillAccept ile üzerine sürüklediğimiz Draggable widgetları bırakmadan gerekli işler yaptırabiliriz. Draggable widgetla DragTarget üzerinde gezerken Move fonksiyonu sürekli olarak tetiklenir ya da Target alanından çıktığımızda onLeaved fonksiyonun tetiklendiğini görebiliriz. Bunlar için özel işler yazmamız gerekebildiğinden bunlar oldukça kritiktir.
Ayrıca içerisinde kullandığım _clothesWidet’ı da yazıyoruz.
Gerekli bütün alanları oluşturduk. Appimizi şimdi ayağa kaldırıp neler yaptığımıza bakabiliriz.
İşte Demomuz!
Özetlemek gerekirse 2 adet Target oluşturduk ve bu targetlere farklı Draggable widgetları sürükledik ve farklı aksiyonlar aldık. Kendi tipinde(Kalıtılmış) olan Draggable’ları kabul ederek imageUrl’lerini aldı. Farklı bir generic tipte Draggable sürüklediğimizde ise kendi subclassı olmadığı için widgetı kabul etmedi.
Drag & Drop eventini detaylı bir şekilde anlatmaya çalıştım umarım sıkılmadan okumuşsunuzdur 🤓
Projenin sayfalara ait kodlarını direkt olarak paylaşmak yerine önemli olan noktaları paylaşmayı tercih ettim ama projenin tamamının kaynak kodunu burada bulabilirsiniz.
Twitter: FurkayOlkay
Github: github.com/furkay
