Flutter Nedir ? Flutter’a Başlangıç
Flutter, Google’ın mobil, web ve masaüstü için güzel, native olarak derlenmiş uygulamaları tek bir kod tabanından hazırlamak için kullanılan kullanıcı UI toolkitidir. Flutter ile tek bir kod tabanı kullanarak iOS ve Android için uygulamalar yazabilirsiniz.
İşte Flutter’ın kendi web sitesindeki bazı mottolar;
- Design beautiful apps (Güzel uygulamalar tasarla.)
- Productively build apps (Uygulamaları verimli bir şekilde oluşturun.)
- Create faster apps (Hızlı uygulamalar oluşturun.)
Dart, Flutter uygulamalarını kodlamak için kullanılan, Google tarafından geliştirilmiş bir programlama dilidir. Kısa, kuvvetli ve nesneye yönelik bir dildir.
Flutter SDK ve gerekli platformların kurulumu (Android Studio, VSCode, Simulator, gerekli pluginler veya extensionlar) için buraya tıklayıp, kendi işletim sisteminizi seçerek adımları takip edebilirsiniz.
Bir Flutter Uygulaması Oluşturalım
Bir Flutter uygulamasını oluşturmak için, eğer Android Studio kullanıyorsanız “Start a new Flutter Project” diyerek eğer Visual Studio Code kullanıyorsanız “command palette”i açarak “Flutter: New Project” diyerek uygulamanı oluşturabilirsiniz.
Command Palette’i View > Command Palette veya Windows bilgisayarlarda “Ctrl+Shift+P”, macOS bilgisayarlarda “Command+Shift+P” tuş kombinasyonu ile açabilirsiniz.
Bir Flutter projesi oluşturduğumuzda çeşitli dosyalar otomatik olarak oluşturulur. iOS ve Android tabanları için dizinler bulunur. Bu kadar çok dosya korkutucu gözükebilir. Ama korkmanıza gerek yok biz yalnızca “lib” dizini içerisinde yer alan “main.dart” dosyası ile işlemlerimizi yapacağız. Diğer dosyalarla daha sonra tanışabiliriz.
“main.dart” dosyasını inceleyebilirsiniz. Flutter bu dosyanın içerisinde bize örnek bir “counter” uygulaması sunuyor. Biz başlarken tüm bu kodları sileceğiz.
Flutter’da ana fikir kullanıcı arayüzünü “widget”lar ile oluşturmamızdır. Nihayetinde Flutter’daki neredeyse her şey birer widget’tır. Peki bu widget’lar nedir ?
Widget Nedir?
React gibi bir web çerçevesi ile çalıştıysanız, “component” kavramını bilmelisiniz. Flutter widget’ları doğrudan bu fikirden ilham alıyor. Widget, uygulamanızın kullanıcı arayüzünün nasıl göründüğünü açıklayan yeniden kullanılabilir bir kod parçasıdır. Widget’lar kullanıcı arayüzünün durumlarına göre tanımlarız.
Bir widget’ın ana işi, widget’ın diğer alt düzey widgetlar açısından nasıl görüntüleneceğini açıklayan bir oluşturma yöntemi sağlamaktır. Flutter’ın size sunduğu widgetları kullanabileceğiniz gibi kendi widgetlarınızı da yazabilirsiniz.
Gelin ekrana “Hello, Flutter” yazan çok basit bir uygulamanın kodlarını satır satır inceleyerek widgetlara göz atalım.
Yukardaki kod bloğumuzun çıktısı yandaki ekran görüntüsü şeklinde oluyor. Kodumuza baktığımızda “runApp”, “MaterialApp”, “Scaffold” gibi isimler görüyoruz. Şimdi hepsine yakından bir göz atalım.
İlk olarak “import” satırı ile başlayalım. Import satırı ile material tasarım paketini uygulamamıza dahil etmiş oluruz.
İncelemeye devam ettiğimizde “void main()” fonksiyonunu görüyoruz. Flutter uygulamaları Dart dili ile çalıştığı için “main” bloğu ile başlatılır.
runApp() bir widget’ı argüman olarak alır ve ekrana ayarlar. Ekrana sığdırmak için widget’a kısıtlamalar verir. Verilen widget’ı uygulamanın “kök” widget’ı ve diğer widgetlar’ı da alt ögesi yapar. Burada devamında gördüğümüz “MaterialApp()” diğer widgetları tanımladığımız bir kök widget olarak veriyoruz.
Daha sonrasında “home” özelliğini görüyoruz. Home uygulamamızın temel rotası için kullanırız. Uygulama başlatıldığında içinde tanımlanan widgetların görüntüleneceği anlamına gelir.
Home özelliği içerisinde “Scaffold” isimli başka bir widget görüyoruz. Scaffold widget’ının ne işe yaradığını “scaffold”ın kelime anlamı olan “iskele”den de yola çıkarak tahmin edebiliriz. Scaffold widget’ı “widget ağacını” tutan bir gövde özelliği sağlar. Widget alt ağacı oldukça karmaşık olabilir.
Daha sonrasında Scaffold içinde “appBar” özelliğini görüyoruz. Bu özellikte aynı adlı “AppBar” widget’ını kullanıyoruz. AppBar widget’ı uygulamanın üstündeki bar kısmını oluşturuyor. Daha sonra bu widget’ın içine girerek “title” özelliğine bir “Text” widgetı atıyoruz. Yazmak istediklerimizi bu text widget’ı ile yazıyoruz.
AppBar’dan çıktıktan sonra “body” özelliğini ekliyoruz. Ve body özelliğine “Center” isimli widget’ı ekliyoruz. Center widget’ı widget subtree’yi yani widget alt ağacını ortaya hizalar. Center widget’ının içine ise bir “child” ekliyoruz. Child ise daha önce tanıştığımız bir widget olan Text’i içinde barındırıyor. Burada Text widget’ına ilk kullanımdan farklı olarak bir yazı fontu özelliği belirledik.
Text("Hello, Flutter", style: TextStyle(fontSize: 35)Ve bu hamlemiz ile uygulamamız yukardaki ekran görüntüsündeki halini aldı.
Sizlerle basit bir başlangıç yaptık Flutter uygulama geliştirmeye. Flutter uygulamalarına genel olarak baktığımızda bir widget ağacı olarak görebiliriz ki widget’ların Flutter için önemini görmek istersek bu makalede kaç kere widget dediğimize bakabiliriz. :)
Yazımızın sonuna geldik, Potensas’da başladığım stajda öğrendiklerimi sizlerle paylaşmaya devam edeceğim. Başka makalelerde görüşmek üzere. 🤓🐦
