How do I convert a List<dynamic> into a viewable image in Flutter?

Question

sample.json is a file containing a list of values from 0 to 100 under a header called "readings":

[
    {
        "id": 105399,
        "time": "2022-11-22 01:25:23.920",
        "readings": [
            [
                0,
                2,
                3,
                2,
                ...
            ]
        ]
    }
]

I am trying to parse the data in sample.json to extract the "readings" data and convert it into an image. There are a total of 1728 integer values in "readings" ranging from 0 - 100.

The image I am trying to generate is 27 x 64 pixels using PixelFormat.rgba8888 for color coding. Here's what I have so far:

class _DemoState extends State<Demo> {

  Uint8List convertStringToUint8List(String str) {
    final List<int> codeUnits = str.codeUnits;
    final Uint8List uint8List = Uint8List.fromList(codeUnits);
    return uint8List;
  }

fetchFileData() async {
    String response;
    responseText = await rootBundle.loadString('assets/sample.json');

    setState(() {
        List raw = jsonDecode(responseText) as List;
        List readings = (raw[0]['readings']);
        Uint8List pixels = convertStringToUint8List(readingsStr);
        
        print(readings);
        print(pixels);
    });
}

print(readings); returns the List of values from the "readings" header in sample.json:

[0, 2, 3, 2, 1, ...]

Note that the values for "readings" are all positive integers with values ranging from 0 to 100, however the variable readings is a List<dynamic>.

print(pixels); returns a List of ASCII values corresponding to the contents of List readings:

[91, 48, 44, 32, 50, 44, 32, 51, 44, 32, 50, 44, 32, 49, 44, ...]

I've tried using the decodeImageFromPixels function, but I don't know how to implement it properly, especially when it comes to the ImageDecoderCallback argument.

I have tried Image.memory(pixles) but I believe I need to somehow create a method to send the pixels into a 27x64 array.

Disclosure: it's my 5th day working in Flutter and I have been stuck on this one problem for 2 days. This is also my first time posting to StackOverflow. I am at a point where I am unsure how to proceed.

Answer 1

You should start with this.

I need to somehow create a method to send the pixels into a 27x64 array.

You need to specify yourself how do you want to make the array? Is it first fill one row, and then start filling the next one? or maybe start filling the first column?

So basically you would need to change a 1d list to a 2d list, like here or just by nested loops like here.

Then with a 2d array, you can use a flutter_echarts package to generate a heatmap from the array's data.

It's not an easy solution, but basically i think the best thing for you is to use that one or look for some other heatmap flutter package.