FlutterにおけるSliderウィジェットについて

FlutterにおけるSliderについて

概要

Sliderウィジェットとは、ユーザがバーをスライドして値を変更することができるウィジェットである。

以下にコード例を示す。

Slider(
	value: sliderValue,
	onChanged: (newValue){
		setState(() {
			_sliderValue = newValue;
		});
	},
	min: 0.0,
	max: 100.0,
	divisions: 100 //間隔が1になる
)

valueプロパティで現在の値を設定する。

onChangeプロパティでスライダーがユーザによって動かされたときの処理を記述する。
ここでは、onChange内でsetStateを使用して変更している。

minプロパティとmaxプロパティにはSliderの最小値と最大値を記述する。
型はdouble型である。

スタイル変更

Sliderのスタイル変更を行うには、SliderTheme内で定義を行う。
詳細なスタイルプロパティについてはコードブロック内に記述する。

以下にコード例を示す。

SliderTheme(
	data: SliderTheme.of(context).copyWith(
		// スライダーの軌道（トラック）のデザイン
		trackHeight: 2.0, // トラックの高さ
		activeTrackColor: Colors.white, // アクティブなトラックの色
		inactiveTrackColor: Theme.of(context).focusColor, // 非アクティブなトラックの色
		
		// スライダーのつまみ（サム）のデザイン
		thumbColor: const Color.fromARGB(255, 44, 232, 245), // つまみの色
		thumbShape: const RoundSliderThumbShape(
			enabledThumbRadius: 8.0
		), // つまみの形状
		
		overlayColor: Colors.blue, // オーバーレイの色
		overlayShape: const RoundSliderOverlayShape(
			overlayRadius: 20.0
		), // オーバーレイの形状
	),
	child: Slider(
		value: sliderValue,
		onChanged: (newValue){
			setState(() {
				_sliderValue = newValue;
			});
		},
		min: 0.0,
		max: 100.0,
	),
)