Flutter Widget Türleri 💫 🌌 ✨

Flutter'da widget'lar, özelliklerine göre birden çok kategoride gruplandırılabilir:

• Platforma özel widget'lar

• Layout(Düzen) widget'ları

• State maintenance widgets (Durum bakım araçları)

• Platformdan bağımsız / temel widget'lar

Platforma özel widget'lar

Flutter'ın belirli platformlara özgü widget'ları vardır - Android veya iOS.

Android'e özel widget'lar, Android OS'nin Material tasarım kılavuzuna uygun olarak tasarlanmıştır. Android'e özel widget'lara Material widget'ları denir.

iOS'a özel widget'lar, Apple'ın İnsan Arayüzü Yönergeleri'ne (Human Interface Guidelines) uygun olarak tasarlanmıştır ve Cupertino widget'ları olarak adlandırılır.

En çok kullanılan material widget'larından bazıları şunlardır:

• Scaffold
• AppBar
• BottomNavigationBar
• TabBar
• TabBarView
• ListTile
• RaisedButton
• FloatingActionButton
• FlatButton
• IconButton
• DropdownButton
• PopupMenuButton
• ButtonBar
• TextField
• Checkbox
• Radio
• Switch
• Slider
• Date & Time Pickers
• SimpleDialog
• AlertDialog

En çok kullanılan Cupertino widget'larından bazıları şunlardır:

• CupertinoButton
• CupertinoPicker
• CupertinoDatePicker
• CupertinoTimerPicker
• CupertinoNavigationBar
• CupertinoTabBar
• CupertinoTabScaffold
• CupertinoTabView
• CupertinoTextField
• CupertinoDialog
• CupertinoDialogAction
• CupertinoFullscreenDialogTransition
• CupertinoPageScaffold
• CupertinoPageTransition
• CupertinoActionSheet
• CupertinoActivityIndicator
• CupertinoAlertDialog
• CupertinoPopupSurface
• CupertinoSlider

Düzen widget'ları

Flutter'da, bir veya daha fazla widget kullanılarak bir widget oluşturulabilir. Birden çok widget'ı tek bir widget'ta oluşturmak için Flutter, düzen özelliği olan çok sayıda widget sağlar. Örneğin, chil widget, Center widget'ı kullanılarak ortalanabilir.

Popüler düzen-layout widget'larından bazıları şunlardır:

• Container: background, border ve shadow(gölge) içeren BoxDecoration widget'ları kullanılarak dekore edilmiş dikdörtgen bir kutu.
• Center: Child widget'ı ortalar
• Row: Child widget'larını yatay doğrultuda yerleştirir.
• Column: Child widget'larını dikey doğrultuda yerleştirir.
• Stack: Widget'ları birbirinin üzerine yerleştirir.

State maintenance widgets (Durum bakım widget'ları)

Flutter'da tüm widget'lar ya StatelessWidget'tan ya da StatefulWidget'tan türetilir.

StatelessWidget'tan türetilen widget'ın herhangi bir durum bilgisi yoktur, ancak StatefulWidget'tan türetilen widget'lar durum bilgisini içerebilir. Uygulamanın dinamik doğası, widget'ların etkileşimli davranışı ve etkileşim sırasındaki durum değişiklikleri yoluyladır. Örneğin bir sayaç butonuna tıkladığınızda sayacın artması gibi.

Platform bağımsız/ temel widget'lar

Flutter, platformdan bağımsız bir şekilde basit ve karmaşık kullanıcı arayüzü oluşturmak için çok sayıda temel widget sağlar.

Text

Text widget'ı, bir string'i görüntülemek için kullanılır. yazının stili, style özelliği ve TextStyle sınıfı kullanılarak ayarlanabilir.

Bu amaca yönelik örnek kod aşağıdaki gibidir:

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold));

Text widget'ı, string'i farklı stille belirtmek için TextSpan türünün alt öğesini(child) kabul eden Text.rich adlı özel bir constructor'a sahiptir.
TextSpan widget'ı özyinelemelidir(recursive) ve TextSpan'ı çocukları olarak kabul eder.

Bu amaca yönelik örnek kod aşağıdaki gibidir:

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

Çıktı:

Text widget'ının aracının en önemli özellikleri şunlardır:

• maxLines, int: Gösterilecek maksimum satır sayısı

• overflow, TextOverFlow: TextOverFlow sınıfı kullanılarak görsel taşmanın nasıl işlendiğini belirtin.

• style, TextStyle: TextStyle sınıfını kullanarak string'in stilini belirtin.

• textAlign, TextAlign: TextAlign sınıfını kullanarak sağa, sola, yasla vb. gibi metnin hizalanması

• textDirection, TextDirection: Metnin akış yönü, left-to-right veya right-to-left

Image

Image widget'ı, uygulamada bir resmi görüntülemek için kullanılır. Image widget'ı, birden çok kaynaktan görüntü yüklemek için farklı contructor'lar sağlar ve bunlar aşağıdaki gibidir:

• Image - ImageProvider kullanan genel resim yükleyici
• Image.asset - Flutter projesinin varlıklarından (assets) resim yükler
• Image.file - Sistem klasöründen resim yükler
• Image.memory - Resmi bellekten yükler
• Image.Network - Resmi ağdan yükler

Flutter'da bir görüntüyü yüklemek ve görüntülemek için en kolay seçenek, görüntüyü uygulamanın varlıkları (assets) olarak eklemek ve istek üzerine widget'a yüklemektir.

Proje klasörünüzde assets isimli bir klasör oluşturun ve resimlerinizi yükleyin.

pubspec.yaml dosyasındaki asset'leri aşağıda gösterildiği gibi belirtin:

flutter:

assets:

- assets/smiley.png

Resmi görüntüleyin:
Image.asset('assets/smiley.png')

Image widget'ının en önemli özellikleri şunlardır:

• image, ImageProvider: Yüklenecek resim

• width, double - Resmin Genişliği

• height, double - Resmin yüksekliği

• alignment, AlignmentGeometry - Resmi kendi sınırları içinde hizalar

Resources:

https://api.flutter.dev/flutter/widgets/RichText-class.html
https://www.tutorialspoint.com/flutter/flutter_tutorial.pdf