[Flutter] [UI]スライダーの作り方

Flutter学習中にスライダーを用いて、値を設定、入力をできるようなUIを作成したので共有します。

##イメージ
![スクリーンショット 2021-05-13 21.03.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682827/4f3a244d-e425-cf60-8649-8827af3695ca.png)

![スクリーンショット 2021-05-13 21.01.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682827/3d67f65d-1a5d-62b3-a325-53db0cfe92ab.png)



##コード全文
```dart:.dart
int height = 180;

cardChild: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'HEIGHT',
                      style: kLabelTextStyle,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.baseline,
                      textBaseline: TextBaseline.alphabetic,
                      children: [
                        Text(
                          height.toString(),
                          style: kNumberTextStyle,
                        ),
                        Text(
                          'cm',
                          style: kLabelTextStyle,
                        )
                      ],
                    ),
         SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        inactiveTrackColor: Color(0xFF8D8E98),
                        activeTrackColor: Colors.white,
                        thumbColor: Color(0xFFEB1555),
                        overlayColor: Color(0x19EB1555),
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 15),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 30),
                      ),
                      child: Slider(
                        value: height.toDouble(),
                        min: 120,
                        max: 220,
                        onChanged: (double newValue) {
                          setState(() {
                            height = newValue.round();
                          });
                        },
                      ),
                    ),

```

##スライダー本体
```dart:.dart
                      child: Slider(
                        value: height.toDouble(),
                        min: 120,
                        max: 220,
                        onChanged: (double newValue) {
                          setState(() {
                            height = newValue.round();
                          });
                        },
                      ),
                    ),

```
見た目の通り変化させる値、最大値最小値、スライダーが動かされたときの変化を設定します。

##デザイン
```dart:.dart
SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        inactiveTrackColor: Color(0xFF8D8E98),
                        activeTrackColor: Colors.white,
                        thumbColor: Color(0xFFEB1555),
                        overlayColor: Color(0x19EB1555),
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 15),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 30),
                      ),
```

SliderThemeData classに沿ってデザインをカスタムできます。



###参考
[公式ドキュメント](https://api.flutter.dev/flutter/material/SliderThemeData-class.html)
[Complete Flutter App Development Bootcamp with Dart](https://www.udemy.com/course/flutter-bootcamp-with-dart/)

###会社の紹介
私は現在、[株式会社ダイアログ](https://www.dialog-inc.com/)という物流×ITの会社に勤務しております。
様々な職種を募集しているので、[Wantedly](https://www.wantedly.com/companies/company_3244501)のページをご覧ください。