Birçok mobil uygulamada aşağıdaki gibi bir açma kapama düğmesi görmüşsünüzdür.
Bu düğmeye Switch adı verilir ve ya açıktır ya da kapalıdır. Mantığı kadar kullanımı da basittir.
ana_sayfa.dart
import 'package:flutter/material.dart';
class AnaSayfa extends StatefulWidget {
@override
_AnaSayfaState createState() => _AnaSayfaState();
}
class _AnaSayfaState extends State<AnaSayfa> {
bool _acikMi = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Ana Sayfa"),
),
body: Center(
child: Switch(
value: _acikMi,
onChanged: _switchDegisti,
),
),
);
}
_switchDegisti(bool yeniDeger) {
setState(() {
_acikMi = yeniDeger;
});
}
}
Yukarıdaki kodda ekranın tam ortasında bir Switch oluşturduk. Switch‘in iki çok önemli parametresi vardır. Bunlardan birincisi “value“dur. “value”, Switch‘in o anda açık olup olmadığı değerini tutar. Biz de bu değeri “_acikMi” değişkeni içinde tutuyoruz ve “value” parametresine değer olarak “_acikMi” değişkeninin değerini atıyoruz.
Switch widget’ının bir diğer önemli parametresi “onChanged” parametresidir. Bu parametre, değer olarak bir fonksiyon alır ve bu fonksiyon Switch‘in değeri her değiştiğinde çalışır. Biz de bu yeni değeri alıp “_acikMi” değişkenine atıyoruz. Bu işlemi setState içinde yapıyoruz ve böylece ekranın güncellenmesini ve Switch‘in yeni değere göre şekil almasını sağlıyoruz. Hepsi bu kadar, başarıyla bir Switch oluşturduk. Şimdi Switch‘in sahip olduğu renkleri değiştirebileceğimiz parametrelerin bazılarına bakalım.
activeColor: Daire şeklindeki kısmın Switch açıkken ne renk olacağını belirler.
inactiveThumbColor: Daire şeklindeki kısmın Switch kapalıyken ne renk olacağını belirler.
activeTrackColor: Daire şeklindeki butonun üzerinde kaydığı, silindir şeklindeki kısmın Switch açıkken ne renk olacağını belirler.
inactiveTrackColor: Daire şeklindeki butonun üzerinde kaydığı, silindir şeklindeki kısmın Switch kapalıyken ne renk olacağını belirler.
Parametrelerin kullanımı aşağıdaki gibidir.
ana_sayfa.dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Ana Sayfa"),
),
body: Center(
child: Switch(
value: _acikMi,
onChanged: _switchDegisti,
activeColor: Colors.purple,
inactiveThumbColor: Colors.black,
activeTrackColor: Colors.yellow,
inactiveTrackColor: Colors.red,
),
),
);
}
Böylece rengârenk bir Switch oluşturmuş olduk.
