Yeni bir teknolojiye girişilirken Hello World adlı proje oluşturulmadan olmaz artık, adettendir. Bu makalede bir teknolojinin en basit anlamda hiyerarşisini ve yapısını anlamak için genellikle basit bir proje üzerinden gidilerek proje üretilir bizde bu ilk proje oluşturmada nelerin oluşturulduğunu ve oluşturulan bu dosyaların ne işe yaradıklarına gözatacağız, son olarak da nasıl cihaza uygulamayı yükleyeceğimizi ve debug edeceğimizi göreceğiz.
Flutter Projesi Nasıl Oluşturulur?
Seri olarak başlattığımız Flutter makalelerin üçüncüsü ile karşınızdayız daha önceki ilk makalemiz olan Flutter Nedir ve Neden Flutter? adlı makalede Flutter’ın ne olduğunu detaylı olarak anlatmaya çalıştık ve neden Flutter sorularınada makale içerisinde geniş yer verdik. Sonrasında Flutter’ın cross mobil geliştirmeleri için tercih edilebilir bir araç olduğuna karar verdiğimiz için Flutter Ortamı Nasıl Kurulur ve Neler Gerekiyor? makalesinde de Flutter ortamının nasıl kurulduğunu ve neler gerektiğini bu gereklilikleri nasıl tedarik edip ayağa kaldıracağımızı adım adım detaylandırdık. Şimdi ise Flutter ortamımız üzerinden yeni bir flutter projesi nasıl oluşturulur bunu göreceğiz.
Yeni bir flutter projesi oluşturmayı hem konsoldan hem de Visual Studio Code üzerinden göreceğiz. Öncelikle Visual Studio Code üzerinden görelim.
Visual Studio Code Üzerinden Flutter Projesi Oluşturma
Flutter Ortamı Nasıl Kurulur ve Neler Gerekiyor? adlı makalede Visual Studio Code uygulamasını ve gerekli eklentileri kurulumunu göstermiştik bu uygulama ve eklentilere şuan ihtiyaç duyuyoruz ve bunlar üzerinden işlemlerimizi gerçekleştireceğiz eğer bu adım ile devam edecekseniz kurulumu eksiksiz yaptığınıza emin olunuz.
Visual Studio Code ve eklentileri kurulumunda bir sıkıntı yaşanmadıysa Visual Studio Code üzerinde Ctrl + Shift + P
tuş kombinasyonları ile Command Palette...
penceresini açılmasını sağlıyoruz ardından Flutter: New Project
seçeneğine tıklıyoruz. Ardından proje adını girmemiz gereken giriş penceresi açılıyor hello_world
olarak girip Enter diyoruz son olarak projenin oluşturulacağı dizini seçmenizi istiyor sizin girdiğiniz proje adına özel klasör oluşturuyor sizin projeye özel klasör açmanıza gerek yok.
Altta şimdiye kadarki adımlarımızın bir animasyonu yer alıyor. Bu animasyon üzerindeki adımları gerçekleştirerek artık Visual Studio Code üzerinden bir hello_world projesi oluşturduk.
Konsol Üzerinden Flutter Projesi Oluşturma
Konsol üzerinden yeni bir flutter projesi oluşturmak için alttaki gibi create
komutunu kullanacağız. Altta hello_world adında bir flutter projesi oluşturacağımızı belirttik. Bu komutu konsol ekranında hangi dizinde çalıştırırsanız proje o dizine belirttiğiniz proje adında bir klasör oluşturulacak ve proje ile ilgili dosyalar bu klasör altında yer alacaktır.
Create komutuna proje adı olarak bir parametre vererek proje oluşturma işlemini basitçe gerçekleştirdik. Dİğer komutlara gözatmak isterseniz flutter -h
komutunu kullanabilirsiniz. Altta flutter -h komutunun çıktısını bulabilirsiniz.
Eğer belli bir komuta ait detaylara ulaşmak isterseniz -h parametresini eklemesinizi örnek olarak flutter create -h komutunu kullanarak create komutu ile ilgili detaylara ulaşabilirsiniz örnek kullanım ve çıktısına altta ulaşabilirsiniz.
Visual Studio Code ve Konsol üzerinden yeni bir Flutter projesinin nasıl oluşturulduğunu gördük şimdi ise hello_world projesini inceleyerek nasıl çalıştığına ve neyin ne işe yaradığına bir gözatalım.
Flutter uygulaması ilk çalıştığında lib > main.dart adlı dosya içerisindeki main metodunu çalıştırır bu main metodu içerisindeki runApp metoduna ise Flutter uygulamamızın render edilmesini istediğimiz Widget’ı parametre olarak geçiyoruz. Bu arada yeri gelmişken Flutter sitesinde gördüğüm kadarıyla “Everything in Flutter is a Widget” sözü yer almaktadır yani flutter’da her şey birer widget’dır sözü yer almaktadır tabi dart dilinin kazandırdığınız interface, class, enum v.b. oop temel objelerini saymaz isek.
Neyse bu kısa bilgi sonrasında Flutter çalışma mekanizmasına dönersek. runApp metodu içerisinde MyApp adındaki root widget’ımız yer alıyor ve her oluşturduğumuz widget StatelessWidget ve StatefullWidget için build adında arayüzün asıl render edildiği bir metod yer alıyor bu metod içerisinde MaterialApp denilen bir widget yardımı ile uygulama ana arayüzünün temeli atılmış oluyor proje başlangıcı için MaterialApp kullanılması gerekmektedir. MaterialApp widget’ı için kullanılan bazı özellikle ve ne işe yaradıklarına ait tabloya bir gözatalım.
MaterialApp Özelliği | Açıklama |
---|---|
title | Uygulama başlığıdır. |
theme | Uygulamanın çeşitli yerlerde kullandığı renklerden istediğiniz herhangi bir rengi, yazı boyutu ve diğer bazı stil ile alakalı düzenlemeleri global olarak tek bir yerden yönetebilirsiniz. |
home | Uygulamanın ilk açılışında varsayılan olarak çıkacağı ana ekranın ayarlanacağı özelliktir. |
debugShowCheckedModeBanner | Her oluşturduğunuz yeni flutter projesinde Sağ üstte Debug adında bir etiket yer alır bu etiketi kaldırmak veya göstermek için kullanabileceğiniz özelliktir. |
routes | Ekranlar arası geçişi yapmak için Flutter tek bir yöntem yok isterseniz geçiş yapacağınız ekranları routes adındaki özellikle key-value şeklinde ayarlar ve key değerini kullanarak Navigator Widget’ı yardımı ile ekranlar arası geçişi sağlayabilirsiniz Navigator çok kapsamlı bir konu olduğundan bunun gibi yüzeysel bıraktığım tüm konular ayrı birer makale konusudur o yüzden tek tek tüm widget’lar ve işe yarar paketler hakkında makale serisinin sonraki makalelerinde tek tek detaylı olarak ele alınacaktır. |
MaterialApp widget’ında üstteki özellikler dışında bir çok özellik yer almaktadır ama flutter giriş seviyesindeki makaleyi daha fazla uzatmamak adına en sık kullanacağınız ve göreceğiniz özellikler için yabancılık yaşamamanız adına kısa açıklamaları yapılmıştır.
Cihaza Yükleme ve Debug
Peki uygulamayı geliştirdik cihazda nasıl test edeceğiz? Çok kolay cihaza yüklemek için eğer visual studio code
kullanıyorsanız ve Flutter
eklentiside varsa F5
tuşu ile kolayca cihaza yükleme ve debug etme işlemini başlatabilirsiniz. Konsol ekranından cihaza yüklemek için sadece flutter run
komutunu çalıştırmanız gerekmektedir.
Visual Studio Code ve Konsol dışında genelde tutorial’larda tavsiye edilen IDE’lerden biri Android Studio’dur biliyorsunuz ki Java yada Kotlin kullanılarak native olarak Android Studio üzerinden Android uygulama geliştirmesi yapabiliyorduk. Artık gelen güçlü Flutter desteği ile Android Studio üzerinden de çeşiti wizard’lar yardımıyla kolayca proje oluşturabilir yada proje oluşturduktan sonra yardımcı bazı araçlar sayesinde uygulamayı geliştirebilirsiniz.
Benim favorim performans gerekçesiyle Visual Studio Code’dur o yüzden kişisel olarak Android Studio’yu kullanmadığımdan bu konuda bir anlatım yoluna girmeyeceğim sadece alternatif bir Flutter geliştirme ortamının olduğundan haberdar olabilmeniz için yazdım.
📚 Flutter Projesi Nasıl Oluşturulur Öncesi
Makalede kullanılan örneğe ve Flutter ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.
✍ Flutter Projesi Nasıl Oluşturulur makalesi için lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Flutter Projesi Nasıl Oluşturulur sosyal medya kanallarından paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.