Flutter SliderThemeData


简介

SliderTheme的data修饰属性 SliderThemeData

基本用法

配合SliderTheme, 修改slider组件各个部件的样式, 参照@Slider的各组件命名, 修改各部件样式

实例演示

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