[Widget]スライダー(Slider)を使う
Flutterでスライダーを使いたいときは、Slider Widgetを使用します。
スライダーはユーザーに数値などの値を設定してもらうときに、より直感的な操作体験を提供してくれます。
ユーザーはスライダーのつまみを左右に動かして調整します。
早速コードを見ていきましょう。
import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override _MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> { double _sliderValue = 5.0; @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: const Text('サンプル'), ), body: Center( child: Padding( padding: const EdgeInsets.all(20.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('$_sliderValue'), Slider( value: _sliderValue, min: 0, max: 60, onChanged: (double value) { setState(() { _sliderValue = value; }); }, activeColor: Colors.green, // 「つまみ」より左側の色 inactiveColor: Colors.green.shade100, // 「つまみ」より右側の色 thumbColor: Colors.orange, // 「つまみ」の色 ), ], ), ), ), ), ); }}Sliderを配置し、設定を記載していきます。
以下のコードを見てください。
child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('$_sliderValue'), Slider( value: _sliderValue, min: 0, max: 60, onChanged: (double value) { setState(() { _sliderValue = value; }); }, activeColor: Colors.green, // 「つまみ」より左側の色 inactiveColor: Colors.green.shade100, // 「つまみ」より右側の色 thumbColor: Colors.orange, // 「つまみ」の色 ), ], ),30行目でSliderを配置しています。value:にはSliderとリンクさせる変数を指定します。
今回は_sliderValueとしました。
この変数の中身がユーザーの操作に応じて変化します。
ユーザーがスライダーのつまみを動かす度に34行目のonChanged:が実行されます。
そこで_sliderValueに操作後の値を設定し更新しているわけですね。setStateで囲むのを忘れないようにしましょう。min:とmax:にはSliderが取り得る値の最小値と最大値を指定しておきます。
また、Sliderの色味を変更することが可能です。
39行目から始まる3種類の配色設定を調整することでお好みの色味に変えることが可能です。
*「Run」を押すと実行できます。
さて、ここまでの設定だとSliderはかなり細かい単位まで調整可能な状態ですがアプリによってはそこまで細かく調整できるとかえって都合が悪いことがあります。
決まった単位(たとえば5ずつ増減できる)でSliderを操作するにはどうするかというとdivisions:というプロパティを指定します。
以下のようにすると、スライダー全体を5で割った単位でのみスライドできるようになります。max:が60なので、ひとつメモリで12ずつ変わっていくことになりますね。label:を指定すると、スライダーがドラッグしている間、ラベルが出現します。以下のように_sliderValueの値を入れておくと、現在の値が吹き出しとして出現し、ゆーざーからすると値が確認しやすくていいですね。
value: _sliderValue,
min: 0,
max: 60,
divisions: 5,
label: '$_sliderValue',divisions:を使ったパターンも以下のDartPadに掲載してみました。
最小値のmin:を0ではなくて5から始まるようにする試みも入れています。
その場合はdivisions:の指定に少し工夫が必要です。
まず、(60 ~/ 5)としているのはSliderのつまみを5ずつ動かすようにするためです。
この時点で全部で12に分かれることになりますが、最小値が0ではなくて、5から始まるため1を引いて(60 ~/ 5) - 1としています。
*「Run」を押すと実行できます。
