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

Sliderって？

これです。
もちろん汎用的な機能はflutter純正のsliderウィジェットにも備わっているのですが、
「メモリをつけたい...」
「(文字等は反転させず)左右反転させたい...」
「選択する●に文字を表示させたい...」
などの要望を叶えてくれるのがこのSfSliderです

ライブラリ

syncfusion_flutter_sliders
https://pub.dev/packages/syncfusion_flutter_sliders

こんなデザインのSliderが一瞬で作れちゃいます

やってみよう

dependencies:
~~
syncfusion_flutter_sliders: 

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

import 'package:syncfusion_flutter_sliders/sliders.dart';

スライダーを縦表示する

double _value = 0.5;

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

メモリをつける

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;
                });
              },
            ),
          )
      )
  );
}

メモリに線もつけちゃう

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;
          });
        },
      ),
    ),
  );
}

●ボタンにアイコンを入れる

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を使う際には触ってみてください