Flutter: Giriş Widget'ları ve Durum Göstergeleri

Flutter, kullanıcıdan veri almak ve uygulama durumunu göstermek için zengin bir widget kütüphanesi sunar. Bu yazıda en sık kullanılan seçim araçlarını ve durum göstergelerini inceleyeceğiz.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ları deneyebilirsiniz:

Seçim Widget'ları (Selection Widgets)

1. Switch (Anahtar)

Bir ayarı açıp kapatmak için kullanılır.

bool isSwitched = false;

Switch(
  value: isSwitched,
  onChanged: (value) {
    setState(() {
      isSwitched = value;
    });
  },
  activeTrackColor: Colors.lightGreenAccent,
  activeColor: Colors.green,
)

ListTile içinde kullanımı daha yaygındır:

SwitchListTile(
  title: Text('Bildirimleri Aç'),
  subtitle: Text('Uygulama bildirimlerini al'),
  value: isSwitched,
  onChanged: (value) => setState(() => isSwitched = value),
)

2. Checkbox (Onay Kutusu)

Birden fazla seçeneği seçmek için kullanılır.

bool isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value!;
    });
  },
)

Yine CheckboxListTile ile etiketli kullanımı daha pratiktir.

3. Radio Button (Radyo Butonu)

Bir gruptan sadece bir seçeneği seçmek için kullanılır.

int selectedValue = 1;

Column(
  children: [
    RadioListTile(
      title: Text("Seçenek A"),
      value: 1,
      groupValue: selectedValue,
      onChanged: (val) => setState(() => selectedValue = val!),
    ),
    RadioListTile(
      title: Text("Seçenek B"),
      value: 2,
      groupValue: selectedValue,
      onChanged: (val) => setState(() => selectedValue = val!),
    ),
  ],
)

4. Slider (Kaydırıcı)

Bir aralıktan değer seçmek için kullanılır.

double currentSliderValue = 20;

Slider(
  value: currentSliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  label: currentSliderValue.round().toString(),
  onChanged: (double value) {
    setState(() {
      currentSliderValue = value;
    });
  },
)

5. ToggleButtons

Yan yana sıralanmış butonlardan oluşan bir seçim grubudur.

List<bool> isSelected = [false, true, false];

ToggleButtons(
  children: [
    Icon(Icons.format_bold),
    Icon(Icons.format_italic),
    Icon(Icons.format_underlined),
  ],
  isSelected: isSelected,
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
)

Durum Göstergeleri (Progress Indicators)

Kullanıcıya bir işlemin devam ettiğini göstermek için kullanılır.

1. CircularProgressIndicator (Dairesel)

Genellikle sayfa yüklenirken veya belirsiz süreli işlemlerde kullanılır.

// Belirsiz (dönüp durur)
const CircularProgressIndicator()

// Belirli (%50 dolu)
const CircularProgressIndicator(value: 0.5)

2. LinearProgressIndicator (Çizgisel)

Daha çok dosya indirme gibi işlemlerde üstte veya altta kullanılır.

const LinearProgressIndicator()

WebView Hakkında Not

Uygulamanız içinde web sayfalarını göstermek isterseniz, webview_flutter paketini kullanabilirsiniz. Bu, native bir bileşen değildir ancak Flutter ekibi tarafından geliştirilen bir eklentidir.

dependencies:
  webview_flutter: ^4.0.0

Kullanımı (Controller ile):

// WebViewWidget kullanımı (webview_flutter 4.x+)
WebViewWidget(controller: controller)

WebView, özellikle "Hakkımızda", "Gizlilik Politikası" gibi dinamik web içeriğini göstermek için idealdir.

Özet

Bu widget'lar, uygulamanızın etkileşimini artırır:

• Switch/Checkbox: Evet/Hayır veya çoklu seçim.
• Radio: Tekli seçim.
• Slider: Aralık değeri seçimi.
• ProgressIndictor: Yükleme durumu.

Doğru input widget'ını seçmek, kullanıcı deneyimini (UX) doğrudan etkiler.