Flutter组件-Slider-SliderTheme-滑块主题

防采集标记：亢少军老师的课程和资料

SliderTheme效果图

示例代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'SliderTheme组件',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('SliderTheme组件'),
        ),
        body: Center(child: DemoPage(),),
      ),
    );
  }
}

class DemoPage extends StatefulWidget {

  const DemoPage({Key key}) : super(key: key);

  @override
  DemoPageState createState() => DemoPageState();
}

class DemoPageState extends State<DemoPage> {

  double value = 0.0;

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        //已拖动的颜色
        activeTrackColor: Colors.greenAccent,
        //未拖动的颜色
        inactiveTrackColor: Colors.green,

        //提示进度的气泡的背景色
        valueIndicatorColor: Colors.green,
        //提示进度的气泡文本的颜色
        valueIndicatorTextStyle: TextStyle(
          color:Colors.white,
        ),

        //滑块中心的颜色
        thumbColor: Colors.blueAccent,
        //滑块边缘的颜色
        overlayColor: Colors.white,

        //divisions对进度线分割后，断续线中间间隔的颜色
        inactiveTickMarkColor: Colors.white,

      ),
      child: Slider(
        value: value,
        label: '$value',
        min: 0.0,
        max: 100.0,
        divisions: 10,
        onChanged: (val){
          setState(() {
            value = val.floorToDouble();//转化成double
          });
        },
      ),
    );
  }
}

《Flutter技术入门与实战》 技术图书查看地址: http://product.dangdang.com/26485813.html
Flutter交流学习群：894109159
Flutter开源项目请关注: https://github.com/kangshaojun
Flutter视频教程：https://edu.csdn.net/lecturer/2436