Flutter 色盲檢測器效果

一天清晨發表於2021-03-29
Flutter

本篇文章的起因是本來去appstore 搜尋一個wps下載，然後碰巧看懂了這個色盲檢測的應用，測試了一會，感覺自己是個色盲。本就在學習flutter的路上，所以打算仿寫一個來用作學習。

先看一眼效果：

tutieshi_640x1343_5s.gif

其實這個沒有什麼難點，都是很基本的操作，資源的獲取是下載了原應用，裡面有資原始檔，直接拿來用了。本文章僅供學習使用。本篇文章主要介紹一下完成這個小元件的知識點

資原始檔

在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～～～～

相關文章