Flutter'da Responsive Tasarım


Görsel Referansı


Her yıl her bütçeye uygun cep telefonlarının üretilmesi, cep telefonlarına olan ilginin giderek artmasını sağlıyor. Peki sizce 2020 yılında dünyada kaç yeni telefon modeli üretildi ? 100 .. 200? Yaklaşık 600 yeni telefon modeli sadece 2020 yılında üretildi. Her üretilen yeni telefon modeli de beraberinde farklı çözünürlükler getirdi. Farklı çözünürlüklerden bahsederken tabletleri, geniş ekran televizyonları, masaüstlerini de unutmamak lazım.


Mobil cihazların popülerliği ile beraber kullanıcı; televizyonunun, masaüstüsünün hatta artık saatinin de, elindeki cep telefonuyla senkron bir şekilde çalışmasını istiyor. Uygulama geliştiriciler de standart bir kural olarak bir uygulamanın farklı çözünürlükleri de desteklemesi gerektiğini biliyorlar.


Peki cross-platform çalışan Flutter’da Responsive bir tasarım için hangi yapılar kullanılır?


Flutter dökümantasyonuna göre Flutter'da uygulamanızı responsive olarak tasarlayabilmeniz için 2 ana widget'ı kullanabilirsiniz.

  1. MediaQuery

  2. Layout Builder


MediaQuery


MediaQuery cihazınızın ekran çözünürlük bilgilerin tutan bir objededir. Taşıdığı veriyi ise bir MediaQueryData türünde getirmekte.



Eğer farklı cihazlarda kodunuzu çalıştırırsanız ekranda okunan değerin de değiştiğini görebilirsiniz. Bu da MediaQuery widget'ının MediaQueryData bilgisini sürekli güncel tutuyor olmasından kaynaklıdır.


Layout Builder


Layout builder geliştiricinin cihazının veya widget'ının o anki genişlik veya yükseklik değerini alıp , değerlerin değişmesi durumunda hangi widget'ları, widget sınıfını veya widget metodu çalıştıracağınızı belirtmenizi sağlar.


Örneğin; bu kodda ekran genişliği 600 pikselden fazla olduğunda WideLayout widget sınıfını çalıştır, değilse daha dar bir alan için hazırlanmış NarrowLayout widget sınıfını çalıştır demiş oluyoruz.


Ne zaman LayoutBuilder ne zaman MediaQuery?


Bu iki sınıf da responsive tasarımda büyük roller alsalar da kullanılış amaçları birbirleriden farklıdır:


- MediaQuery tüm ekranınızın boyutlarını veri olarak elde etmek istediğinizde kullanmak isteyeceğiniz bir widget'dır. Örneğin bu Container widget'ı ekran yüksekliğinin yarısı, üçte biri, iki katı olsun gibi.


- LayoutBuilder ise widget'ınızın parent'ının yani ait olduğu üst widget'ın genişlik ve yükseklik değerlerini parametre olarak verir. Örneğin direk body parametresine verilmiş bir widget olarak kullanırsanız tüm ekran içinde koyacağınız widget'lara şartlandırma ayarlayabilirsiniz.


Sadece 2 Widget mı?


Tabii ki hayır. Flutter da responsive tasarım için kullanabileceğiniz işe yarar birkaç widget'dan daha bahsedeceğim. Bunlar:

  • OrientationBuilder

  • SafeArea

  • AspectRatio

  • Flexible

  • Expanded

  • FractionallySizedBox



Görsel Referansı


OrientationBuilder


Cihazınızın portrait modunda mı (dikey) yoksa landscape (yatay) modunda mu olduğunu belirtir ve ona göre ortaya çıkaracağınız Widget metodunu veya sınıfını kontrol etmenizi sağlar.



SafeArea


Cihazın üst kısmındaki status bar’ın veya alt tarafındaki butonların olduğu alanı hesaplayıp uygulama ekranınız ile onları ayırır. Böylece tasarımınızın üst kısmı veya alt kısmı, cihazın sistem çubuklarıyla ezilmez. Yapmanız gereken tek şey Scaffold’unuzu SafeArea widget'ı ile sarmalamak.


SafeAre'sız Scaffold


SafeAera'lı Scaffold




AspectRatio


Child widget'ının yüksekliğini ve genişliğini oran olarak belirleyebileceğiniz bir widget'dır. Oran olarak kesir şeklinde yazılır. Genişlik / yükseklik, örneğin: 3 / 2.


AspectRatio'nun boyutu child'ının boyutuna eşittir. Ama diyelim ki bir durum gelişti ve Expanded Widget'ı ile sarmalamanız gerekti. Expanded Widget'ı parent'ı olduğu widget'ı tüm ekrana sığdırmaya çalışacaktır ve ratio oranını ezecektir. Bunu engellemek için Align Widget'ını kullanabilirsiniz.









Child parametresine widget olarak boyutunu oranlamak istediğiniz widget'ları girebilirsiniz.

Resim , kutu …











Flexible


Widget'larınızın boyutlarının parent widget'larıyla ilişki halinde olmasını isterseniz bu widget'ı kullanırsınız. Örneğin sütunun içerisindeki 3 elemanınızın kapladığı alanı her çözünürlükte aynı şekilde gözükmesini istiyorsunuz. Önce her widget'ı Flexible widget'ı ile sarmalamanız ,sonrada onlara bir flex değeri atamanız gerekecek. O widget'ın flex değerinin, tüm flex değerlerinin toplamına oranı sizin widget'ınızın sütun içerisinde ne kadar alan kapladığını belirtir.











Örneğin; ilk Container’ımız 2 + 3 + 1 den 6 / 2 lik kadar bir alan kaplar .

İkinci kutumuz 6/3 .

Üçüncü ise 6/1 birimlik.


Flex özelliğinin zorunluluğunu Flexible içerisindeki fit parametresiyle ayarlayabilirsiniz.

Fit.loose Container'a elle girilen bir yükseklik durumunda o değeri devreye sokar. Bulunduğu alan dolana kadar height değerini kullanmanıza izin verir.








Expanded


Expanded widget'ı Row, Column ya da Flex içerisinde mümkün olduğu kadar boş bir alana yayılması için kapladığı widget'ı zorlar.









Kodumuzdaki container'ımızın expanded widget'ı ile sarmalamadan önceki ekrandaki görüntüsü .















Kodumuzdaki container'ımızı expanded widget'ı ile sarmaladıktan sonraki görünümü











FractionallySizedBox


Parent'ı olan widget'ın yükseklik veya genişlik değerlerini alıp onu kullanabilmenizi sağlar.


Okuduğunuz için teşekkürler :)



Referanslar:

https://www.concettolabs.com/blog/what-is-flutter-app-development-and-how-to-hire-flutter-developer/

https://www.merixstudio.com/blog/responsive-design-flutter/

https://medium.com/flutter-community/develop-a-responsive-layout-of-mobile-app-with-flutter-c6a6f7013aec

https://www.filledstacks.com/post/building-a-responsive-ui-architecture-in-flutter/


Github:

https://github.com/elifbilgep/flutter_responsive_ui


#flutter #responsivedesign #responsiveflutter



0 yorum

Son Paylaşımlar

Hepsini Gör

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2021 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın