【Flutter開発の核となるマテリアルデザイン】スイッチ・スライダー・チップコンポーネントを紹介

class _SwitchWidget extends State<SwitchWidget> {

  // （1） 選択済みの値を保存する変数
  List _switchValues = [false,false];

  @override
  Widget build(BuildContext context) {
    return Container(
      // : （省略）
      child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           // （2） 主な利用方法
           ListTile(
             title : Text('Value 1'),
             trailing: createSwitch(0),
           ),
         // : （省略）
         ])
    );
  }
  Switch createSwitch(int index){
    return Switch(
    　// （3） 現在のOF/OFF状態
      value: _switchValues[index],
      // （4） 値が変わった時
      onChanged: (bool? value) {
        setState(() {
          _switchValues[index] = value;
        });
      },
    );
  }

  Switch createDisableSwitch(bool checked){
    return Switch(
      value: checked,
      // （5） 利用できないコンポーネント
      onChanged: null,
    );
  }
}

class _SliderWidget extends State<SliderWidget> {

  // （1） 選択済みの値を保存する変数
  double _value1 = 10;
  double _value2 = 10;
  RangeValues _value3 = RangeValues(10,20);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
          children: [
            createSample1(context),
            Text('value1 : ${_value1}'),
            // : （省略）
          ])
    );
  }

  Slider createSample1(BuildContext context){
    // （2） シンプルな使い方
    return Slider(
      // （3） 現在の値
      value : _value1,
      // （4） 設定できる最小値と最大値
      min : 0,
      max : 100,
      // （5） 値が変わった時に処理
      onChanged: (value){
        setState(() {
          _value1 = value.round().toDouble();
        });
      },
    );
  }

  Slider createSample2(BuildContext context){
    return Slider(
      value : _value2,
      min : 0,
      max : 100,
      // （6） 選択している時の値の表示ラベル
      label: _value2.round().toString(),
      // （7） 値のステップ数
      divisions: 20,
      // （8） 色の変更
      inactiveColor: Colors.black12,
      activeColor: Colors.red,
      onChanged: (value){
        setState(() {
          _value2 = value.round().toDouble();
        });
      },
    );
  }

  RangeSlider createSample3(BuildContext context){
    // （8） 値のレンジ指定
    return RangeSlider(
      values : _value3,
      min : 0,
      max : 100,
      // （9） 表示ラベル
      labels: RangeLabels(
        _value3.start.round().toString(),
        _value3.end.round().toString()
      ),
      divisions: 20,
      onChanged: (value){
        setState(() {
          // （10） 値の設定
          _value3 = RangeValues(
              value.start.round().toDouble(),
              value.end.round().toDouble());
        });
      },
    );
  }
}