FlutterのRangeSlider
ウィジェットの用途と使い方のまとめ記事です。
本記事ではRangeSlider
のサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説していきます。
目次
RangeSliderとは?
RangeSlider
は2つのツマミを使用して値の範囲を指定できるスライダーです。
1つのツマミのスライダーを実装する場合はSlider
を使用します。
【Flutter】Sliderの使い方|スライダーを左右に移動させて数値を選択
FlutterのSliderウィジェットの用途と使い方のまとめ記事です。本記事ではSliderのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説して…
RangeSliderの基本的な使い方
RangeSlider
の基本形は下のサンプルコードをご覧ください。values
の引数には RangeValues(低い値の初期値, 高い値の初期値)
として定義した変数を渡します。このRangeValues
で指定した範囲の値がスライダーの初期値となります。
min
でスライダーの最小値、max
でスライダーの最大値を指定し、onChanged
で変数の値を更新します。
var _values = const RangeValues(20, 80);
RangeSlider(
values: _values,
min: 0,
max: 100,
onChanged: (values) {
setState(() {
_values = values;
});
},
)
RangeSliderで知っておきたい基本プロパティ
スクロールできます
プロパティ名 | 説明 |
---|---|
divisions | スライダーの数値の区切りを生成 |
labels | スライダーの現在の数値を表示 |
activeColor | スライダーのアクティブ箇所の背景色を指定 |
inactiveColor | スライダーの非アクティブ箇所の背景色を指定 |
divisions:スライダーの数値の区切りを生成
divisions
の引数にint型の数値を渡して、スライダーの区切りの数を指定できます。
Slider(
value: _values,
min: 0,
max: 100,
divisions: 10,
onChanged: (values) {
setState(() {
_values = values;
});
},
)
labels:スライダーの現在の数値を表示
labels
はdivisions
と一緒に使用され、生成した区切りの箇所にスライダーをドラッグした際に表示されるラベルを指定できます。labels
にはRangeLabels()
を渡し、第一引数には変数.start.round().toString()
、第二引数には変数.end.round().toString()
を渡します。(変数
はvalues
の変数です)
RangeSlider(
values: _values,
min: 0,
max: 100,
divisions: 10,
labels: RangeLabels(
_values.start.round().toString(),
_values.end.round().toString(),
),
onChanged: (values) {
setState(() {
_values = values;
});
},
)
activeColor:スライダーのアクティブ箇所の背景色を指定
activeColor
の引数にColor
を渡してスライダーのアクティブ箇所の背景色を指定できます。
RangeSlider(
values: _values,
min: 0,
max: 100,
activeColor: Colors.amber,
onChanged: (values) {
setState(() {
_values = values;
});
},
)
アウトプット(左側)
inactiveColor:スライダーの非アクティブ箇所の背景色を指定
inactiveColor
の引数にColor
を渡してスライダーの非アクティブ箇所の背景色を指定できます。
RangeSlider(
values: _values,
min: 0,
max: 100,
inactiveColor: Colors.amber,
onChanged: (values) {
setState(() {
_values = values;
});
},
)
アウトプット(左側)
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Flutter')),
body: const RangeSliderExample(),
),
);
}
}
class RangeSliderExample extends StatefulWidget {
const RangeSliderExample({super.key});
@override
State<RangeSliderExample> createState() => _RangeSliderExampleState();
}
class _RangeSliderExampleState extends State<RangeSliderExample> {
RangeValues _values = const RangeValues(20, 80);
@override
Widget build(BuildContext context) {
return RangeSlider(
values: _values,
min: 0,
max: 100,
divisions: 10,
labels: RangeLabels(
_values.start.round().toString(),
_values.end.round().toString(),
),
onChanged: (values) {
setState(() {
_values = values;
});
},
);
}
}
合わせて読みたい
【Flutter】CheckBoxの使い方|チェックボックスを実装
FlutterのCheckBoxウィジェットの用途と使い方のまとめ記事です。本記事ではCheckBoxのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説…
【Flutter】CheckboxListTileの使い方|ラベル付きチェックボックスを実装
FlutterのCheckboxListTileウィジェットの用途と使い方のまとめ記事です。本記事ではCheckboxListTileのサンプルコードを使いながら基本的な使い方、知っておきたい基本…
【Flutter】Radioの使い方|ラジオボタン(オプションボタン)を実装
FlutterのRadioウィジェットの用途と使い方のまとめ記事です。本記事ではRadioのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説してい…
参考サイト
- https://api.flutter.dev/flutter/material/RangeSlider-class.html
- https://www.youtube.com/watch?v=KPxq3SLjg98&ab_channel=HeyFlutter%E2%80%A4com