Bu yazımızda Flutter'dan bahsetmeye ve onu daha çok tanımaya devam edeceğiz. Öncelikle diğer yazılarımızdaki Widget yapısını tekrar hatırlamamız gerekiyor. En basit anlamda Widgetlarımız; 

  • Diğer dillerdeki Component kavramına karşılık gelen yapılardır. 
  • İstediğimiz içerikleri doğru tasarımlarla meydana getirmemize yardımcı olur. 
  • "Widget Tree" olarak bilinen kesin ve takip edilmesi zorunlu bir hiyerarşisi vardır. Bu hiyerarşiye göre her widget birbirini sarar ya da kapsar. Bu durumu takip edip ağacın en verimli şekilde çizdirilmesini sağlamakta geliştireciye düşer. 
  • Widgetlar state durumuna göre Stateful ya da Stateless şeklinde iki durumda da kullanılabilir. 
  • Ekrana çizdirilen her yapı, kısaca Flutter'daki her şey bir widgettır. 

Gerekli hatırlatmaları yaptıktan sonra bugün en önemli olan widgetlarımızı incelemeye başlayacağız. Ve widgetlar arasında en öneml sayılanlardan biriyle yazımıza başlayabiliriz. 

MATERIAL APP 

Material App uygulamanın ana ve en kapsayıcı olan alanıdır. Material tarzdaki geliştirmelerimiz için bize tüm widgetların dönüşünü veren en temek widgetlardan biridir. Koddaki durumuna bakacak olursak;

Flutter'ın açılış kodu olan sayaç tasarımından örnek alabiliriz. Burada build edilecek Widget sınıfımız içerisinde return olarak bir Material App tarzı verilmiş. Çünkü Material App o kadar çok özellikte dönüş sağlayabiliyor ki sayfamızı tüm özellikleriyle kendisi içerisinde yapılandırıp yazabiliyoruz. 

Bir üst satırda görünen runApp metodu aslında dolaylı yolları ortadan kaldırırsak bizim Material App'imizi return etmiş desek yalan söylemiş olmalıyız. Bu yüzden şunu söyleyebiliriz ki her runApp içerisinde geri dönen bir Material App widgetı vardır ve bu widgetta birazdan açıklayacağımız gibi bir çok widgetı sarmalar. 

Material App'in tek görevi çatısı altında gerekli olan tüm widgetları toplamak değildir elbette. İlerleyen tasarımlarda widget ağacı ve uygulamaların sayfaları arasındaki geçişi sağlıklı bir şekilde sağlamak için hepimize tanıdık gelen 'routes' kavramında yararlanırız. Routes yapısında ise çağrılan widget Material App olmaktadır. 

Peki Material App'in içerisinde neler var? Birazda onlara bakalım. 

TITLE

Material App metodunun içerisine girip gerekli parantezleri açtığımızda karşımıza öncelikle Title çıkar. Tam olarak anlamını karşılayan Title widgetı uygulamanın adını içinde barındıran ve string bir değer alan yapıdır. 

THEME 

Adında çok güzel anlaşıldığı üzere uygulamamızın temasını burada seçeriz. Dark, Light ya da diğer seçeneklerin hepsini burada görebilirsiniz. 

HOME

Kullanıcı olan kişini sayfada gördüğü her özelliğin çizdirilmesini tetikleyen widgettır. Kısacası Material App'in can damarıdır diyebiliriz. Ve bu home yapısının içerisinde tüm tetikleri gerçekleştiren tanıdık bir widget daha bulunur. Scaffold!

COLOR

Oluşturduğumuz sistemin arayüzünde uygulama için kullanacağımız birincil rengi belirlediğimiz kısımdır. Renklerin rengi diyebiliriz sanırım. 

INITIALROUTE

Bu widgetın içerisinde uygulamaya girdiğimizde karşımıza gelmesini istediğimiz ilk sayfanın route bilgisini veririz. Bizim için anasayfanın adresini taşır. 

ROUTES 

Tasarlanan diğer sayfaların yollarını tanımladığımız kısımdır. Her sayfa doğru ve hızlı bir erişim için adlandırılır ve bu özelliğe sahip sayfalara Named sayafalar denir.

LOCALE

Uygulamanın başlangıç dili ve ülke koduna ait bilgileri barındırır. Boş bırakılırsa da sistemin localini kullanır. 

Burada Material App'le ilgili en genel özelliklere yer verdik. Araştırdıkça ve kullanma ihtiyacımıza göre bunların çok daha fazla olduğu ve aslında Flutter'ın gerçekten her ihtiyacı düşünerek tasarlanmış olduğunu fark edeceksiniz. 

Home widgetının Material App'in en önemli tetikleyicilerinden olduğunu yukarıda belirttik. Ve home için işin büyüğünü yapan Scaffold'tan şimdi bahsetmeye başlayabiliriz. Fark ettiyseniz sürekli bir yapının içerisine giriyoruz ve sürekli bir hiyerarşi içerisinde dallanmaya devam ediyoruz. 

Hemen basit bir örnekle Scaffol'un yapısına bir göz atıp içeriklerini açıklamaya başlayalım. 

Aslında bu örnek uygulamanın üst kısmına basit Welcome yazan ve basit bir ekranı karşımızda görmemizi sağlayan bir ekran. Ama içerisindeki tüm işleri emir-komuta zincirine göre gerçekleştiren Scaffold yapısının içerisinde olmazsa bu istenen basit yapılar dahi çizdirilemezdi. Scaffold Material App'ten aldığı yönlendirme ve başlangıç komutuyla ki başlangıç olayını da runApp metodu tetikler, home widgetı içerisinde çizdirmek istediğimiz tüm widgetları oluşturur. Home eğer bir kağıtsa, Scaffold üzerine çizimler yaptığımız kalemdir diyebiliriz. Eğer bu home yapısı bu durumda Scaffold tarafından kurulmamış olsaydı ekranda göreceğimiz şey sadece bir siyah ekran olacaktı. 

Scaffold'un içerisinde gördüğümüz özelliklerden (özellik diyorum ama önceden de söylediğimiz gibi aslında hepsi bir widget) biraz bahsedelim. 

APPBAR

Uygulamamızın üstünde yer alan header kısmıdır. Genellikle temanın renginde düzenlenmiş olur. 

BODY 

Sayfanın göve kısmıyla alakalı yapmak istediklerimizi burada gerçekleştiririz. Yukarıdaki basit örnekte sadece gövde kısmının ortası alınarak Hello World yazılmıştır. 

BACKGROUND COLOR

appBar ve body yapısının arka kısımdaki rengini belirler. 

DRAWER 

Açılabilir bir menü yapısıdır. Mobil uygulamalarda sıkça karşılaşılan bir yapı olmasının yanında içerisinde liste, resim gibi çok çeşitli componentleri bulundurduğu için aslında elle baştan yapılması çok uzun sürer. Ama Flutter bunu bize hazır olarak sunar. 

BOTTOM NAVIGATION BAR 

Ekranın alt kısmında bir menü oluşturmaya yardımcı olur. Bize kolay geçişler sağlar. 

FLOATING ACTION BUTTON 

Ekranda yer değiştirebilen bir buton oluşturmamıza yarar. Location özelliği ile nereye gitmesi gerektiğini söyleyebiliriz. 

   

Bizim açıkladıklarımızdan daha çok alan içersede yukarıda bahsettiğimiz body, appbar, bottom navigation bar (home-capture olan kısım) özelliklerini burada görebilirsiniz.