Flutter: Sliderのシンプルな実装

必要最低限のSliderの実装方法です。
物覚えが悪いので備忘録として残しておきます。

####Flutterバージョン

Flutter 2.3.0-17.0.pre.366 

##実装するだけなら
実装するだけなら必須プロパティであるvalueに値、onChangedにスライドをいじったときの処理を書きます。onChangedには変更された値が保持されてるのでその値を使って変数の値を上書きしたりできます。

以下の例はColumnを設置し、その中にSliderの値を表示するTextとSliderを入れています。

class _MyHomePageState extends State<MyHomePage> {
  double _number = 1.0;  // 表示する値

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '${_number.toStringAsFixed(2)}',  // Sliderの値を表示
            style: TextStyle(fontSize: 30.0),
          ),
          Slider(
            value: _number,   // 値を指定
            onChanged: (value) {  // 変更した値を代入
              setState(() {
                _number = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

Textの値にtoStringAsFixed(2)というメソッドを追加して下2桁まで表示させてます。
表示するときは整数化したり表示させたい小数点の指定をしましょう。
そのまま表示すると小数点以下の数字がすごく長くなってしまいます。

値の最小値と最大値を指定するときは、プロパティminとmaxを指定します。

class _MyHomePageState extends State<MyHomePage> {
  double _season = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            '${_season.toInt()}',
            style: TextStyle(fontSize: 30.0),
          ),
          Slider(
            value: _season,
            min: 1,
            max: 20,
            onChanged: (value) {
              setState(() {
                _season = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

##SliderThemeで装飾する
SliderThemeを使用することで簡単に装飾ができます。プロパティdataにSliderTheme.of(context).copyWithを定義しいじりたい箇所を指定します。

SliderTheme(
            data: SliderTheme.of(context).copyWith(
              activeTrackColor: Colors.green, // 適用されてる領域
              inactiveTrackColor: Colors.grey, // 適用されていない領域
              trackHeight: 10.0, // スライダーの幅
              thumbColor: Colors.red, // つまみの色
              overlayColor: Colors.blue, // つまみを掴んだ時に広がる領域の色
              thumbShape: const RoundSliderThumbShape(
                  enabledThumbRadius: 15.0), // つまみの大きさ
              overlayShape: const RoundSliderOverlayShape(
                  overlayRadius: 30.0), // つまみを掴んだ時に広がる領域の大きさ
            ),
            child: Slider(...

直観的に把握するためするため色を派手にしております。