Flutterのslider(スライダー/ゲージ/メモリバー)ライブラリならSfSliderが断然オススメすぎる

## Sliderって？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533351/a4fa3c07-5f10-8172-9916-02e427f1e1a9.png)
これです。
もちろん汎用的な機能はflutter純正のsliderウィジェットにも備わっているのですが、
「メモリをつけたい...」
「(文字等は反転させず)左右反転させたい...」
「選択する●に文字を表示させたい...」
などの要望を叶えてくれるのがこのSfSliderです

## ライブラリ
syncfusion_flutter_sliders
https://pub.dev/packages/syncfusion_flutter_sliders
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533351/3d6a6a02-710c-b61c-3b23-052d2be94834.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533351/8dac2962-9a42-8e5c-9558-5e77b9cb95de.png)
こんなデザインのSliderが一瞬で作れちゃいます

## やってみよう
```
dependencies:
~~
syncfusion_flutter_sliders: 
```
いつも通りpubspec.yamlのdependenciesに追加したら`pub get`をしましょう。
該当のviewのdartファイルで下記を読み込みで準備完了です。

```
import 'package:syncfusion_flutter_sliders/sliders.dart';
```


### スライダーを縦表示する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533351/9bd43906-c5a8-e597-5ccf-9fc937490e0a.png)

```
double _value = 0.5;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SfSlider.vertical(
        value: _value,
        onChanged: (dynamic newValue){
          setState(() {
            _value = newValue;
          });
        },
      ),
    ),
  );
}
```

### メモリをつける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533351/f24c4927-57ab-63f4-e4a7-febaabf2666f.png)


```
final double _min = 0;
final double _max = 100;
double _value = 40.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
            child: SfSlider(
              min: _min,
              max: _max,
              value: _value,
              interval: 20,
              showLabels: true,
              onChanged: (dynamic newValue) {
                setState(() {
                  _value = newValue;
                });
              },
            ),
          )
      )
  );
}
``` 

### メモリに線もつけちゃう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533351/89f19115-c0ba-be20-50d0-645b7e500c5d.png)


```
final double _min = 0;
final double _max = 100;
double _value = 40.0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SfSlider(
        min: _min,
        max: _max,
        value: _value,
        interval: 20,
        showTicks: true,
        showLabels: true,
        numberFormat: NumberFormat("\$"),
        onChanged: (dynamic newValue) {
          setState(() {
            _value = newValue;
          });
        },
      ),
    ),
  );
}
```

### ●ボタンにアイコンを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533351/428d44f2-c9b8-0e0f-763a-740f0d6e995a.png)

```
double _value = 6.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: SfSliderTheme(
            data: SfSliderThemeData(
              thumbColor: Colors.white,
              thumbRadius: 15,
              thumbStrokeWidth: 2,
              thumbStrokeColor: Colors.blue
            ),
            child: Center(
              child: SfSlider(
                min: 2.0,
                max: 10.0,
                interval: 1,
                thumbIcon: Icon(
                    Icons.arrow_forward_ios,
                    color: Colors.blue,
                    size: 20.0),
                showLabels: true,
                value: _value,
                onChanged: (dynamic newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            ),
          )
      )
  );
}
```

## 詳しくは...
より詳細な内容はドキュメントに記載があります
ドキュメントも非常に読みやすいので、ぜひSliderを使う際には触ってみてください

https://help.syncfusion.com/flutter/slider/overview