Flutter Nedir? Devrim Etkisi Oluştur mu?

Evet. eğer  bu konuda Türkçe kaynak aradığın için burada olduğunu düşünüyorum. 1 yıldan uzun zamandır oluşan bilgi birikimi mi sana aktarıyor olacağım!  Soruların olursa yorum bölümüne yazmayı unutma!

 

Mobil Uygulama Geliştirme Süreci

Mobil uygulama geliştirme nispeten yeni bir çalışma alanıdır.3rd parti 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 ANDROİD tarafında widgetlar farklı olduğundan yazılım dili belli olmadığından ayrı ayrı uygulama geliştirmeniz gerekir.

Uygulama Geliştirme Çeşitliliğini inceleyelim

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ı.

Reactive View ile oluşan frameworkler

Reactif frameworkler ise ( Reacjs, 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ından sonra bir çok geliştirici Javascript altyapısını bildikleri için hızlıca React Native geçiş yaptı çünkü native uygulamaya yakın performans alınıyordu.

React Native Uygulaması Yapısı

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

ve Flutter Doğdu.

Gelelim Flutter’a. Flutter Google tarafından geliştirilen açık kaynaklı mobil uygulama geliştirme SDK’sıdır diyebiliriz. Arıştırmalarına göre 2013 yılında Google tarafında Google Glass için 40M$ bedel ile satın alınan flutter o zamanlar Jest ve Mimik tanıma firması olarak Google’a katılmıştır akabinde yıllar için  bu ekip Flutter’ı geliştirerek bugünki cross-platform native uygulama geliştirme yapısına dönüşmüştür.

Flutter 2013 yılında satın alındı.

Flutter yine google tarafında geliştirilen DART programlama dilini kullanmaktadır. Syntax olarak Javascript’e ç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’in bir JavaScript köprüsü gerektirmeden reaktif görünümler sunan tek mobil SDK olması, Flutter’i 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 render olmalıdır.

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ştrebilmelidir.

 

 

 

 

 

 

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.!

Flutter diagram

Yukarıdaki digrama bakıldığından Flutter’ın mimarisi tamamen diğer mimarilere göre farklılık gösteriyor. Flutter Widgetlero ve Renderı olayını doğrudan uygulama içerisinden Platforma aktarıyor. Flutter’in 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 yerel 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 belkide bazılarınıza göre sorun da olmaya bilir. Widget’ları ve oluşturucuyu(render) uygulamaya taşımak, uygulamanın boyutunu ekiler. Android’deki bir Flutter uygulamasının minimum boyutu bugün itibari ile yaklaşık 4.28MB’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 şuanki 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;

  1. Çoğu mizanpaj 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.
  2. Ç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ü?

  1. Hepsini düzene koyduğumuzda düzenin önemli ölçüde basitleştirilebileceğini fark ettik
  2. 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.
  3. 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.
  4. Düzeni daha da basitleştirmek için neredeyse her şeyi bir widget’e ç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.
import 'package:flutter/material.dart';


void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:  Scaffold(
      body: Center(
      child: Text("Merhaba Dünya"),
      ),
      ),
    );
  }
}

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

Kodları detaylı inclediğimizde ise 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 standartı olan Material Dizayn’ın Flutter’daki karşılığını olan uygulamanın ana gövdesi MaterialApp widget olarak koldyacağımızı belirtiyoruz. MaterailApp widget’ı her iki platformada 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 methodunda home parametresi ile uygulamamızda ilk olarak hangi WidgetI 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ı apbar 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.

  1. JavaScript köprüsü olmadan reaktif görünüm sağlar.
  2. Hızlı, pürüzsüz ve öngörülebilir; kod yerel (ARM) ile derlenir.
  3. Geliştiriciler, widget’lar ve düzen üzerinde tam kontrole sahiptir.
  4. Diğerlerinin aksine güzel, özelleştirilebilir widget’lar ile birlikte gelir.
  5. Harika geliştirici araçlarına sahiptir ve Hotreloading özelliği ile build etmeden hızlıca yapılan değişikliği gösterir.
  6. Daha fazla performans, daha fazla uyumluluk sağladığı gibi kodlama yaparken adede 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.

Bir cevap yazın

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