[Flutter] Slider を動かす

FlutterのSliderは、AndroidではSeekBar、iOSではUISliderとかSliderと呼ばれるもので
ツマミを動かすボリュームのようなものです

Slider

Sliderのツマミを持って動かすとバーが伸び縮みする挙動で
setState() を使って値が逐次更新されるようにします

double thumb = 50;
...
Slider(
  value: _knobValue,
  max: 100,
  onChanged: (double value) {
    setState(() {
      thumb = value;
    });
  },
),

double thumb = 50;

...

Slider(

value: _knobValue,

max: 100,

onChanged: (double value) {

setState(() {

thumb = value;

});

Sliderとしては最低限
value, max, onChanged の設定が必要です

SizedBox の中に入れると、Sliderの横幅サイズを変更できます

SizedBox(
  width: 250,
  child: Slider(
    ...
  ),
),

SizedBox(

width: 250,

child: Slider(

...

250 x 50 のSizedBoxに入れたので横幅が調整されました

色を変更してみます

child: Slider(
  activeColor: Colors.redAccent,
  inactiveColor: const Color.fromARGB(255, 244, 196, 200),
  thumbColor: Colors.purple,
  ...
),

child: Slider(

activeColor: Colors.redAccent,

inactiveColor: const Color.fromARGB(255, 244, 196, 200),

thumbColor: Colors.purple,

...

activeColor：Sliderの選択範囲の色
inactiveColor：未選択範囲の色
thumbColor：ツマミの色

label を追加すると、ツマミ上に数値を表示させるようにできます
そのためには、min, max, division を追加する必要があります

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

Slider(

...,

value: thumb,

min: 0,

max: 100,

divisions: 20,

label: thumb.round().toString(),

onChanged: (double value) {

setState(() {

thumb = value;

});

labelはツマミを掴んだタイミングでその上に数値を表示します

Sliderが細いので太くしてみましょう
SliderTheme を使って trackHeight から設定します

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    trackHeight: 20.0,
  ),
  child: Slider(
    ...
  ),
),

SliderTheme(

data: SliderTheme.of(context).copyWith(

trackHeight: 20.0,

child: Slider(

...

Sliderが太くなりました

目次
1. サンプルコード
2. 実行結果

サンプルコード

まとめて
Sliderの数値をTextで表示させてみます

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TestSlider(),
    );
  }
}

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

  @override
  State<TestSlider> createState() => _TestSliderState();
}

class _TestSliderState extends State<TestSlider> {
  double thumb = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Slider')),
      body: Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget> [
          Text(
            '${thumb.round()}',
            style: const TextStyle(
              fontSize: 24.0,
            )
          ),
          SizedBox(
            width: 250,
            child: SliderTheme(
              data: SliderTheme.of(context).copyWith(
                trackHeight: 20.0,
              ),
            child: Slider(
              activeColor: Colors.redAccent,
              inactiveColor: const Color.fromARGB(255, 244, 196, 200),
              thumbColor: Colors.purple,
              value: thumb,
              min: 0,
              max: 100,
              divisions: 20,
              label: thumb.round().toString(),
              onChanged: (double value) {
                setState(() {
                  thumb = value;
                });
              },
            ),
            ),
          ),
        ],
      ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: TestSlider(),

);

}

class TestSlider extends StatefulWidget {

const TestSlider({super.key});

@override

State<TestSlider> createState() => _TestSliderState();

}

class _TestSliderState extends State<TestSlider> {

double thumb = 50;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text('Slider')),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget> [

Text(

'${thumb.round()}',

style: const TextStyle(

fontSize: 24.0,

)

SizedBox(

width: 250,

child: SliderTheme(

data: SliderTheme.of(context).copyWith(

trackHeight: 20.0,

child: Slider(

activeColor: Colors.redAccent,

inactiveColor: const Color.fromARGB(255, 244, 196, 200),

thumbColor: Colors.purple,

value: thumb,

min: 0,

max: 100,

divisions: 20,

label: thumb.round().toString(),

onChanged: (double value) {

setState(() {

thumb = value;

});

);

}

実行結果

実行させてみます

　
　
　
References;
Slider class
Slider constructor