👨🏼💻Flutter vs Jetpack Compose (Karşılaştırmalı Öğrenme Serisi Bölüm-1)
Bu öğrenme serimizde, karşılaştırma yöntemini kullanarak Flutter ve Jetpack Compose öğreneceğiz. Amacımız karşılaştırma yöntemi kullanarak Flutter bilen geliştiricilerin Jetpack Compose öğrenmelerini, Jetpack compose bilen native android geliştiricilerin ise Flutter öğrenmelerini sağlamaktır.
Not: Flutter geliştiren biri olarak yazılar ve tanımlamaları Flutter’a göre yapacağım.
Giriş
Serimizin ilk yazısında temel widget/component’lerden 4 tanesini öğreneceğiz.
İnceleyeceğimiz widget/component’ler şunlardır:
- Scaffold
- Column
- Row
- Container/Box
Widgets(Flutter)/Components(Jetpack Compose)
1.Scaffold
Scaffold temel material design görsel layout yapısını uygulayan bir layout olarak karşımıza çıkmaktadır. İçerisinde appbar, body, bottomNavigationBar, drawer, FAB gibi kısımlar bulunmaktadır.
Flutter ve Jetpack Compose’da scaffold parametre isimleri değişiklik gösterebilmektedir. Aşağıda karşılaştırmalı olarak önemli scaffold parametrelerini görebilirsiniz:
Scaffold State kullanımı:
Flutterda şu şekilde kullanılmaktadır:
Jetpack compose da ise şu şekilde tanımlanmaktadır:
Örnek olarak drawer state tutalım.
Scaffold kullanımına birer örnek verecek olursak:
Flutter:
Jetpack Compose:
2.Column
Column, elemanları dikey olarak görüntülememezi sağlar.
Not: Colum ile kaydırma(scroll) işlemi yapamazsınız. Kaydırma(Scroll) işlemi için Listview kullanmayı düşünebilirsiniz.
2.1 Flutter hizalamalar:
Yukarıda da görüldüğü gibi “Main Axis” column elemanlarının dikeyde, “Cross Axis” ise elemanların yatayda hizalanmasını sağlar.
Gelin hep beraber yatay ve dikeyde hizalama türlerini görelim :
Main Axis Hizalamaları:
Yukarıdaki görselde gördüğümüz hizalama tiplerini teker teker açıklayalım:
Not: Column içerisine eklenen elamanlar sırayla: 1. Yeşil, 2. Mavi, 3. Turuncu
Not2: Varsayılan olarak ilk eklenen eleman en üst noktada, en son eklenen eleman ise en alt noktadadır.
center: Column elemanlarının arasında boşluk bırakmaz. Alt ve üstten eşit miktarda boşluk kalacak şekilde merkezi bir ayarlama yapılır.
start: Column elemanlarının arasında boşluk bırakmaz. Elemanları en üst noktadan aşağıya doğru sıralar.
end: Column elemanlarının arasında boşluk bırakmaz. Eklenen her yeni elemanı grubun en alt noktasına yerlestirir.
spaceEvenly: En alt, en üst ve elemanlar arası boşluklar eşit olacak şekilde ayarlama yapar.
spaceAround: spaceEvenly ile neredeyse aynıdır. Tek fark: spaceAround’da alt ve üstteki boşluklar az, elemanlar arasındaki boşluklaer daha fazladır.
spaceBetween: Alt ve üst tarafta boşluk bırakmaz. Yalnızca elemanlar arasında eşit miktarda boşluk bırakır.
Cross Axis Hizalamaları:
center: Elemanları, merkezleri yatayda orta noktaya gelecek şekilde ayarlar.
start: Yatayda tüm elemanları sola yaslar.
end: Yatayda tüm elemanları sağa yaslar.
stretch: Elemanları yatayta tüm alanı dolduracak şekilde ayarlar.
2.2 Jetpack Compose hizalamaları:
Vertical Arrangement Hizalamaları:
Burada Flutter ile karşılaştırma yapacağız.
Top: MainAxisAlignment.start
Bottom: MainAxisAlignment.end
Center: MainAxisAlignment.center
SpaceEvenly: MainAxisAlignment.spaceEvenly
SpaceBetween: MainAxisAlignment.spaceBetween
SpaceAround: MainAxisAlignment.spaceAround
Şimdi akılda daha iyi kalması için tabloda görelim:
Horizontal Alignment Sıralamaları:
Burada Flutter ile karşılaştırma yapacağız.
Start: CrossAxisAlignment.start
CenterHorizontally: CrossAxisAlignment.center
End: CrossAxisAlignment.end
Şimdi akılda daha iyi kalması için tabloda görelim:
3.Row
Row itemleri yatay olarak görüntülememezi sağlar.
Not: Row ile kaydırma(scroll) işlemi yapamazsınız. Kaydırma(Scroll) işlemi için Listview kullanmayı düşünebilirsiniz.
3.1 Flutter Hizalamalar
Yukarıda da görüldüğü gibi “Main Axis” row elemanlarının yatayda, “Cross Axis” ise elemanların dikeyde hizalanmasını sağlar.
Gelin hep beraber yatay ve dikeyde hizalama türlerini görelim :
Main Axis Hizalamaları:
Yukarıdaki görselde gördüğümüz hizalama tiplerini teker teker açıklayalım:
Not: Row içerisine eklenen elamanlar sırayla: 1. Yeşil, 2. Mavi, 3. Turuncu
Not2: Varsayılan olarak ilk eklenen eleman en sol noktada, en son eklenen eleman ise en sağ noktadadır.
center: Row elemanlarının arasında boşluk bırakmaz. Sağ ve soldan eşit miktarda boşluk kalacak şekilde merkezi bir ayarlama yapılır.
start: Row elemanlarının arasında boşluk bırakmaz. Elemanları en sol noktadan sağa doğru sıralar.
end: Row elemanlarının arasında boşluk bırakmaz. Eklenen her yeni elemanı grubun en sağ noktasına yerlestirir.
spaceEvenly: En sol, en sağ ve elemanlar arası boşluklar eşit olacak şekilde ayarlama yapar.
spaceAround: spaceEvenly ile neredeyse aynıdır. Tek fark: spaceAround’da sağ ve soldaki boşluklar az, elemanlar arasındaki boşluklar daha fazladır.
spaceBetween: Sağ ve sol tarafta boşluk bırakmaz. Yalnızca elemanlar arasında eşit miktarda boşluk bırakır.
Cross Axis Hizalamaları:
center: Elemanları, merkezleri dikeyde orta noktaya gelecek şekilde ayarlar.
start: Dikeyde tüm elemanları üste yaslar.
end: Dikeyde tüm elemanları alta yaslar.
stretch: Elemanları dikeyde tüm alanı dolduracak şekilde ayarlar.
3.2 Jetpack Compose hizalamaları:
Horizontal Arrangement Hizalamaları:
Burada Flutter ile karşılaştırma yapacağız.
Start: MainAxisAlignment.start
End: MainAxisAlignment.end
Center: MainAxisAlignment.center
SpaceEvenly: MainAxisAlignment.spaceEvenly
SpaceBetween: MainAxisAlignment.spaceBetween
SpaceAround: MainAxisAlignment.spaceAround
Şimdi akılda daha iyi kalması için tabloda görelim:
Vertical Alignment Sıralamaları:
Burada Flutter ile karşılaştırma yapacağız.
Top: CrossAxisAlignment.start
CenterVertically: CrossAxisAlignment.center
Bottom: CrossAxisAlignment.end
Şimdi akılda daha iyi kalması için tabloda görelim:
4.Container(Flutter) — Box(Jetpack Compose)
Flutterda Container çok fazla parametreye sahipken Box yalnızca 4 parametreye sahiptir. Fakat Box’a verdiğimiz modifier parametresi ile Container’ın yaptığı tüm işi yapabiliyoruz.
Container’ın ve Box’ın aldığı parametrelere bakalım:
Aşağıdaki tabloda Container ile Box parametrelerinin karşılaştırmasını görebilirsiniz:
Not: Modifier ve propagateMinConstraints parametrelerinin containerda tam olarak karşılıkları bulunmamaktadır.
Şimdi Container’ın parametlerini açıklayarak Box ile karşılaştırmasını yapalım:
margin: Container’ın dışından bırakılan boşluktur. Box’ta şu şekilde margin verilir:
Modifier.padding(100.dp).height(300.dp).width(300.dp)Margin için padding değeri yükseklik ve genişlikten daha önce verilmelidir.
Container’da ise margin şu şekilde verilmektedir:
Container(margin: const EdgeInsets.all(10),)padding: Container’ın içinden bırakılan boşluktur. Box’ta şu şekilde padding verilir:
Modifier.height(300.dp).width(300.dp).padding(10.dp)Padding değeri yükseklik ve genişlikten daha sonra verilmelidir.
Container’da ise padding şu şekilde verilmektedir:
Container(padding: const EdgeInsets.all(10),)alignment: Container’da childın nereye hizalanacağını belirtir. Box’ta şu şekilde yapılır:
Box(contentAlignment = Alignment.BottomCenter)Container için alignment tipleri:
Box için alignment tipleri:
color: Box’ta şu şekilde arka plan rengi verilmektedir:
Box(modifier = Modifier.background(Color.Yellow))width &height: Box’a şu şekilde boyut vermekteyiz:
Box(modifier = Modifier.height(300.dp).width(300.dp))veya
Box(modifier = Modifier.size(width = 300.dp,height = 300.dp))decoration: Container’ın bu parametresi karşımıza bir obje olarak çıkmaktadır.
Genellikle BoxDecoration sınıfı kullanılır. İçerisinde çeşitli parametreler bulunmaktadır. Bu parametreler şunlardır :
Not: Eğer BoxDecoration kullanıyorsak Container’a color parametresini veremiyoruz. Renk verme işlemi BoxDecoration içerisinde yapılmaktadır.
Burada BoxDecoration’ın border, borderRadius ve shape parametrelerinin kullanımını göstereceğiz.
Container:
Box:
borderRadius: Köşelerden kırpmayı sağlar. Box’ta bu farklı şekilde karşımıza çıkmaktadır:
- clip: Bu kısım Box’ı kırpmayı sağlar. Eğer biz border eklersek clip yeterli olmayacaktır.
- border: Border’ı da aynı şekilde kırpmak istiyorsak Modifier.border(…) kullanmamız gerekmektedir.
Şimdi aşağıdaki görseli Container ve Box kullanarak oluşturalım:
Flutter Kodu:
Jetpack Compose Kodu:
Sonuç
Bu serinin ilk yazısında widget/component karşılaştırarak temel düzeyden başladık. Yazının ikinci serisinde farklı widget/conponent türleri göreceğiz.
Serimiz ilerledikçe daha ayrıntılı ve detaylı olarak karşılaştırmalar yapacağız.
Herkese keyifli Flutter’li haftalar dilerim :)
