简介

用来更改Slider样式的上层部件

将滑块主题应用于后代Slider小部件。

基本用法

通过更改sliderTheme.data, 修改Slider总体样式

基本属性参考以下代码:

SliderTheme(
  data: SliderThemeData({
    @required Color activeTrackColor,
    @required Color inactiveTrackColor,
    @required Color disabledActiveTrackColor,
    @required Color disabledInactiveTrackColor,
    @required Color activeTickMarkColor,
    @required Color inactiveTickMarkColor,
    @required Color disabledActiveTickMarkColor,
    @required Color disabledInactiveTickMarkColor,
    @required Color thumbColor,
    @required Color disabledThumbColor,
    @required Color overlayColor,
    @required Color valueIndicatorColor,
    @required SliderComponentShape thumbShape,
    @required SliderComponentShape valueIndicatorShape,
    @required ShowValueIndicator showValueIndicator,
    @required TextStyle valueIndicatorTextStyle
  }),
  child: anyWidgetContain(Slider) // 用来包含slider的widget容器窗口
),

实例演示

import 'package:flutter/material.dart';


class SliderThemeDemo extends StatefulWidget {
  _SliderThemeDemo createState() => _SliderThemeDemo();
}

class _SliderThemeDemo extends State<SliderThemeDemo> {
  double value = 0.0;
  Widget build(BuildContext context) {
    return  Container(
      child:  SliderTheme(
        data: SliderTheme.of(context).copyWith(
//                activeTickMarkColor:Colors.yellowAccent,
          activeTrackColor: Colors.yellowAccent,//实际进度的颜色
//                inactiveTickMarkColor:Colors.black
          thumbColor: Colors.black,//滑块中心的颜色
          inactiveTrackColor:Colors.red,//默 认进度条的颜色
          valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
          valueIndicatorTextStyle:  TextStyle(//提示气泡里面文字的样式
            color: Colors.white,
          ),
          inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
          overlayColor: Colors.pink,//滑块边缘颜色
        ),
        child:  Container(
          width: 340.0,
          margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
          child:  Row(
            children: <Widget>[
               Text('0.0'),
               Expanded(
                flex: 1,
                child:  Slider(
                  value: value,
                  label: '$value',
                  divisions: 10,
                  onChanged: (double){
                    setState(() {
                      value=double.floorToDouble();//转化成double
                    });
                  },
                  min: 0.0,
                  max: 100.0,
                ),
              ),
               Text('100.0'),
            ],
          ),
        ),
      ),
    );
  }
}