FlutterのSliderの色設定を図にまとめた

指定した範囲から値を選ぶ Slider というWidgetを初めて使用した。

デフォルトはこんな感じ

このSliderの色をカスタマイズするとき、**何のプロパティがどこの色を変えられるのか？**がややこしかったので図にまとめた。

※分かりやすいように各部品に色を指定している

Sliderのコードは以下

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    trackHeight: 10,
    thumbColor: Colors.purpleAccent,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12),
    valueIndicatorColor: Colors.orange,
    overlayColor: Colors.orange.withAlpha(80),
    activeTrackColor: Colors.black,
    inactiveTrackColor: Colors.amber,
    inactiveTickMarkColor: Colors.blue,
    activeTickMarkColor: Colors.green,
  ),
  child: Slider(
    min: 0,
    max: 100,
    divisions: 10,
    value: _customSliderValue,
    label: '${_customSliderValue.floor()}',
    onChanged: (d) => setState(() {
      _customSliderValue = d;
    }),
  ),
)

上記のSliderTheme.of(context).copyWithの中身を、MaterialAppのsliderThemeにそのまま使うことができる。

SliderThemeDataのコード

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // スライダーのテーマ指定
        sliderTheme: SliderThemeData(
          trackHeight: 10,
          thumbColor: Colors.purpleAccent,
          thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12),
          valueIndicatorColor: Colors.orange,
          overlayColor: Colors.orange.withAlpha(80),
          activeTrackColor: Colors.black,
          inactiveTrackColor: Colors.amber,
          inactiveTickMarkColor: Colors.blue,
          activeTickMarkColor: Colors.green,
        ),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

使用したコードのgithub
https://github.com/ikemura23/flutter_lab/blob/slider/lib/main.dart