如何转换列表<dynamic>变成 Flutter 中的可视图像？</dynamic>

Question

sample.json 是一个包含 0 到 100 值列表的文件，在 header 下称为“读数”：

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

我正在尝试解析 sample.json 中的数据以提取“读数”数据并将其转换为图像。 “读数”中共有 1728 个 integer 个值，范围为 0 - 100。

我尝试生成的图像是 27 x 64 像素，使用 PixelFormat.rgba8888 进行颜色编码。 这是我到目前为止所拥有的：

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);
    });
}

打印（读数）； 返回 sample.json 中“读数”header 的值列表：

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

请注意，“readings”的值都是正整数，值范围从 0 到 100，但是变量 readings 是一个 List<dynamic>。

打印（像素）； 返回对应于列表读数内容的 ASCII 值列表：

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

我试过使用 decodeImageFromPixels function，但我不知道如何正确实现它，尤其是涉及到 ImageDecoderCallback 参数时。

我试过 Image.memory(pixles) 但我相信我需要以某种方式创建一种方法来将像素发送到 27x64 数组中。

披露：这是我在 Flutter 工作的第 5 天，我已经在这个问题上停留了 2 天。 这也是我第一次在 StackOverflow 上发帖。 我正处于不确定如何进行的地步。

Answer 1

你应该从这个开始。

我需要以某种方式创建一种将像素发送到 27x64 数组的方法。

你需要自己指定你想如何制作数组？ 是不是先填满一行，再开始填下一行？ 或者也许开始填写第一列？

所以基本上你需要将 1d 列表更改为 2d 列表，就像这里一样，或者只是像这里这样的嵌套循环。

然后使用二维数组，您可以使用flutter_echarts package 从数组的数据生成热图。

这不是一个简单的解决方案，但基本上我认为对您来说最好的办法是使用那个或寻找其他热图 flutter package。