8.Gün — Temel Widgetlar (Stack, GestureDetactor)

Merhabalarr 💙

Bugün sizlerle ana yapılarımız olan temel widgetlar’ın 2 adet daha inceleyeceğiz bu widgetlar’ın bize hangi alanlarda kullanmamız gerektiğini ve nasıl kullanım kolaylıkarı sağladığına bakacağız…

Sizlerin konularla ilgili soru ve görüşlerinizi belirtmeniz için aşağıya e posta adresimi bırakıyorum oradan ulaşabilirsiniz.

E-mail: gurkanfikretgunak@gmail.com

🔧

İnceleyeceğimiz widget ve class’lar sırasıyla;

• Stack,
• GestureDetactor

Bugünün inceleyeceğimiz Widgetlarda tamamen ara Üzerinizde daha dinamik daha kalıcı ve uygulamanın kendi içerisindeki esnekliğini artırabilecek, kullanım süreçlerine daha kaliteli gösterebilecek ve bununla birlikte ileriye dönük süreçlerde geriye bakıldığında tasarım dilini da kalıcı olduğunu göreceğiz.

Stack

Stack pencere öğesi, ekrana birden çok pencere öğesi katmanı yerleştirmemize olanak tanır. Widget, birden fazla çocuğu alır ve bunları aşağıdan yukarıya doğru sıralar. Yani ilk öğe en alttaki ve sonuncu öğe en üstteki öğedir.

Stack Widget Sürece bakıldığında tekrardan önceki yazılarda bahsettiğimiz gü n material tasarımını hiyerarşik ilkelerinden bir tanesini inceliyor oluyoruz.

Neredeysen tasarım süreçlerinde Stack’sız işlem gerçekleştiremediğimiz söylemekte fayda var.

Katman yapısını daha iyi anlamak için aşağidaki görsele bir bakalım.

Stack Widget içindeki alt Widget’lar boyutu, katmandaki en büyük üyenin boyutudur. Dolayısıyla, alt katman tüm ekranı kaplarsa, Yığının boyutu tam ekrandır. Yığındaki her üyenin konumlandırılması veya hizalanması gerekir, aksi takdirde varsayılan olarak sol üst köşede sona erer.

Örnek olarak, inceleyelim,

And let’s view as a result.

If you notice, the smaller widget has a lot more room to go, and so it’s on the top left by default. To change this, you can align or position your widget using the Align or Positined widget. Align widget usually takes the widget to extreme positions. For example, if we enter the top right, we need to add extra padding to keep it neat and organized. A Positioned widget combines these two things and allows us to keep a Positioned widget instead of Alignment and Fill. We will see how it will be a little later. We will modify our example to use Align and Positioned. Let’s embroider an Alignment in Internal Widgets and then a Positioned widget.

Note: Positioned must be a Stack child element. There cannot be any other widgets between the stack and the widget. To simply align a widget:

Let’s view this now in the children: [] array in Stack.

This Widget will help us to view the movements in the stack.

Bir diğer bize yardımcı olacak Widget İse Positoned olacaktır.

Ve sonuç olarak görüntüleyelim.

Bir diğer bir örnek ile incelyelim.

Ve Sonuç olarak görüntüleyelim.

Katmanlar üzere katmanlar üst üste gelerek hizalama ve pozisyonlarına göre belirgin bir şekilde örneğimizde görüntüleniyor bunu hayal gücünüzün ve ürünlerinizi kullanmak istediğiniz tasarımlarda daha etkin kullanabilmek için bu Widgetımızı detaylı bir şekilde incelemenizi ve bununla ilgili çalışmalar yapmanızı istiyorum Özellikle bu çalışmalarınızı bende de paylaşırsanız sevinirim.

GestureDetector

Bu Aracımızın en güzel özelliği birden fazla hareket atarak uygulamanın üzerine dinamik bir kullanım sağlayabiliriz örnek verelim bir tıklama Çift tıklama veya Tek tık sürükle gibi haraket ile geri dönüş almamızı sağlayacaktır. Hadi hep birlikte bakalım.

Flutter’daki hareket sistemi iki ayrı katmana sahiptir. İlk katmanda, işaretçilerin örneğin dokunuşlar(parmak hareketleri)ve fare imleci ekrandaki konumunu ve hareketini tanımlayan ham işaretçi olayları bulunur. İkinci katman, bir veya daha fazla işaretçi hareketinden oluşan anlamsal eylemleri tanımlayan hareketler sahiptir .

Bir Örnek Çalışmayla İnceleyelim

Ve sonucu görüntüyelim.

İncelediğiniz örnekte gördüğünüz gibi konteyner içindeki bir objeye hareket tanımlayarak objedeki hareketi değişimini görebiliyoruz.

Özet

Bugün incelediğimiz Widgetlar içinde yapının kendi içerisindeki tasarımı dilini etkili kullanılması bizlere kullanımda daha büyük kolaylık sağlar ve uygulamalarınızın içerisindeki yapıların daha net Görüntüle bilmesi için Widgetların özelliklerini incelememiz gerekir. uygulamaların içerisindeki talep edilen planlama hareketlerine göre de değişimler sizi daha etkili uygulama geliştirmenizi sağlayacaktır.

Flutter ile Kalın 💙