Flutter Switch Widget Kullanımı

Flutter’da her şey widget üzerine kuruludur. Bu yazımda Flutter içerisinde yer alan switch widget hakkında bilmeniz gerekenleri açıklayacağız.

Flutter Switch Widget

Kendinize Flutter’da switch widget nedir? Nerede kullanılır? diye sormuş olabilirsiniz. Switch kelimesi Türkçe’ye “değiştirmek” olarak geçmiştir. Adından da anlaşılacağı üzere switch widget ile bir şeyleri değiştiriyoruz.

Görüldüğü üzere switch widget ya “ON” ya da “OFF” olabilir.

Flutter Switch Widget Nerelerde Kullanılır?

Örnek vermek gerekirse bir adet mobil uygulamamızda ayarlar sekmesinde bulunalım. Uygulamamız hem karanlık hem de aydınlık temaya sahip olsun. Kullanıcı uygulamayı karanlık temada kullanmak isterse switch üzerinden karanlık temayı “ON” edip uygulamayı o şekilde kullanabilir.

Farklı switch görünümlerine material.io sitesinden ulaşabilirsiniz. Birkaç farklı örneği aşağıdaki gibidir.

Flutter Switch Widget Oluşturma

Switch widget oluşturmadan önce bilmeniz gereken bazı şeyler var. Bunlar switch widgetın aldığı parametrelerdir. Flutter switch widget birçok farklı parametre alabilir. Dilerseniz birkaç tanesinden bahsedeyim.

Flutter Switch Widget Parametreler

value: Switch’in açık veya kapalı olduğunu kontrol etmeye yarar. Bool değeri kullanır.

activeColor: Switch’in açık olduğu durumda yuvarlak olan kısmın rengini belirtmemizi sağlar.

activeTrackColor: Switch’in açık olduğu durumda yuvarlak harici kalan çubuğun rengini belirler.

onChanged: Kullanıcı switch’e her dokunduğunda çağrılır.

Dilerseniz şimdi bir switch widget oluşturalım. Ve açıldığında veya kapandığında konsola mesaj yazdıralım.

Öncelikle her uygulamada olduğu gibi “material.dart” kütüphanemizi dahil edelim ve bir void main bloğu oluşturalım.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

Main bloğunda home değerini MyApp olarak belirttik. Herhangi bir hata vermemesi için MyApp adında bir stateful widget oluşturuyoruz.

Eğer Visual Studio Code üzerindeyseniz “stf” harflerini tıklamanız durumunda editör size önerilenlerde stateful widgetı gösterecektir.

<pre class="wp-block-preformatted"><strong>class</strong> <strong>MyApp</strong> <strong>extends</strong> StatefulWidget {
  @override
  _State createState() => _State();
}

<strong>class</strong> <strong>_State</strong> <strong>extends</strong> State<MyApp> {
  @override
  Widget build(BuildContext context) {
    <strong>return</strong> Scaffold();
  }
}
</pre>

Gördüğünüz üzere bir stateful widget oluşturduk ve bize Scaffold  dönmesini söyledik. Ancak öncelikle switch’in açık mı kapalı mı olduğunu kontrol etmek amacıyla bir değişken oluşturuyoruz. Değişkeni ikinci “@override” üstüne oluştuyoruz.

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool switchValue = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Bool tipindeki değişkeni oluşturduktan sonra swtich için ana kodları yazmaya geçebiliriz. Scaffol içerisine gelip aşağıdaki kodları yazıyoruz.

appBar: AppBar(
          title: Text('Kod10.com'),
        ),
        body: Center(
          child: Switch(
            value: switchValue,
            onChanged: (value) {
              setState(() {
                switchValue = value;
                print(switchValue);
              });
            },
            activeTrackColor: Colors.black,
            activeColor: Colors.red,
          ),
        )
    );

Yukarıdaki kodlarda öncelikle bir appBar  oluşturduk. Ve başlığı “Kod10.com” olarak ayarladık. Sonuç olarak appBar aşağıdaki resimde olduğu gibi gözükmüş oldu.

Kodlarda ilerlediğimizde body içerisine bir Center widgetı oluşturduğumuzu görüyoruz. Daha sonra bu center widgetının bir child’ı olarak Switch  widgetını oluşturuyoruz. Switch’in value parametresini yukarıda oluşturduğumuz switchValue olarak tanımlıyoruz. Paramterlerin ne işe yaradığını yukarda söylemiştik.

Sonrasında ise onChanged parametresi olarak bir setState metodu oluşturuyoruz. Ve her tıklandığında ekrana switchValue içerisindeki bool değerini ekrana yazdırmak için print komutunu kullanıyoruz.

Son olarak ise switch açıkken üzerindeki yuvarlağın rengini red (kırmızı), açıkken çubuğun rengini black (siyah) olarak ayarladık.

Son durumda kodumuzu çalıştırdığımızda şu şekilde görünmektedir.

Switch’i açtığımızda ise şu şekilde görünmektedir.

Switch’i açıp kapattığımızda konsolda görüntülenen mesajlarda aşağıdaki gibidir.

Flutter Switch Widget oluşturma kod örneğinin tamamına aşağıda ulaşabilirsiniz.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool switchValue = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kod10.com'),
        ),
        body: Center(
          child: Switch(
            value: switchValue,
            onChanged: (value) {
              setState(() {
                switchValue = value;
                print(switchValue);
              });
            },
            activeTrackColor: Colors.black,
            activeColor: Colors.red,
          ),
        )
    );
  }
}

Bir diğer Flutter içeriğimiz için tıklayın :

Flutter’da Sayfalar Arası Geçiş – Flutter Navigation