Checkbox

Aşağıdaki görselde yer alan yapıya Checkbox adı verilir.

Şimdi bu yapının Flutter’da kullanımına bakalım. Switch‘le hemen hemen aynı kodları yazacağız.

ana_sayfa.dart

---

import 'package:flutter/material.dart';

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

class _AnaSayfaState extends State<AnaSayfa> {
  bool _seciliMi = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Ana Sayfa"),
    ),
    body: Center(
      child: Checkbox(
        value: _seciliMi,
        onChanged: _checkboxDegisti,
      ),
    ),
  );
}

  _checkboxDegisti(bool yeniDeger) {
    setState(() {
      _seciliMi = yeniDeger;
    });
  }
}

---

Switch‘ten farklı olarak “_acikMi” değişkeninin ismini “_seciliMi” olarak değiştirdik ki tahmin edebileceğiniz gibi değiştirmesek de olurdu. Aynı şekilde fonksiyonun da ismini değiştirip “_checkboxDegisti” yaptık o kadar, fonksiyonun gövdesi de, “value” ve “onChanged” parametreleri de birebir aynıdır. Aslında bu durum gayet normal, iki widget da iki durumdan birini alıyor: Ya kapalı ya açık; ya seçili ya seçili değil. Bu yüzden birbirlerine benzer kullanıma sahip olmaları gayet doğal diyebiliriz.

Eğer Checkbox seçiliyken içini dolduran rengi değiştirmek istersek aşağıdaki gibi “activeColor” parametresini ayarlayabiliriz. Ortadaki “tik” işaretinin rengini değiştirmek için de “checkColor” parametresine bir değer atayabiliriz.

ana_sayfa.dart

---

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Ana Sayfa"),
    ),
    body: Center(
      child: Checkbox(
        value: _seciliMi,
        onChanged: _checkboxDegisti,
        activeColor: Colors.red,
        checkColor: Colors.green,
      ),
    ),
  );
}

---