FLUTTER’DA WİDGET NEDİR? FLUTTERDA EN SIK KULLANACAĞINIZ WİDGETLAR

FLUTTER’DA WİDGET NEDİR? FLUTTERDA EN SIK KULLANACAĞINIZ WİDGETLAR

Flutter kullanırken, neredeyse her şeyin widgetlar üzerine kurulu olduğunu fark edeceksiniz. Uygulama geliştirme aşamasında kullanıcıya büyük kolaylık sağlayan ve uygulama geliştirme süresini ciddi ölçüde kısaltan widgetlar, geliştirdiğiniz uygulamada herhangi bir değişiklik yapmak istediğinizde de yardımınıza koşuyor. Peki widget tam olarak nedir?

Widgetlar, daha önceden başka yazılımcılar tarafından yazılmış olan ve Flutterda hazır olarak bulunan yapılardır. Bu yapıları kullanarak ek kod yazmadan pek çok arayüz bileşenini uygulamanız mümkündür. Hatta Flutterda kimi zaman widgetlar, diğer widgetları kullanmak için bile kullanılabilir.

Dilerseniz Flutterda bulunan widgetlara daha yakından bakalım.

Flutterda Yer Alan Widgetlar ve Kullanım Amaçları

 Flutterda yer alan widgetlar, kullanım amaçlarına göre çeşitli kategorilerde ayrılır. Örneğin bazı widgetlar erişilebilirlik için kullanılırken, bazı widgetlar da uygulamanın genel hatlarını belirlemek içi kullanılır. Flutter tarafından belirtilen widget kategorileri ve içlerinde yer alan widgetlar şu şekildedir:

1. Accessibility (Erişilebilirlik) Widgetları
2. Animation and Motion (Animasyon ve Hareket) Widgetlar
3. Assets, Images and Icons (Kaynak, Görsel ve İkon) Widgetları
4. Async (Eşzamansız) Widgetları
5. Basics (Temel) Widgetlar
6. Cupertino (iOS Stilinde) Widgetlar
7. Input (Giriş) Widgetları
8. Interaction Models (Etkileşim Modelleri) Widgetları
9. Layout (Yerleşim-düzen) Widgetları
10. Material Components (Materyal Bileşenleri) Widgetları
11. Painting and Effects (Görsel Efektler) Widgetları
12. Scrolling (Kaydırma) Widgetları
13. Styling (Stil) Widgetları
14. Text (Yazı) Widgetları

Görüldüğü üzere Flutterda pek çok widget kategorisi ve bu kategoriler altında yatan birçok widget bulunuyor. Haliyle tüm widgetları bir anda öğrenmeniz ve uygulamaya başlamanız da çok zor. Bu yüzden Flutter öğrenirken widget öğrenimini zamana yaymanız ve en sık kullanacağınız, en gerekli widgetlardan başlamanız daha iyi olacaktır.

Flutterda Uygulamanızı Geliştirmek İçin Bilmeniz Gereken Temel Widgetlar

Flutter ile ilk uygulamanızı geliştirmek için mutlaka bilmeniz gereken ve bundan sonra tüm uygulamalarınızda kullanacağınız üç adet widget bulunuyor. Bunlar AppBar Class, Scaffold Class ve Container Class şeklindedir. İsterseniz bu widgetları daha yakından inceleyelim.

1. Scaffold Class

Scaffold, AppBar gibi pek çok widgetın kullanılmasını sağlayan, kelime anlamı ‘iskelet’ olan bir widgettır. AppBar, BottomNavigationBar gibi diğer widgetları destekler ve bunların işe yarar hale gelmesine yardımcı olur. Scaffolda uygulamanın genel yapısını ve düzenini ekleyebilirsiniz.

Scaffold widgetın varlığı için gövde temel bir kavramdır. Gövdede Scaffold içinde yer alan ana içerik gösterilir. AppBar’ın üstünde yer alır.

• AppBar Class

AppBar veya uygulama çubuğu, üstünde uygulamayı kullanmak için çeşitli araçların yer aldığı ve uygulamanın genellikle üstünde veya altında yer alan kısımdır. Bu widgeta TapBar ve FlexibleSpaceBar gibi diğer widgetlardan eklemeler yapmanız da mümkündür.

Bir AppBar (Uygulama Çubuğu) widgetında yer alan temel bileşenler şu şekildedir:

• Başlık
• Hareketler
• Arkaplan rengi
• Yükseklik
• Şekil

• Container Class

Container Class widgetı boya, pozisyon ve boyut gibi genel widgetları da kapsayan bir araçtır. Container Class ile çeşitli kompozisyonlar yaratmanız ve kullanıcı arayüzünü kişiselleştirmeniz, daha kolay okunabilir/kullanılabilir hale getirmeniz mümkündür.

 Container ile uygulamanızın dekorasyonunun temellerini atabilir ve geliştirebilirsiniz. Böylelikle uygulamanız daha ilgi çekici olacaktır.

Container widgetı için temel bileşenler şunlardır:

• Child: Container widgetında ‘child’ (çocuk) olarak adlandırılan diğer widgetların girişine izin verilir. Örneğin text (yazı) widgetı bunlardan birisidir.
• Renk
• Genişlik ve Uzunluk
• Kenar
• Padding (dolgu): İki bileşen arasındaki boşluk olarak tanımlanabilir
• Hiza
• Dekorasyon