Ders İçeriği
Flutter, her şeyin bir widget olduğu bir yaklaşıma sahiptir. Bir uygulama ekranındaki metin, resim, düğme, düzen (layout) elemanları ve hatta uygulamanın kendisi bile birer widget'tır. Widget'lar, uygulamanızın kullanıcı arayüzünü oluşturmak için bir araya getirilen yapı taşlarıdır.
3.1. Widget Kavramı (StatelessWidget, StatefulWidget)
Flutter'da iki ana widget türü vardır:
•StatelessWidget (Durumsuz Widget): Durumu değişmeyen, yani bir kez oluşturulduktan sonra içeriği veya görünümü değişmeyen widget'lardır. Örneğin, bir metin (Text), bir resim (Image) veya bir ikon (Icon) genellikle StatelessWidget'tır. Bu widget'lar, oluşturuldukları anda sahip oldukları veriyi gösterirler ve bu veri değişmez. build metodu, widget'ın kullanıcı arayüzünü tanımlar.
•StatefulWidget (Durumlu Widget): Durumu değişebilen, yani kullanıcı etkileşimleri veya harici verilerle içeriği veya görünümü güncellenebilen widget'lardır. Örneğin, bir sayaç (Counter) veya bir onay kutusu (Checkbox) StatefulWidget'tır. StatefulWidget'lar, createState() metodu aracılığıyla bir State nesnesi oluşturur. Bu State nesnesi, widget'ın yaşam döngüsü boyunca değişebilen veriyi (durumu) tutar ve setState() metodu çağrıldığında widget'ın yeniden çizilmesini sağlar.
3.2. Temel Widget'lar (Text, Image, Icon, Button, Container, Row, Column)
Flutter'da kullanıcı arayüzü oluşturmak için kullanılan bazı temel widget'lar şunlardır:
•Text: Ekranda metin göstermek için kullanılır.
•Image: Ekranda resim göstermek için kullanılır. Farklı kaynaklardan (asset, network, file) resim yüklenebilir.
•Icon: Materyal Tasarım veya Cupertino ikonlarını göstermek için kullanılır.
•Button (Düğmeler): Kullanıcı etkileşimi için kullanılır. Çeşitli düğme türleri vardır:
•ElevatedButton: Yükseltilmiş, gölgeli düğme.
•TextButton: Düz metin düğmesi.
•OutlinedButton: Kenarlıklı düğme.
•IconButton: İkon düğmesi.
•Container: Tek bir alt widget'ı (child) barındırabilen, düzen ve stil için kullanılan çok yönlü bir widget'tır. Genişlik, yükseklik, dolgu (padding), kenar boşluğu (margin), renk, kenarlık (border) ve gölge (box shadow) gibi özelliklere sahiptir.
•Row: Alt widget'larını yatay (horizontal) olarak sıralamak için kullanılır.
•Column: Alt widget'larını dikey (vertical) olarak sıralamak için kullanılır.
3.3. Düzen Widget'ları (Padding, Center, Align, Expanded, Flexible)
Flutter'da widget'ların ekranda nasıl konumlandırılacağını ve boyutlandırılacağını kontrol etmek için kullanılan bazı önemli düzen (layout) widget'ları:
•Padding: Bir widget'ın etrafına boşluk (dolgu) eklemek için kullanılır.
•Center: Alt widget'ını ebeveyninin ortasına hizalamak için kullanılır.
•Align: Alt widget'ını ebeveyninin belirli bir noktasına hizalamak için kullanılır. alignment özelliği ile hizalama noktası belirlenir (örneğin Alignment.topLeft, Alignment.bottomCenter).
•Expanded: Bir Row veya Column içindeki alt widget'ın, mevcut alanı doldurmasını sağlamak için kullanılır. Kalan boşluğu eşit olarak veya flex özelliği ile belirtilen oranda doldurur.
•Flexible: Expanded'a benzer, ancak alt widget'ın kendi doğal boyutunu korumasına izin verirken, kalan boşluğu doldurmak için esneklik sağlar. fit özelliği ile FlexFit.tight (Expanded gibi tüm alanı doldurur) veya FlexFit.loose (gerektiği kadar yer kaplar) ayarlanabilir.
3.4. Materyal Tasarım ve Cupertino Tasarımı
Flutter, Google'ın Materyal Tasarım yönergelerini ve Apple'ın Cupertino (iOS) tasarım yönergelerini destekler. Bu, uygulamanızın her iki platformda da yerel bir his vermesini sağlar.
•Materyal Tasarım: Android uygulamaları için Google tarafından geliştirilen bir tasarım dilidir. Flutter'da MaterialApp widget'ı ile Materyal Tasarım bileşenlerini kullanabilirsiniz. Scaffold, AppBar, FloatingActionButton, Card gibi widget'lar Materyal Tasarım prensiplerine uygun olarak tasarlanmıştır.
•Cupertino Tasarımı: iOS uygulamaları için Apple tarafından geliştirilen tasarım yönergeleridir. Flutter'da CupertinoApp widget'ı ile iOS'a özgü bileşenleri kullanabilirsiniz. CupertinoButton, CupertinoNavigationBar, CupertinoSwitch gibi widget'lar Cupertino tasarım prensiplerine uygun olarak tasarlanmıştır.
Genellikle, tek bir uygulama geliştirirken Materyal Tasarım widget'larını kullanmak ve gerektiğinde platforma özgü davranışları Theme.of(context).platform veya Platform.isIOS gibi kontrollerle ayarlamak daha yaygındır. Ancak, tamamen iOS'a özgü bir görünüm ve his istiyorsanız Cupertino widget'larını kullanabilirsiniz.
3.5. Hot Reload ve Hot Restart
Flutter'ın geliştirme sürecini inanılmaz derecede hızlandıran iki önemli özelliği Hot Reload ve Hot Restart'tır.
•Hot Reload (Anında Yenileme): Uygulamanız çalışırken kodunuzda yaptığınız değişiklikleri anında uygulamaya yansıtır. Bu, UI değişikliklerini, küçük hata düzeltmelerini veya yeni özellik eklemelerini saniyeler içinde görmenizi sağlar. Hot Reload, uygulamanın durumunu (state) korur, bu da uygulamanın belirli bir ekranında çalışırken değişiklikleri test etmenizi kolaylaştırır. Genellikle bir tuş kombinasyonu (VS Code'da Ctrl+S veya Android Studio'da şimşek simgesi) ile tetiklenir.
•Hot Restart (Anında Yeniden Başlatma): Uygulamayı tamamen yeniden başlatır. Bu, uygulamanın tüm durumunu sıfırlar ve widget ağacını baştan oluşturur. Genellikle, uygulamanın ana yapısında veya durum yönetiminde büyük değişiklikler yaptığınızda veya uygulamanın başlangıç durumunu test etmek istediğinizde kullanılır. Hot Reload'un yetersiz kaldığı durumlarda (örneğin, main() fonksiyonunda yapılan değişiklikler) Hot Restart'a ihtiyaç duyulur.
Bu özellikler, Flutter geliştiricilerine hızlı geri bildirim döngüsü sağlayarak verimliliği artırır ve geliştirme deneyimini çok daha keyifli hale getirir.