Flutter mobil oyun geliştiricilerin veya bu alana girmek isteyen insanların ilgisini çeken araçlardan biri. Google’ın geliştirdiği bu araç ile Android ve iOS işletim sistemleri için yapacağınız mobil uygulamaların arayüzlerini hazırlayabilirsiniz. Bu yazımızda bu alana yeni girecek birinin anlayacağı şekilde sade ve net bir şekilde Flutter’ı anlattık.
Flutter nedir?
Flutter, 2017 yılında Google tarafından çıkarılan ücretsiz ve açık kaynak UI framework’tür. Kavramlar biraz karmaşık geldiyse aşağıdaki başlıklara tıklayarak detayları görebilirsiniz. Bu tarz bir araç ile çalışmaya başlayacaksanız bunlar ve bunlara benzer kavramları sıklıkla duyacaksınız.
UI’ın açılımı User Inferface, yani kullanıcı arayüzüdür. Bir uygulamaya, bir oyuna girdiğinizde karşınıza çıkan açılış ekranındaki görseller UI ürünüdür. Tasarımcılar, kullanıcının sorunsuz bir deneyim yaşaması için görsel düzenlemeler yaparlar ve bu düzenlemeler UI kapsamına girer.
Framework, kullanıcıların bir şeyler üretmesini, tasarlamasını sağlayan uygulamalara verilen genel isimdir.
Flutter, Android ve iOS fark etmeksizin arayüz oluşturmaya yarar. Butonlar ve layout’lar yardımıyla arayüz hazırlanır ve Flutter’ın kodlama dili olan Dart ile kodlanır. Bu araç temel olarak araçlar üzerinden ilerler.
Flutter ne demek?
Flutter çırpınmak, kanat çırpmak gibi anlamlara geliyor.
Flutter hangi sorunu çözüyor?
Mobil uygulama geliştirirken geliştiricilerin yaşadığı sorunlardan biri de ekran boyutları arasındaki farklar. Android cihazlardaki ekran boyutu çeşitliliği uygulamalarını stabil olmaları üzerindeki büyük engellerden biri. Yani bir ekranda sorunsuz çalışan uygulama, farklı bir marka telefonda problemli olabiliyor. Flutter temelde bu sorunun çözümü üzerine iyi seçenekler sunuyor.
Flutter tek bir kod dosyası ile tüm bu boyut farklılıklarını düzenlemenizi sağlıyor. Hem birden fazla kod dosyası ile uğraşmıyor hem de bu alandaki yenilikleri ve çalışma prensiplerini öğrenmek durumunda kalmıyorsunuz.
iOS avantajı
iOS’ta ise ekran boyutu farklılıkları nedeniyle doğan sorunlar epey az diyebiliriz. Çünkü Apple, o taraftaki tek marka olduğu için belirli ekran boyutları ile hareket ediyor ve iOS’a uygulama yaparken o boyutları uymak yetiyor. Android’te ise ekran boyutları markadan markaya değişiklik gösterebiliyor.
Flutter vs. React Native
Flutter’ın en büyük özelliği hemen hemen tüm platformlar için aynı kod tabanını kullanabilmek. React Native’den de tam olarak bu yönüyle ayrılıyor. Bu konu özelinde thedroidsonroids.com’un paylaştığı tablonun bir kısmını hemen aşağı ekledik.
| Flutter | React Native | |
| Nedir | Bir kod havuzunda mobil, web ve masaüstü uygulamalar yapılmasını sağlayan UI toolkit’i. | React kullanarak native uygulamalar yapılmasını sağlayan bir framework. |
| Çıkış tarihi | 2017 | 2015 |
| Yapımcısı | ||
| Programlama Dili | Dart | JavaScript |
| UI | Yerel bileşenleri de ekleyerek her platformda doğal (o platformda sırıtmayan) bir görüntüsü olur ve bu alanda sorun çıkarmaz. Belirli tasarı dillerine uygun iki araç takımı var: Material Design widgets ve iOS’u taklit eden Cupertino widgets. | Platformlar ve işletim sistemleri arasında aynı görüntüyü elde etmek için üçüncü parti kitaplıklar kullanmalısınız. Kullandığınız bileşenlerin OS UI güncellemelerini yapacaklarının güvencesini vermesi gerekir. Pek olmaz ama uygulamanın arayüzü bozulabilir. |
| Kod paylaşımı | Uygulamaları beş işletim sistemine göre aynı kod tabanı ile kullanılabilir. Bunlar: iOS, Android, Windows, macOS ve Linux. Firefox, Chrome, Safari ve Edge gibi tarayıcılarda da sorun yaşanmaz. | iOS ve Android için aynı kod tabanının kullanılmasını sağlayan üçüncü parti yazılımlar ekleyebilirsiniz. |
| Rekabet Avantajı | – Zengin widget’lar ile güzel görünüm – Hızla büyüyen bir topluluk ve popülerlik – Geliştirici ekibin harika desteğiyle üst düzey dokumantasyon – Bir kod tabanı ile farklı platformlara ürünler üretme | – Stabillik (5 yıldır pazarda) – React Native kullanan birçok başarılı marka – Öğrenmesi kolay bir teknoloji – Hızlı ve kolay geliştirme sağlayan birçok eğitim içeriği ve kitaplık |
| Bu teknoloji ile yapılmış en iyi uygulamalar | Alibaba’nın Xianyu uygulaması, Hamiton, Google Ads, Philips Hue, My BMW, Makani. | Instagram, Facebook, Facebook Ads, Skype, Tesla |
Flutter Sistem Gereksinimleri
Flutter sistem gereksinimleri yönünden sorun çıkarmayan framework’lerden biri. Aşağıdaki özelliklere veya daha iyi bir cihazınız varsa Flutter’ı sorunsuz kullanabilirsiniz.
- İşletim Sistemi: Windows 7 SP1 veya üst bir versiyon
- Boş alan: 1.64 GB
Dart Flutter nedir?
Dart, Flutter’da herhangi bir arayüzü tasarlarken kullanmanız gereken programlama dilidir ve mobil ve web uygulamalar geliştirilirken kullanılabiliyor.
Dart, 2011 yılında yine Google tarafından oluşturuldu ve son dönemde önemli geliştirmeler aldı. Dart’ın odaklandığı alan ise front-end development, yani işin arka planında nesneleri ve işlevlerini birbirine bağlamak.
Flutter Editörleri
Flutter indirmek yerine online olarak da kullanabilirsiniz. Bunun için DartPad’i kullanabilirsiniz. Ekranın sol yüzünde yazılan kodları, sağ yüzünde ise o kodun görselleştirilmiş halini, nasıl çalıştığını görebilirsiniz.
DartPad’e girdiğinizde sağ üstte yer alan Sample butonuna tıkladığınızda Flutter’da yapılmış araçları da göreceksiniz. Örneğin SunFlower’ı seçtiğinizde ekranda birçok tohum yer alıyor. Aşağıdaki bardan sayıyı ayarlayarak ekrandaki tohumların sayısını değiştirebiliyorsunuz. Kodları inceleyerek başlayabilirsiniz.
Flutter ile hangi işletim sistemine uygun?
İster iOS ister Android olsun Flutter’ı iki işletim sistemi için arayüz geliştirirken kullanabilirsiniz. Aracı ise yukarıda gördüğünüz gibi online olarak kullanabilir veya Windows / Mac fark etmeksizin cihazınıza indirebilirsiniz. Online olarak kullanacaksanız DartPad veya CodePen gibi sitelerde üyelik açmanız gerekiyor. Bu sayede çalışmalarınızı depolayabilirsiniz. Aksi durumda her seferinde boş bir ekran ile karşılaşacaksınız.
Flutter provider nedir?
Provider, Flutter’da araç / widget yaparken kullanılır. Yeni widget alt sınıfları / subclasses oluşturabilir ve tüm nesneleri Flutter’ın bir parçasıymış gibi kullanmanıza olanak sağlar. Provider ile kodunuzu daha kolay test edebilir ve saklayabilirsiniz. Flutter’ın tamamen widget’lar üzerinden çalıştığını göz önüne aldığımızda Provider’ın ne kadar önemli olduğunu bir kez daha anlayabiliriz.
Flutter Packages
Flutter’da farklı paketler de kullanabilirsiniz. Yani farklı bir araç için hazırlanmış olsa da birçok paketi, Flutter’a yüklemenize izin verir.
Peki burada eklenti / plugin ile paket / package farkı nedir? Eklentiler aslında birer paket türüdür, yani paketler eklentileri kapsar. Her eklenti bir paket iken her paket bir eklenti değildir. Eklentiler, pubspec dosyaları içeren Dart paketleridir.
Flutter Dersleri
Günümüzde online dersler ile Flutter dersleri almak mümkün. Özellikle YouTube üzerinden bu framework özelinde eğitim videolarına ulaşabilirsiniz. Aşağıda bu konudaki listemizi görebilirsiniz. Ücretsiz kaynakları öne çıkardık. Dilerseniz Udemy, Coursera, Skillshare gibi eğitim platformlarından da konuyla ilgili dersleri araştırabilirsiniz.1
KodPlanet
KodPlanet adından da anlaşılacağı üzere kodlama üzerine öğretici içerikler paylaşan bir YouTube kanalı. Flutter özelinde sıfırdan, kodlamaya biraz aşina olanların epey işine yarayabilecek bir serisi bulunuyor.
Selman Kahya
Programlama araçlarını anlattığı canlı yayınlarıyla da bilinen Selman Kahya, o konseptini Flutter için de yapmış. 5 saat boyunca hem soru cevap hem de Dart’ın temellerine göz atabilirsiniz. Giriş aşamasıyla ilgili biraz sahibi olduktan sonra pekiştirmek ve eş zamanlı denemek için bu videoyu öneriririz.
Engin Demiroğ
Tıpkı Selman Kahya gibi Engin Demiroğ’un da başından sonuna Flutter’ı anlattığı ve örnek projeler yaptığı bir videosu var. İnteraktif bir şekilde ilerleyen bu videoda, o yayın esnasında sorulan sorular ile kendinizi geliştirebilir, projeyi örnek alabilirsiniz.
OA Başaran
Flutter’ın tek bir kod havuzunda birçok şeyi yapabilmemize vurgu yapan OA Başaran’ın yaklaşık 100 videodan oluşan derslerine de göz atabilirsiniz.
