Flutter Slider Class Kullanımı

Flutter Slider Nedir?

Flutter’da bir “slider,” kullanıcıya bir değer aralığını seçme veya ayarlama imkanı sunan bir grafiksel arayüz öğesidir. Slider, kullanıcının parmağıyla kaydırarak bir minimum ve maksimum değer aralığını belirleyebileceği bir sürükleme çubuğu olarak tasvir edilebilir. Kullanıcılar, bu slider’ı kullanarak belirli bir değeri seçebilir veya ayarlayabilirler.

Sliderlar genellikle uygulamalarda sayısal değerlerin seçimi veya aralık ayarlamaları için kullanılır. Örneğin, bir ses düzeyi ayarı yapmak veya bir renk seçmek için sliderlar kullanılabilir. Flutter, bu tür kullanıcı etkileşimlerini kolayca uygulamak için Slider widget’ını sağlar ve geliştiricilere slider’ın görünümünü ve davranışını özelleştirmek için çeşitli seçenekler sunar. Bu sayede uygulama geliştiricileri, kullanıcıların veri girişi veya ayarlarını kolayca yapmalarını sağlamak için slider’ları kullanabilirler.

Flutter Slider’ın Temel İşlevi

Slider, kullanıcının ekran üzerindeki sürükleme çubuğunu kaydırarak bir minimum ve maksimum değer aralığını seçmesine olanak tanır. Özellikle sayısal girişlerin yapıldığı veya belirli bir aralığın ayarlandığı senaryolarda oldukça kullanışlıdır. Ses düzeyi ayarlarından renk seçimine kadar birçok farklı uygulama alanında tercih edilir.

Flutter’da herhangi bir stilden yoksun bir slider örneği aşağıdaki gibidir ;

Slider(
      min: 0,
      max: 100,
      value: _value,
      onChanged: (value) {
        setState(() {
          _value = value;
        });
      },
    ),

Bu örnekte düz bir slider örneği verilmiştir. min 0 yazan değer , slider’ın başlangıç değeri , max ise bitiş değeridir. Yani Flutter Slider ‘ı 0 ile 100 arasında bir değer alabilir. Value , slider’ın değerini temsil eder. onChanged metodu ile yeni bir değer atanır. onChanged metodunun içine setState fonksiyonu konulması zaruridir yoksa değişiklikler anlık olarak yansımayabilir.

Örnek bir Flutter Slider örneği yukarıda verilmiştir. Yukarıdaki sliderın kodları aşağıdaki gibidir :

Slider(
                      value: height.toDouble(),
                      min: 120.0,
                      max: 220.0,
                      activeColor: Color(0xFFEB1555),
                      inactiveColor: Color(0xFF8D8E98),
                      onChanged: (double newValue) {
                        setState(() {
                          height = newValue.round();
                        });
                      }),

Yukarıdaki örnekte , activeColor , Flutter Slider’ın seçili olduğu kısıma kadar olanki kısımdır. Inactive olan kısım ise seçili olmayan bölgenin rengini temsil eder. Yukarıdaki örnekte height yani uzunluk yukarıda Integer olarak tanımlanmış ve default value olarak 160 verilmiştir.

Flutter Slider Widget’ını görsel açıdan geliştirmek isterseniz SliderTheme Widget’ini kullanmalısınız. Aşağıda SliderTheme ile ilgili bir örnek verilmiştir.

SliderTheme(
      data: SliderTheme.of(context).copyWith(
        activeTrackColor: Colors.red[700],
        inactiveTrackColor: Colors.red[100],
        trackShape: RectangularSliderTrackShape(),
        trackHeight: 4.0,
        thumbColor: Colors.redAccent,
        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
        overlayColor: Colors.red.withAlpha(32),
        overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
      ),
      child: Slider(
        value: _value,
        onChanged: (value) {
          setState(() {
            _value = value;
          });
        },
      ),
    ),

Flutter Slider’ın Kullanım Alanları

Flutter Slider, aşağıdaki gibi çeşitli kullanım alanlarına sahiptir:

1. Ses Kontrolleri: Ses seviyelerini ayarlamak için kullanıcı dostu bir yol sunar.
2. Renk Seçimleri: Kullanıcıların renk paletlerinden renk seçmelerini sağlar.
3. Ayarlar: Uygulama ayarlarını kişiselleştirmek için kullanılabilir.
4. Sayısal Değer Seçimi: Kullanıcıların belirli bir sayıyı seçmelerini veya ayarlamalarını kolaylaştırır.