Flutter RangeSlider Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda RangeSlider widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Merhaba! Flutter’da RangeSlider widgeti, kullanıcının bir aralık seçmesine olanak tanıyan bir kaydırıcıdır. Bu widget, iki adet kaydırma çubuğu kullanarak bir minimum ve maksimum değer arasında bir aralık seçimine izin verir.

Bu makalede, Flutter’da RangeSlider widgeti hakkında daha fazla bilgi edinmenize yardımcı olacak ve ayrıca RangeSlider widgetini kullanarak nasıl kod yazacağınızı öğreneceksiniz.

RangeSlider Widgeti Özellikleri

RangeSlider widgetinin birçok özelliği vardır. Bazı önemli özellikler şunlardır:

• values: Seçilen minimum ve maksimum değerlerin belirlenmesine izin verir.
• min: Seçilebilecek minimum değeri belirler.
• max: Seçilebilecek maksimum değeri belirler.
• divisions: Kaydırıcıyı bölümlere ayırır ve bölüm numaralarını gösterir.
• labels: Kaydırıcının minimum ve maksimum değerlerinin etrafındaki etiketleri gösterir.
• onChanged: Kaydırıcının değeri değiştiğinde çağrılacak bir geri arama fonksiyonu belirler.

RangeSlider Widgeti Kullanımı

RangeSlider widgeti, Material Design stilinde görünür. Bu nedenle, MaterialApp widgeti içinde kullanılması önerilir.

İlk olarak, RangeSlider widgetini kullanabilmek için, dosya başına aşağıdaki import ifadelerini ekleyin:

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

Daha sonra, aşağıdaki kod parçasını kullanarak RangeSlider widgetini oluşturabilirsiniz:

RangeValues _currentRangeValues = const RangeValues(20, 60);

RangeSlider(
  values: _currentRangeValues,
  min: 0,
  max: 100,
  divisions: 5,
  labels: RangeLabels('${_currentRangeValues.start.round()}', '${_currentRangeValues.end.round()}'),
  onChanged: (RangeValues values) {
    setState(() => _currentRangeValues = values);
  },
)

Yukarıdaki kod parçasında, RangeSlider widgeti, _currentRangeValues adlı bir RangeValues değişkenine atanan minimum ve maksimum değerlerle oluşturulur. Bu değişken, onChanged geri arama fonksiyonunda güncellenir.

RangeSlider widgeti ayrıca, min ve max özellikleri ile belirlenen minimum ve maksimum değerleri, divisions özelliği ile kaç adımda bölüneceğini ve labels özelliği ile minimum ve maksimum değerlerin etrafındaki etiketleri belirler.

onChanged geri arama fonksiyonu, kaydırıcı değeri değiştiğinde çağrılır ve _currentRangeValues değişkeni güncellenir.

RangeSlider Widgeti Örnekleri

Aşağıda, RangeSlider widgetini kullanarak nasıl kod yazabileceği hakkında birkaç örnek bulunmaktadır:

Örnek 1: Basit bir RangeSlider

RangeValues _currentRangeValues = const RangeValues(0, 10);

RangeSlider(
  values: _currentRangeValues,
  min: 0,
  max: 20,
  onChanged: (RangeValues values) {
    setState(() =>_currentRangeValues = values);
  },
)

Bu örnekte, RangeSlider widgeti, minimum değeri 0, maksimum değeri 20 olan bir kaydırıcı oluşturur. Başlangıçta seçilen aralık 0 ile 10 arasındadır. onChanged geri arama fonksiyonu, kaydırıcının değeri değiştiğinde çağrılır ve seçilen aralığı günceller.

Örnek 2: Bölümlerle bir RangeSlider

RangeValues _currentRangeValues = const RangeValues(20, 80);

RangeSlider(
  values: _currentRangeValues,
  min: 0,
  max: 100,
  divisions: 5,
  onChanged: (RangeValues values) {
    setState(() =>_currentRangeValues = values);
  },
)

Bu örnekte, RangeSlider widgeti, minimum değeri 0, maksimum değeri 100 olan bir kaydırıcı oluşturur. Başlangıçta seçilen aralık 20 ile 80 arasındadır. divisions özelliği, kaydırıcının 5 adımda bölünmesine neden olur. onChanged geri arama fonksiyonu, kaydırıcının değeri değiştiğinde çağrılır ve seçilen aralığı günceller.

Örnek 3: Etiketleri olan bir RangeSlider

RangeValues _currentRangeValues = const RangeValues(30, 70);

RangeSlider(
  values: _currentRangeValues,
  min: 0,
  max: 100,
  divisions: 5,
  labels: RangeLabels('${_currentRangeValues.start.round()}%',  '${_currentRangeValues.end.round()}%'),
  onChanged: (RangeValues values) {
    setState(() =>_currentRangeValues = values);
  },
)

Bu örnekte, RangeSlider widgeti, minimum değeri 0, maksimum değeri 100 olan bir kaydırıcı oluşturur. Başlangıçta seçilen aralık 30 ile 70 arasındadır. labels özelliği, kaydırıcının minimum ve maksimum değerleri etrafındaki etiketleri belirler. onChanged geri arama fonksiyonu, kaydırıcının değeri değiştiğinde çağrılır ve seçilen aralığı günceller.

Sonuç

Bu makalede, Flutter’da RangeSlider widgeti hakkında bilgi edindiniz ve RangeSlider widgetini kullanarak nasıl kod yazacağınızı öğrendiniz. RangeSlider widgeti, kullanıcının bir aralık seçmesine olanak tanır ve birçok özellik sunar, bu nedenle Flutter uygulamalarınızda çok yönlü bir araç olarak kullanabilirsiniz.

Evet RangeSlider widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.