【Flutter】RangeSliderの使い方｜値の範囲を指定するレンジスライダー

2023年7月21日

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;
        });
      },
    );
  }
}