Flutter ve Reponsive Yapı

Herkese merhaba ben Yunus Emre, bugün sizlere Flutter ile Responsive Yapı’ya giriş yapıp bu konu hakkında işimize yarayacağını düşündüğüm birkaç widget ve paket tanıtacağım. Hazırsanız başlayalım…

Geliştirilen uygulamaların arayüz(UI) tasarımları cihazdan cihaza değişiklik gösterebilir. Sonuçta hergün yeni model veya farklı çözünürlükte cihazlar çıkmakta ve farklı platformlar tanıtılmaktadır. Durum böyle olunca her ekosistem için tek tek yazılım geliştirmek büyük bir kaynak ve zaman kaybına neden olacaktır. Bu durumun önüne geçebilmek için Responsive tasarım yapısına uygun uygulamalar geliştirmeli ve arayüz tasarımlarını bu yapı çerçevesinde tasarlamalıyız.

Flutter kullanarak Cross-Platform uygulamalar geliştirdiğimizde Responsive yapı kullanmamız bizim için kaçınılmaz oluyor. Çünkü her kullanıcının kullandığı arayüzün düzgün bir biçimde görüntülenebilmesi çok önemlidir kısaca yazılımın yer aldığı tüm cihazlarda kullanıcı arayüzünün uyum sağlaması gerekiyor.

Responsive ne demek?

Responsive kelime anlamı olarak dilimizde “Duyarlı” anlamına gelmektedir. Örneğin yüksek çözünürlüklü bir cihazda belirli bir boyutta olan widget’ın daha düşük bir çözünürlükte değişen çözünürlüklere DUYARLI olarak değişip ekrana sorunsuz bir şekilde sığmasını bu duruma örnek verebiliriz. Şimdi gelin kısaca Flutter’da kullanılan responsive widget’lara ve responsive tasarım yaparken işimize yarayabilecek birkaç package bakalım.

Flutter’da responsive tasarım için genellikle kullanılan widgetlar:

• AspectRatio: Belirlenen en ve boy oranına göre widget’ı boyutlandırmaya çalışır. En ve boy oranını aspectRatio parametresi ile belirlenir. En ve boy oranı 2/1 veya 1/2 gibi oranlar ile verilebilir.

• FittedBox: Child widget’ını yani bir altta bulunan widget’ı kendi içinde uygunluğa gire ölçekler ve konumlandırır. Bu uygunluğu fit parametresi ile ayarlayabiliriz.

• FractionallySizedBox: Child widget’ını yani bir altta bulunan widget’ı kullanılabilir alanın belirlenen oranına göre boyutlandıran widget’dır. Belirlenen oran yüzdesel yani 0 ile 1 arasında belirlenen bir orandır. Oranı daha fazla açıklayacak olursak 0.7=%70, 0.5=%50 gibi düşünebiliriz.

• LayoutBuilder: Kendi Parent widget’ına yani bir üst widget’ının boyutuna bağlı olarak değişiklik gösterbilen widget’dır. LayoutBuilder adı üzerinden anlaşılacağı üzere Builder işlevine yani bir oluşturucu işlevine sahiptir. Bu oluşturucu sayesinde widget ilk kez oluştuğunda, küçüldüğünde veya büyüdüğünde belirli işlemleri yapmasını sağlayabiliriz.

• MediaQuery: Kullanılan cihazın ekran çözünürlük bilgilerini MediaQuery’de yer alır. MediaQuery’de bulunan çözünürlük verileri MediaQueryData tipinde tutulur ve cihaz döndürüldüğünde bu data da değişir.

MediaQuery kullanarak cihaz çözünürlüklerine oranla widgetlar oluşturabiliriz. Aynı zamanda bu widget responsive tasarım için en çok kullanılan widgetlardan biridir.

• OrientationBuilder: Kullanılan cihazın dikey ya da yatay olup olmadığını belirtir ve bu duruma göre Builder işlevi ile belirli işlemler yapmamıza olanak sağlar. Cihazın hangi durumda olduğunu Orientation parametresinden öğrenebiliriz. Örneğin Orientation.portrait ile kontrol edebiliriz.

Evet birlikte bazı widgetlar görmüş olduk umarım bu noktaya kadar eğlenmiş ve sıkılmamışsınızdır. Şimdi responsive yapı tasarlarken işimizi kolaylaştıracak ve bizlere zaman kazandıracak bazı flutter paketlerine bakalım.

Sizlere 2 paket göstermek istiyorum bu paketler:

• responsive_builder : Bu paket sayesinde cihaz türünü anlayabilir ve bu cihaz türlerine özel işlemler yapabiliriz. Aynı zamanda bu işlemleri birlikte kullanabiliriz.

Bu işlemlere basitçe örnekler verecek olursak:

Cihaz türüne göre 💻-🖥-📱-️⌚️ ➡️

• Widget veya tema rengi verme.

• Özel widget boyutu verme.

• Ekran kesme noktaları(Bu sayede belirlediğimiz çözünürlüklere

göre cihaz tipini biz belirliyoruz.)

Cihazın yönüne göre ➡️

• Widget veya tema rengi verme.
• Özel widget boyutu verme.

• flutter_screenutil : Bu paket sayesinde Flutter’da ekranların(widget-tasarladığımız arayüz gibi düşünebiliriz) ve yazı tiplerinin değişen çözünürlüklere duyarlı olması yani adapte olması sağlanır.
• responsive_framework : Bu paket mantık olarak responsive_builder paketine çok benziyor. Bu paketin farkı ise içeriklerin resize mı yoksa scale mı olacağını belirliyor olmanız.

• sizer : Arayüzde bulunan widget ve yazı tipi gibi UI elemanlarının değişen çözünürlüklere veya değişen cihaz tipine ayak uydurmasını sağlar. (Syntax’ı en çok hoşuma giden bu)

İşte bu kadar… Umarım keyif almışsınızdır. Okuduğunuz için teşekkür ederim.