Flutter’da Responsive Tasarım

Published in

Flutter Türkiye

4 min readMay 14, 2021

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.

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.

LayoutBuilder

LayoutBuilder 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 GenisEkran widget sınıfını çalıştır, değilse daha dar bir alan için hazırlanmış DarEkran 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

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 body’nizi SafeArea widget’ı ile sarmalamak.

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.

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 ‘2/6’ lik kadar bir alan kaplar .

İkinci kutumuz 3/6.

Üçüncü ise 1/6 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.