Flutter ile responsive uygulama geliştirme

Herkese merhaba,

FlutterForum.org üzerinden kullanıcılarımızın talebi ile bu yazıyı yazma kararı aldım.

Responsive nedir ?

Responsive’in kelime anlamı “Duyarlı” demek. Yapılan çizim veya tasarımın ekran yatay veya dikey olarak büyüdükçe buna Duyarlı olarak tasarımında değişmesi için kullanılırız. Bildiğiniz gibi piyasa ekran genişliği birbirinden farklı yüzlerce telefon/tablet var. Tüm bu farklı cihazlar için tek tek tasarım yapmak yerine ekrana uyarlı uygulamalar geliştirmek daha hızlı ve mantıklı. Bu durum Flutter içinde geçerli. Flutter ile yapılan tasarımlar çok farklı ve güzel olsada tablet gibi büyük ekranlarda test ettiğimizde patlıyor. Daha doğrusu güzelliğinden eser kalmıyor.

Peki ne yapabiliriz ?

İşlem çok basit esasında. Widget veya diğer itemleri width ve height değerlerini elle vermek yerine bunu ekranın oranına göre ayarlayıruz Böylelikle ekran büyüdükçe itemler orantılı olarak büyüyor, ekran küçüldükçede küçülüyor.

Peki Nasıl yapabiliriz ?

Açtığımız dart sayfasının en üstünde import ile başlayan, bu sayfada çalışacak diğer dart dosyalarının uzantısı olur. Onun hemen altına aşağıdaki kodları yapıştıraşlım.

class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static double screenHeight;
static double blockSizeHorizontal;
static double blockSizeVertical;

void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
blockSizeHorizontal = screenWidth / 100;
blockSizeVertical = screenHeight / 100;
}
}

Bu kod satırcıkları sayesinde ekranımızın boyutlarını kayıt altına tutmuş olduk. Daha sonra yapmamız gerekense bunları önbelleğe kaydetmek ve çağırmak.

Widgetlerin başladığı yere yani;


Resim 1 flutter responsive

Yukarıda görünfüğü gibi Widget build(Ana tasarımın başladığı yer olur kendileri) yazan yerin altına SizeConfig().init(context); Kodunu yazalım ki bundan sonra çağırabilelim.

İşte işem bu kadar.

Örnek kullanımınıda gösterdikten sonra makaleyi bitirebilirim.

SizedBox(
height: SizeConfig.blockSizeVertical * 20,
width: SizeConfig.blockSizeHorizontal * 50,
.
.
.
.

Gibi Gibi kullanabilirsiniz.

Leave a comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir