Published in

Flutter Türkiye

8 min readJun 12, 2019

Flutter Nedir ? Devrim Etkisi Oluşturur Mu?

Aslında bu yazıyı çok önce kendi web sitemde yazmıştım. Medium’un çok daha fazla kişiye hitap edeceğini düşünerekten buraya taşıyorum. Genel anlamda mobil uygulama geliştirmenin sürecinden platformlar arasındaki farklardan ve Flutter’ın güzelliğinden bu yazımda bahsedeceğim. Keyifli okumalar…

Mobil Uygulama Geliştirme Süreci

Mobil uygulama geliştirme nispeten yeni bir çalışma alanıdır. 3. kaynak geliştiriciler, on yıldan daha kısa bir süredir mobil uygulamalar geliştirebildiler, bu yüzden bu alan sürekli gelişmektedir.

OEM SDKs’lar

Apple iOS SDK’sını 2008’de ve Google Android SDK’sını 2009’da piyasaya sürdü. Bu iki SDK, farklı dillere dayanıyordu: Sırasıyla Objective-C ve Java. Sonradan ise bu dillerin yerini iOS tarafında Swift, Android tarafında ise Kotlin aldı.

Yukarıdaki diagrama baktığımızda bir mobil uygulamada Widgetlar oluşur ve bu Widgetlar bir ekran tuvaline işlenir ve oluşan olaylar tekrardan bu widgetlara geri gönderilir. Diğer yandan cihazın kamera, ses ve diğer kısımlarına erişmek için platform ile konuşulur. Görülen bu basit mimaride iOS ve Android tarafında Widgetlar farklı olduğundan yazılım dili belli olmadığından ayrı ayrı uygulama geliştirmeniz gerekir.

Uygulama Geliştirme Yöntemleri

a- Webview ile oluşan frameworkler

İngilizce tabir ile belirtmek gerekirse ilk cross-platform olarak geliştirilen SDK ana yapı olarak JavaScript ve WebViews’a dayanıyordu. PhoneGap, Apache Cordova, Ionic ve diğerleri. Apple, iOS SDK’sını piyasaya sürmeden önce, üçüncü taraf geliştiricilerin iPhone için webapps oluşturmalarını teşvik etti ve böylece web teknolojilerini kullanarak platformlar arası uygulamalar oluşturmak kolaylaştı.

b- Reactive View ile oluşan frameworkler

Reaktif frameworkler ise ( React.js, React Native ) WebView aksine daha popüler olmaya başladılar sebebi ise WebViewlara göre performans olarak daha iyi olması ve Native olarak uygulama geliştirme imkanı sunması oldu. 2015 Yılında React Native, Facebook tarafında açık kaynak kodlu olarak dağıtılmaya başlaması ile bir çok geliştirici Javascript altyapısını bildikleri için hızlıca React Native tarafında uygulama geliştirmeye başladılar.

React Native bu sayede çok popüler oldu, olmayı da hak ediyor, ancak Javascript tabanlı olan React Native ‘in cihazdaki Widgetları oluşturabilmesi maalesef doğrudan olamıyor mutlaka arada köprü ( Bridge ) ile erişim sağlanması gerekiyor. Platformlardaki hizmetlerin aksine Widgetlara çok daha fazla erişim olur. Animasyonlar , sayfa geçişleri, ekrana dokunmalar vs. bu da arada köprüden dolayı performans düşmesine neden olmaktadır. Dolayısı ile farklı bir yapı olmadığı için geliştiriciler çoğunlukla React Native tercih etmiştir.

Flutter’ın Doğuşu

Gelelim Flutter’a. Flutter Google tarafından geliştirilen açık kaynaklı mobil uygulama geliştirme SDK’sıdır diyebiliriz. Flutter aslında Sky olarak başlıyor. Chrome’un V8 motor kodunu alıyorlar, web ile alakalı ne varsa silinip şimdiki Skia diye adlandırılan grafik motoru elde ediliyor. Sonrasında ürün karşılaştırmalarında performans olarak yüksek değerlere ulaştığı görülüyor ve SKY olarak da geliştiriliyor. Daha sonrasından bu isim 2013 yılında satın alınan jest ve mimik hareketlerini algılayan Flutter ile değiştiriliyor. Özetle SKY = FLUTTER oluyor.

Flutter yine Google tarafında geliştirilen Dart programlama dilini kullanmaktadır. Syntax olarak modern programlama dillerine çok benzeyen bir yapıya sahiptir. Flutter ‘ın kendi deyimiyle her şey eklenti ( Widget) ‘tır. Flutter React Native gibi reactive uygulamalar sunar her iki platforma da native uygulama çıktısı verir. Yani tek yazılım dili (Dart) ile iOS ve Android uygulama geliştirme imkanı sunar. React Native ‘in aksine arada bir köprü kullanmaz ve doğrudan Platform ile ilişki kurar dolayısı ile performans kaybı yaşamaz doğrudan işlemci üzerinde derlenir.

Flutter’ın bir JavaScript köprüsü gerektirmeden reaktif görünümler sunan tek mobil SDK olması, Flutter’ı ilginç ve denemeye değer hale getirmek için yeterli olmalı, ancak Flutter hakkında çok daha devrimci bir şey var ve bu da widget’lardır.

Bizimkisi bir Widget Hikayesi

1- Widget’ların görünümü ve hissi her şeyden önemlidir. Widget’lar çeşitli ekran boyutlarında da dahil olmak üzere iyi görünmelidir. Ayrıca doğal yani native uygulama hissi vermelidir.

2- Widget’lar hızlı bir şekilde ekrana sunulmalıdır.( Render edilmelidir.)

3- Modern uygulamalar için, Widget’lar genişletilebilir ve özelleştirilebilir olmalıdır. Geliştiriciler, yeni widget’lar ekleyebilmeli ve kendine göre özelleştirebilmelidir.

Flutter, native görünümlü, hızlı, kişiselleştirilebilir ve genişletilebilir Widget’lar içeren yeni bir mimariye sahiptir. Flutter OEM Widget’larını (veya DOM WebViews) kullanmıyor, kendi widget’larını oluşturuyor!

Yukarıdaki digrama bakıldığında Flutter’ın mimarisi tamamen diğer mimarilere göre farklılık gösteriyor. Flutter, Widgetlar ve renderlama olayını doğrudan uygulama içerisinden Platforma aktarıyor. Flutter’ın platform tarafında tüm ihtiyacı olan kısımlar cihazın ekranında oluşup sonradan Platform içinde camera, lokasyon , sensor gibi cihaz donanımlarına erişim sağlıyor.

Sol tarafta yer alan veriyi kodlama ve kod çözme yapan Dart programı (yeşil renkte) ve platform kodu (iOS veya Android için mavi renkte) arasında hala bir arabirim( köprü) var ancak bu bir JavaScript köprüsünden daha hızlı çalışıyor.

Burada şöyle bir sorun ortaya çıkıyor belki de bazılarınıza göre sorun da olmaya bilir. Widget’ları ve oluşturucuyu(render) uygulamaya taşımak, uygulamanın boyutunu etkiler. Android’de ki bir Flutter uygulamasının minimum boyutu bugün itibari ile yaklaşık 4.07 MB’tır.(Bakınız)Aslında bu, benzer araçlarla oluşturulan minimum uygulama boyutuna çok yakındır.

Uygulama Düzeni

Flutter’daki en büyük iyileştirmeden birisi ise , uygulama içerisine yerleştireceğiniz widgetların bir takım kurallara dayanarak boyutunu kontrol edebileceğiniz kolay bir yapıya sahip olmasıdır.

Geleneksel olarak, uygulama düzeni herhangi bir parçacığa (sanal olarak) uygulanabilecek geniş bir kural kümesi kullanır. Kurallar çoklu düzen yöntemleri uygular. İyi bilinen bir örnek olarak CSS mizanpajını ele alalım (Android ve iOS’taki düzen temelde benzer olsa da). CSS, HTML öğelerine (Widget’lara) uygulanan özelliklere (kurallara) sahiptir. CSS3 ise toplamda 375 özelliği sahiptir.

CSS (çoklu) kutu modelleri, yüzer elemanlar, tablolar, çoklu metin sütunları gibi bir dizi düzen modeli içerir. Flexbox ve grid gibi ek düzen modelleri daha sonra eklendiler çünkü geliştiriciler ve tasarımcılar mizanpaj üzerinde daha fazla kontrole ihtiyaç duyuyordu ve istedikleri şeyi elde etmek için tablolar ve saydam görüntüler kullanıyorlardı. Geleneksel düzende yeni düzen modelleri geliştirici tarafından eklenmezdi ve bu nedenle CSS’ye flexbox ve grid eklenerek tüm tarayıcılarda kullanılır hale getirildi.

Geleneksel mizanpajla ilgili bir başka problem, kuralların birbirleriyle etkileşebildiği (ve hatta çatıştığı) ve öğelere genellikle onlarca kural uygulanmış olmasıdır. Bu düzeni yavaşlatır daha da kötüsü, düzen performansı tipik olarak N-karesidir, böylece eleman sayısı arttıkça düzen daha da yavaşlar.

Flutter’ın şuan ki hali, Google’da Chrome tarayıcı ekibinin üyeleri tarafından gerçekleştirilen bir deneme olarak başladı. Geleneksel düzen modelini göz ardı edersek daha hızlı bir render yapılıp yapılamayacağını görmek istediler ve birkaç hafta sonra, önemli performans kazanımları elde ettiler.

Genel olarak baktığımızda;

Çoğu düzen nispeten basittir, örneğin: kayan bir sayfadaki metin, boyutu ve konumu yalnızca ekranın boyutuna bağlı olan sabit dikdörtgenler ve belki bazı tablolar, yüzer öğeler vb.
Çoğu düzen bir Widget’ın alt kümesidir ve bu alt ağaç genellikle bir düzen modelini kullanır, bu nedenle bu Widget’lar tarafından yalnızca çok az sayıda kuralın desteklenmesi gerekmektedir.

Peki ekip ne gördü?

Hepsini düzene koyduğumuzda düzenin önemli ölçüde basitleştirilebileceğini fark ettiler.
Herhangi bir pencere parçacığına uygulanabilecek büyük bir düzen kümesi yerine, her bir Widget kendi basit düzen modelini belirleyecektir.
Her bir Widget’ın göz önünde bulundurulması gereken daha küçük bir düzen kuralları kümesi olduğundan, düzen yoğun şekilde optimize edilebilir.
Düzeni daha da basitleştirmek için neredeyse her şeyi bir Widget’a çevirdik.

4. maddeye baktığımızda işte o yüzden Flutter’da neredeyse her şey Widget’lardan oluşuyor!

Aşağıda basit bir düzene sahip Flutter kodunu görüyorsunuz.

Bu kodun çıktısı ise aşağıdaki gibidir.

Kodları detaylı incelediğimizde is her şeyin widget olduğunu göreceğiz.

Yukarıdaki koda baktığımızda en üst kısımda Flutter’da widgetların görünebilmesi için Material paketini import ediyoruz. Aşağıya indiğimizde ise “main” fonksiyonu içinde runApp fonksiyonu ile bir aşağıda oluşturduğumuz App class’ı ile Stateless Widget olarak çalışmasını söylüyoruz.

App class’ını incelediğimizde ise uygulamamız Google standarttı olan Material Dizayn’ın Flutter’daki karşılığını olan uygulamanın ana gövdesi MaterialApp Widget olarak kodlayacağımızı belirtiyoruz. MaterailApp Widget’ı her iki platformda da size Material Dizayn sunar ama sadece iOS’a yönelik bir App geliştirecekseniz CupertinoApp Widget’ını kullanabilirsiniz.

Dikkat ederseniz tüm Widgetlar bir üst Widget’ın çocuğu(child) oluyor yani iç içe bir yapı mevcut bir önceki widget bir sonraki Widget’ı doğruyor diyebiliriz. MaterialApp’ın ise constructer metodunda home parametresi ile uygulamamızda ilk olarak hangi Widget’ı göstereceğimizi belirtiyoruz.

Biz uygulamamızda güzel bir sayfa görünümü olsun diye ( hemen hemen tüm uygulamalar bu Widgetla başlıyor.) Scaffold Widget’ını kullandık aslında bu Widget’ı çok kullanacağız Scaffold bize bir sayfa yapısı oluşturur bu sayfa yapısı Apbar ( üst kısım header) , body ve footer kısımlarını bize basit bir şekilde oluşturur.

Bu yazımda tüm widgetlara giremeyeceğim çünkü onlarca Widget var ileriki yazılarımızda widgetları ayrı ayrı inceleyeceğiz. Scaffold ile ilgili dokümana buradan ulaşabilirsiniz.

Scaffold Widget’ı ile sayfamızı oluşturduktan sonra ise body kısmımızda kodumuzu yazıyoruz body kısmı appbar ile tabbar kısmının arasında kalan kısım oluyor ve genelde uygulamamızın içinde göstermek istediğimiz kısımları burada gösteriyoruz. Center Widget’ı ile yazdığımızı yazıyı ortaladık Center ‘ widget’ın alt elemanı olarak Text widget’ını kullanıp “Merhaba Dünya” yazımızı ekrana yazdırdık. Gördüğünüz gibi hepsi basit bir yapı ile karışımıza çıkıyor.

Flutter ile birçok güzel uygulama yapabilirsiniz. Kendi widgetlarınızı oluşturabilirsiniz. Bazı Flutter uygulamalarını aşağıda paylaşacağım. Ayrıca bazı kaynak linklerini de paylaşacağım.

Özet olarak , Flutter hakkında neler yeni ve neden sevdim?

Eğer birisi size Flutter hakkında sorarsa, şimdi bunları nasıl yanıtlayacağınızın cevabını verelim.

JavaScript köprüsü olmadan reaktif görünüm sağlar.
Hızlı, pürüzsüz ve öngörülebilir; kod yerel (ARM) ile derlenir.
Geliştiriciler, Widget’lar ve düzen üzerinde tam kontrole sahiptir.
Diğerlerinin aksine güzel, özelleştirilebilir Widget’lar ile birlikte gelir.
Harika geliştirici araçlarına sahiptir ve Hot reloading özelliği ile her seferinde derlemeden (build etmeden) hızlıca yapılan değişikliği gösterir.
Daha fazla performans, daha fazla uyumluluk sağladığı gibi kodlama yaparken adeta Lego yapar gibi size eğlenceli bir programlama sunar.

Bir sonraki yazımızda görüşmek üzere! Sorularınızı yorum kısmına yazabilirsiniz. Bir sonraki yazımız “Scaffold Widget” hakkında olacaktır.

Kaynaklar

Flutter videos from Google I/O 2018
DartConf 2018 videosunu izleyin, 23–24 ocak 2018 Los Angeles, California
Flutter tanıtım videosu.

Websiteleri:

Videolar:

Uygulamalar:

Hamilton: An American Musical
Flutter Galeri: for Android, on Github (examples/flutter_gallery uygulaması içindedir.)
Posse Galeri