【Flutter】Sliderの使い方｜スライダーを左右に移動させて数値を選択

2023年7月21日

FlutterのSliderウィジェットの用途と使い方のまとめ記事です。

本記事ではSliderのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説していきます。

Sliderとは？

Sliderはスライダーのスライドバーを左右に移動させて数値を選択できるウィジェットです。

Sliderの基本的な使い方

Sliderの基本形は下のサンプルコードをご覧ください。

valueの引数にはdouble型の変数を渡し初期値を指定します。minでスライダーの最小値、maxでスライダーの最大値を指定し、onChangedでvalueに渡した変数の値を更新します。

double _value = 50;

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

Sliderで知っておきたい基本プロパティ

スクロールできます

プロパティ名	説明
divisions	スライダーの数値の区切りを生成
label	スライダーの現在の数値を表示
activeColor	スライダーのアクティブ箇所の背景色を指定
inactiveColor	スライダーの非アクティブ箇所の背景色を指定
thumbColor	スライダーのツマミの色を指定

divisions：スライダーの数値の区切りを生成

divisionsの引数にint型の数値を渡して、スライダーの区切りの数を指定できます。

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

label：スライダーの現在の数値を表示

labelはdivisionsと一緒に使用されます。

divisionsで生成した区切りの箇所にスライダーをドラッグした際に、表示されるラベルをlabelで指定できます。

Slider(
  value: _value,
  min: 0,
  max: 100,
  divisions: 10,
  label: _value.round().toString(),
  onChanged: (value) {
    setState(() {
      _value = value;
    });
  },
)

activeColor：スライダーのアクティブ箇所の背景色を指定

activeColorの引数にColorを渡してスライダーのアクティブ箇所の背景色を指定できます。

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

アウトプット（左側）

inactiveColor：スライダーの非アクティブ箇所の背景色を指定

inactiveColorの引数にColorを渡してスライダーの非アクティブ箇所の背景色を指定できます。

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

アウトプット（左側）

thumbColor：スライダーのツマミの色を指定

thumbColorの引数にColorを渡してスライダーのツマミの色を指定できます。

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

アウトプット（左側）

サンプルコード

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(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: const CheckboxListTileExample(),
      ),
    );
  }
}

class CheckboxListTileExample extends StatefulWidget {
  const CheckboxListTileExample({super.key});

  @override
  State<CheckboxListTileExample> createState() =>
      _CheckboxListTileExampleState();
}

class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
  var _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CheckboxListTile(
        title: Text('This is CheckboxListTile'),
        subtitle: Text('This is subtitle'),
        activeColor: Colors.amber,
        controlAffinity: ListTileControlAffinity.leading,
        value: _isChecked,
        onChanged: (newValue) {
          setState(() {
            _isChecked = newValue!;
          });
        },
      ),
    );
  }
}