The reason for this article is that I went to the appstore to search for a WPS download, and then happened to understand the app for color blindness detection. After testing it for a while, I felt that I was color blind. Ben is on his way to learn flutter, so he decided to copy one for learning.

Take a look at the results:

In fact, this is not what difficult, are very basic operations, the acquisition of resources is to download the original application, there are resource files, directly used. This article is for learning purposes only. This article mainly introduces the knowledge point to complete this small piece

Resource file

In the flutter pubspec.yaml file, open the resource file load statement

  assets:
    - lib/assets/images/
    - lib/assets/data.json
Copy the code

Lib /assets/images/ indicates that all files under images are loaded. The author put the resource files in the lib folder. This varies from person to person. There is also a data.json file, which stores some local resource information. Loading way

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

If you need to load images in different resolutions before the images file is loaded, you can create 2.0x and 3.0x

 assets:
    - lib/assets/images/
    - lib/assets/images/2.0x/
    - lib/assets/images/3.0x/
Copy the code

The use of the slider

In the form of sections. I don’t have to say more about this, but you can read the documentation.

Slider(
              value: value,
              onChanged: (v) {
                setState(() => value = v);
              },
              label: "The first${value.toInt()}The topic".// The bubble value
              divisions: 65.// How many scale points are displayed on the progress bar
              max: 66,
              min: 1.)Copy the code

You can also customize using a SliderTheme

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    activeTrackColor:  // Progress bar slider left color
    inactiveTrackColor: // Progress bar slider right color
    trackShape: // Progress bar shape, custom two ends show rounded corners
    thumbColor:  // Slider color
    overlayColor:  // The color of the outer ring when the slider is dragged
    overlayShape: // Can inherit SliderComponentShape custom shape,
    thumbShape: // Can inherit SliderComponentShape custom shape,
    inactiveTickMarkColor:
    tickMarkShape: // Inherit SliderTickMarkShape,
    showValueIndicator:ShowValueIndicator.onlyForDiscrete, // The form of the bubble display
    valueIndicatorColor: Colors.white, // Bubble color
    valueIndicatorShape: PaddleSliderValueIndicatorShape(), // Bubble shape
    valueIndicatorTextStyle: TextStyle(color: Colors.black), // The style of the value in the bubble
    trackHeight: 1 // Progress bar width
),
Copy the code

Over ～～～～