Flutter, Google tarafından geliştirilen ve hem iOS hem de Android platformlarında çalışabilen açık kaynaklı bir UI toolkit ve SDK'dır. Dart programlama dilini kullanarak hızlı ve güzel mobil uygulamalar oluşturmanıza olanak tanır. Bu makalede, Flutter kullanarak temel bir mobil uygulama oluşturmanın adımlarını öğreneceksiniz.
Flutter kurulumunu tamamladıktan sonra, terminal veya komut istemcisine şu komutu yazarak yeni bir Flutter projesi oluşturabilirsiniz;
flutter create my_flutter_app
Bir önceki yazımızda bir Flutter Projesi oluşturmuştuk. Tasarıma başlamadan önce Flutter Projemizin dizinini kısaca bir tanıyalım.
Yandaki resim, projemizi ilk oluşturduğumuz anda gelen klasörler ve dosyaları göstermektedir.
Projemizin dosyaları içerisinde görüldüğü üzere lib klasörü var. Bu alana dart dizini diyebiliriz. Biz dart dosyalarımızı bu klasörün içerisine oluşturacağız. Oluşturduğumuz kodlamaları dart dosyası olarak buraya kaydediyoruz. Şu anda burada main.dart diye bir dosya var. Örnek dosya olarak oluşturulmuş. Emulatörde çalıştırdığımızda bize bir sayaç uygulamasını açmakta.
Flutter, Google tarafından geliştirilen açık kaynaklı bir UI (kullanıcı arayüzü) çerçevesidir. Flutter, hızlı ve etkileyici kullanıcı deneyimleri
oluşturmak için birden fazla platformda çalışabilen uygulamalar geliştirmek için kullanılır. Flutter’da, kullanıcı arayüzünü oluşturmak için widget’lar
kullanılır. Widget’lar, Flutter uygulamalarının yapı taşlarıdır ve her şey widget’dır.
Flutter widget’ları, her biri belirli bir işlevi yerine getiren ve uygulamanın görüntüsünü oluşturan yapılardır.
Her widget, tek başına bir bileşen veya birden fazla widget’ın birleşiminden oluşan daha karmaşık bir bileşen olabilir.
Flutter, her türlü bileşeni oluşturmak için geniş bir widget kütüphanesi sunar, ancak aynı zamanda kendi özel widget’larınızı da oluşturmanıza izin verir.
Flutter’da widget’lar, iki temel tipe ayrılır: StatelessWidget ve StatefulWidget .
StatelessWidget: Uygulamanızın durumu değişmeyen bir parçasını temsil eder. Yani, içerisinde durum (state) tutmayan, sadece bir çıktı oluşturan widget’lar oluşturur.
StatelessWidget, bir kez oluşturulduktan sonra değiştirilemez ve yeniden oluşturulması gerektiğinde tamamen yeniden inşa edilir. Bu tür bir widget, build() yöntemi ile oluşturulur ve
genellikle verileri ve parametreleri alarak bir kullanıcı arayüzünü temsil eder.
Örnek bir StatelessWidget yan tarafta verilmiştir.
StatefulWidget: Uygulamamızın durumu değişen widget’lar oluşturmak için kullanılır. Durumu tutabilen widget’lar, kullanıcının etkileşimleri veya uygulama akışı
nedeniyle güncellenen bir iç duruma (state) sahip olabilir. StatefulWidget, iki ayrı sınıfı içerir: StatefulWidget sınıfı ve onunla ilişkili State sınıfı. StatefulWidget,
bir durumu güncellemek için setState() yöntemini kullanarak State sınıfını etkileşime sokar.
Örnek bir StatefulWidget kodu yan tarafta verilmiştir.
Flutter’da widget’lar, ağaç yapısı şeklinde düzenlenir. Root widget, uygulamanın ana widget’ıdır ve diğer widget’ları içeren bir hiyerarşi oluşturur.
Bu widget’lar birbirlerine eklenerek ve iç içe geçerek uygulamanın kullanıcı arayüzünü oluştururlar. Bu yapı, widget’ların birden çok platformda çalışmasını
sağlar ve güncellemelerin widget ağacı boyunca hızlı bir şekilde yayılmasını sağlar.
Flutter’daki widget’lar, sadece görünüm (view) katmanını değil, aynı zamanda iş mantığını (logic) da temsil edebilir. Böylece, uygulama geliştiricileri,
tek bir widget ile hem görünümü hem de iş mantığını birleştirebilir ve bu da kodun yeniden kullanılabilirliğini ve bakımını kolaylaştırır.
Widget’lar, Flutter’ın temel yapı taşlarıdır ve Flutter geliştirme sürecinin temelini oluştururlar. Yapısal olarak basit veya karmaşık, statik veya dinamik,
tek kullanımlık veya yeniden kullanılabilir widget’lar oluşturarak, etkileyici kullanıcı arayüzleri oluşturmanızı sağlarlar.
Flutter, hızlı uygulama geliştirme deneyimi sunmak için tasarlanmış bir framework’tür. Bu amaçla Hot Reload ve Hot Restart gibi iki önemli özelliğe sahiptir. Bu özellikler, uygulama geliştirme
sürecinde önemli bir zaman kazanımı sağlar.
Hot Reload: Hot Reload, kodu anında güncellemek için kullanılan bir özelliktir. Bu özellik sayesinde, uygulamadaki değişiklikler derlenmeden hemen önce yansıtılır.
Yani, kodda yapılan değişiklikleri hızlı bir şekilde görüntülemek için kullanılır. Bu sayede, kodda hata bulma süreci hızlandırılır ve uygulamanın gerçek zamanlı olarak nasıl
görüneceğini görmek mümkün olur.