Flutter Hello World Projesi Nasıl Oluşturulur?

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 Hello World Projesi Nasıl Oluşturulur?

Flutter Hello World Projesi

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.

Flutter Yeni Proje Visual Studio Code

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.

flutter create hello_world

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.

flutter -h
Manage your Flutter app development.
Common commands:
flutter create <output directory>
Create a new Flutter project in the specified directory.
flutter run [options]
Run your Flutter application on an attached device or in an emulator.
Usage: flutter <command> [arguments]
Global options:
-h, --help                  Print this usage information.
-v, --verbose               Noisy logging, including all shell commands executed.
If used with --help, shows hidden options.
-d, --device-id             Target device id or name (prefixes allowed).
--version               Reports the version of this tool.
--suppress-analytics    Suppress analytics reporting when this command runs.
--bug-report            Captures a bug report file to submit to the Flutter team.
Contains local paths, device identifiers, and log snippets.
--packages              Path to your “.packages” file.
(required, since the current directory does not contain a “.packages” file)
Available commands:

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.

 flutter create -h
Create a new Flutter project.If run on a project that already exists, this will repair the project, recreating any files that are missing.Usage: flutter create <output directory>
-h, --help                         Print this usage information.
--[no-]pub                       Whether to run “flutter packages get” after the project has been created.(defaults to on)--[no-]offline                 When “flutter packages get” is run by the create command, this indicates whether to run it in offline mode or not. In offline mode, it will need to have all dependencies already available in the pub cache to succeed…

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ğiAçıklama
titleUygulama başlığıdır.
themeUygulamanı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.
homeUygulamanı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 biliyorsunuzki 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 ama 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.

📚 Makale Serisi


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 Hello World makalesi için lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Flutter Hello World sosyal medya kanallarından paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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