Radio

Aşağıda gördüğünüz, seçim yapmaya yarayan yapı genel olarak “Radio Button” ifadesiyle tarif edilir. Flutter’da ise bu yapıya kısaca Radio denir.

Radio‘nun da Switch ve Checkbox ile benzerlikleri olsa da mantığı biraz farklıdır. Radio da iki değerden birini alır, ya seçilidir ya da seçili değildir. Ancak burada Switch ve Checkbox‘tan farklı olarak, bir Radio‘nun seçili olması, diğer Radio‘ların seçiminin kaldırılması anlamına gelir. Örneğin, yukarıdaki fotoğrafta gösterilen Radio‘lardan ikinciye tıklarsak aşağıdaki görüntü oluşacaktır.

Görüldüğü gibi ilk Radio‘nun seçimi otomatik olarak kaldırıldı. Çünkü aynı grupta sadece bir Radio seçili olabilir. Switch ve Checkbox‘ta ise böyle bir durum yoktur.

ana_sayfa.dart

---

import 'package:flutter/material.dart';

class AnaSayfa extends StatefulWidget {
  @override
  _AnaSayfaState createState() => _AnaSayfaState();
}

class _AnaSayfaState extends State<AnaSayfa> {
  int _secilenRadio = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Ana Sayfa"),
      ),
      body: Center(
        child: ButtonBar(
          alignment: MainAxisAlignment.center,
          children: [
            Radio<int>(
              value: 0,
              groupValue: _secilenRadio,
              onChanged: _secilenRadioDegisti,
              activeColor: Colors.red,
            ),
            Radio<int>(
              value: 1,
              groupValue: _secilenRadio,
              onChanged: _secilenRadioDegisti,
              activeColor: Colors.green,
            ),
            Radio<int>(
              value: 2,
              groupValue: _secilenRadio,
              onChanged: _secilenRadioDegisti,
              activeColor: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }

  _secilenRadioDegisti(int yeniDeger) {
    setState(() {
      _secilenRadio = yeniDeger;
    });
  }
}

---

Yukarıda bir ButtonBar içinde üç adet Radio oluşturduk (ButtonBar‘ı butonları bir arada tutmaya yarayan basit bir Row olarak düşünebilirsiniz). Bu kez değer olarak hepsine tek tek seçili mi değil mi şeklinde birer bool atamak yerine, seçili olan değeri tutan tek bir int değişken oluşturduk ve tüm Radio‘ların “groupValue” parametresine bu değişkeni değer olarak atadık. “value” parametrelerine ise her Radio için ayrı değer verdik. Bu değerler tamsayı olduğu için Radio tanımlamasını “Radio<int>” şeklinde yaptık. Değer olarak String veya başka bir tür de verebilirdik. O zaman da “Radio<String>” şeklinde veya hangi tür değer verdiysek o şekilde tanımlama yapmamız gerekirdi.

Son olarak, her Radio‘ya tıklandığında aynı fonksiyonun (_secilenRadioDegisti) çalışmasını istedik. Fonksiyona parametre olarak da hangi Radio‘ya tıkladıysak onun değeri gelecektir. Radio‘ların değerini int olarak tanımladığımız için bu parametre de int türündedir. Fonksiyonun gövdesi içinde, bu parametredeki (yeniDeger) değeri setState aracılığıyla “_secilenRadio” değişkenine atadık. Böylece seçili olan Radio güncellendi ve bu güncelleme ekrana yansıtıldı.

Eğer Radio seçiliyken içini dolduran rengi değiştirmek istersek, yukarıdaki kodda olduğu gibi “activeColor” parametresini kullanabiliriz.