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.