import 'package:flutter/material.dart';
class LearnSlider extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new _LearnSlider();
  }
}
class _LearnSlider extends State<LearnSlider>{
  double progressValue=0.0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Container(
            child:new Slider(
              value: progressValue,//實際進度的位置
              inactiveColor: Colors.black12,//進度中不活動部分的顏色
              label: '$progressValue',
              min: 0.0,
              max: 100.0,
              divisions: 1000,
              activeColor: Colors.blue,//進度中活動部分的顏色
              onChangeStart: (double){
                print('888888888888onChangeStart888888888888888');
              },
              onChangeEnd:(double){
                print('9999999999999999onChangeEnd99999999999999999999');
              } ,
              onChanged: (double){
                setState(() {
                  progressValue=double.roundToDouble();
                });
              },
            ),
            width: 300.0,
          ),
          new 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: new TextStyle(//提示氣泡里面文字的樣式
                  color: Colors.white,
                ),
                inactiveTickMarkColor:Colors.blue,//divisions對進度線分割后 斷續(xù)線中間間隔的顏色
                overlayColor: Colors.pink,//滑塊邊緣顏色
              ),
              child: new Container(
                width: 340.0,
                margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
                child: new Row(
                  children: <Widget>[
                    new Text('0.0'),
                    new Expanded(
                      flex: 1,
                        child: new Slider(
                          value: progressValue,
                          label: '$progressValue',
                          divisions: 10,
                          onChanged: (double){
                            setState(() {
                              progressValue=double.floorToDouble();//轉化成double
                            });
                          },
                          min: 0.0,
                          max: 100.0,
                        ),
                    ),
                    new Text('100.0'),
                  ],
                ),
              ),
          ),
        ],
      ),
    );
  }
}