能否用Python代码在Flutter应用中展示图表？如何集成Matplotlib热力图？

完全可行，目前有两种主流的集成思路，分别适配不同场景需求：

方法一：后端生成热力图图片，前端请求展示 #

这种方式适合需要保留Matplotlib自定义热力图样式（比如专属配色、复杂标注）的场景，无需前端重新实现渲染逻辑。

Python后端实现（以FastAPI为例） #

用Matplotlib生成热力图后，将图片转为字节流通过API返回：

from fastapi import FastAPI, Response
import matplotlib.pyplot as plt
import numpy as np
from io import BytesIO

app = FastAPI()

@app.get("/heatmap")
def get_heatmap():
    # 生成示例热力图数据
    data = np.random.rand(10, 10)
    plt.imshow(data, cmap='viridis')
    plt.colorbar()
    
    # 将图片转为字节流
    img_bytes = BytesIO()
    plt.savefig(img_bytes, format='png')
    img_bytes.seek(0)
    plt.close()  # 释放资源
    
    return Response(content=img_bytes.getvalue(), media_type="image/png")

Flutter前端实现 #

通过HTTP请求获取图片字节流，直接渲染：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class HeatmapScreen extends StatefulWidget {
  @override
  _HeatmapScreenState createState() => _HeatmapScreenState();
}

class _HeatmapScreenState extends State<HeatmapScreen> {
  Uint8List? _imageBytes;

  @override
  void initState() {
    super.initState();
    _fetchHeatmap();
  }

  Future<void> _fetchHeatmap() async {
    final response = await http.get(Uri.parse('http://your-backend-url/heatmap'));
    if (response.statusCode == 200) {
      setState(() {
        _imageBytes = response.bodyBytes;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('热力图')),
      body: Center(
        child: _imageBytes != null 
            ? Image.memory(_imageBytes!) 
            : CircularProgressIndicator(),
      ),
    );
  }
}

方法二：后端返回原始数据，前端渲染热力图 #

这种方式适合需要前端交互（比如点击热力块查看详情、动态更新数据）的场景，前后端解耦更彻底。

Python后端实现 #

返回热力图所需的原始数据（二维数组、可选标签）：

from fastapi import FastAPI
import numpy as np

app = FastAPI()

@app.get("/heatmap-data")
def get_heatmap_data():
    data = np.random.rand(10, 10).tolist()
    return {
        "data": data,
        "x_labels": ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
        "y_labels": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
    }

Flutter前端实现 #

使用Flutter图表库（如fl_chart）渲染热力图：

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class HeatmapScreen extends StatefulWidget {
  @override
  _HeatmapScreenState createState() => _HeatmapScreenState();
}

class _HeatmapScreenState extends State<HeatmapScreen> {
  List<List<double>>? _heatmapData;
  List<String>? _xLabels;
  List<String>? _yLabels;

  @override
  void initState() {
    super.initState();
    _fetchData();
  }

  Future<void> _fetchData() async {
    final response = await http.get(Uri.parse('http://your-backend-url/heatmap-data'));
    if (response.statusCode == 200) {
      final jsonData = json.decode(response.body);
      setState(() {
        _heatmapData = (jsonData['data'] as List)
            .map((row) => (row as List).map((e) => e as double).toList())
            .toList();
        _xLabels = List<String>.from(jsonData['x_labels']);
        _yLabels = List<String>.from(jsonData['y_labels']);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('热力图')),
      body: _heatmapData != null
          ? Padding(
              padding: EdgeInsets.all(16),
              child: HeatMapChart(
                data: _heatmapData!,
                xLabels: _xLabels!,
                yLabels: _yLabels!,
                colorMapper: (value) {
                  // 自定义配色逻辑
                  return value > 0.7 ? Colors.red : value > 0.4 ? Colors.yellow : Colors.green;
                },
              ),
            )
          : CircularProgressIndicator(),
    );
  }
}

替代方案 #

如果上述集成方式不符合需求，可考虑以下替代方案：

• WebView嵌入：用Flutter的webview_flutter组件直接加载Python后端生成的包含热力图的网页（比如Flask渲染的HTML页面），适合快速整合但交互性要求不高的场景。
• Dart重写渲染逻辑：将Matplotlib的热力图生成逻辑用Dart实现，直接在Flutter端生成热力图，无需后端依赖，适合数据量小、无需复杂后端处理的场景。

内容的提问来源于stack exchange，提问作者MJay