Flutter 色盲检测器效果

本篇文章的起因是本来去appstore 搜索一个wps下载，然后碰巧看懂了这个色盲检测的应用，测试了一会，感觉自己是个色盲。本就在学习flutter的路上，所以打算仿写一个来用作学习。

先看一眼效果：

其实这个没有什么难点，都是很基本的操作，资源的获取是下载了原应用，里面有资源文件，直接拿来用了。本文章仅供学习使用。本篇文章主要介绍一下完成这个小组件的知识点

资源文件

在flutter的pubspec.yaml文件中，打开资源文件加载的语句就可以了

  assets:
    - lib/assets/images/
    - lib/assets/data.json

其中lib/assets/images/ 表示在images下的所有文件都加载. 作者是将资源文件放在lib文件夹里面了，这个因人而异吧。其中还有一个data.json文件，这个用来存储一些本地的资源信息。加载方式

Future getData() async {
    String jsonString = await rootBundle.loadString("lib/assets/data.json");
    final jsonResult = json.decode(jsonString);
    List<Map> data = new List();
    for (Map<String, dynamic> map in jsonResult) {
      data.add(map);
    }
}

如果需要加载不同分辨率的图片在通images文件加载，创建2.0x和3.0x就可以了，这样声明的时候需要加上

 assets:
    - lib/assets/images/
    - lib/assets/images/2.0x/
    - lib/assets/images/3.0x/

slider的使用

采用的分段的形式。这方面不多说了，看文档就知道了。

Slider(
              value: value,
              onChanged: (v) {
                setState(() => value = v);
              },
              label: "第${value.toInt()}题", //气泡的值
              divisions: 65, //进度条上显示多少个刻度点
              max: 66,
              min: 1,
            )

还有可以使用SliderTheme来自定义

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    activeTrackColor:  //进度条滑块左边颜色
    inactiveTrackColor: //进度条滑块右边颜色
    trackShape: //进度条形状,这边自定义两头显示圆角
    thumbColor:  //滑块颜色
    overlayColor:  //滑块拖拽时外圈的颜色
    overlayShape: // 可继承SliderComponentShape自定义形状,
    thumbShape: //可继承SliderComponentShape自定义形状,
    inactiveTickMarkColor:
    tickMarkShape: //继承SliderTickMarkShape可自定义刻度形状,
    showValueIndicator:ShowValueIndicator.onlyForDiscrete, //气泡显示的形式
    valueIndicatorColor: Colors.white, //气泡颜色
    valueIndicatorShape: PaddleSliderValueIndicatorShape(), //气泡形状
    valueIndicatorTextStyle: TextStyle(color: Colors.black), //气泡里值的风格
    trackHeight: 1 //进度条宽度
),

over～～～～