Масштабируемая графика / диаграмма Flutter

Question

Я пытаюсь создать ... вещь. Это вертикальная ось с метками, показывающими высоту известных зданий, гор и т. Д. c.

Контейнер должен иметь фиксированную высоту, но сама «диаграмма» должна масштабироваться внутри контейнера, чтобы вы могли уменьшить масштаб. чтобы просмотреть все или до выбранной точки.

Кажется, я не могу найти никаких руководств по созданию пользовательских диаграмм, настройке систем координат и т.д. c и увеличению и уменьшению масштаба, и я даже не уверен, что custompainter - лучший способ go .

РЕДАКТИРОВАТЬ: После комментария ниже у меня теперь есть следующее.

ScreenCap: Gif текущего состояния

Проблемы: только Y ось должна увеличиться, точки должны остаться того же размера. т.е. точки расходятся дальше друг от друга, но не масштабируются.

Я думаю, мне нужно использовать преобразование, а не масштабирование, но я не знаю, как это сделать (математика преобразований меня чертовски сбивает с толку).

Код:

  class _TotalHeightGraphState extends State<TotalHeightGraph> {
      @override
      Widget build(BuildContext context) {
        return Container(
            height: 300,
            color: Colors.white,
            padding: EdgeInsets.all(16),
            child: Transform.scale(
              scale: -1, //transform: Matrix4.diagonal3Values(1, 1, 1.0),
              child: ZoomableWidget(
                child: Container(
                  color: Colors.amber,
                  child: CustomPaint(
                    painter: MountainAxis(),
                  ),
                ),
              ),
            ));
      }
    }

class MountainAxis extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final pointStyle = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.red;

    canvas.drawCircle(Offset(0, 0), 5, pointStyle);
    canvas.drawCircle(Offset(0, 50), 5, pointStyle);
    canvas.drawCircle(Offset(0, 100), 5, pointStyle);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return null;
  }
}

class ZoomableWidget extends StatefulWidget {
  final Widget child;

  const ZoomableWidget({Key key, this.child}) : super(key: key);
  @override
  _ZoomableWidgetState createState() => _ZoomableWidgetState();
}
class _ZoomableWidgetState extends State<ZoomableWidget> {
  Matrix4 matrix = Matrix4.identity();

  @override
  Widget build(BuildContext context) {
    return MatrixGestureDetector(
      shouldRotate: false,
      shouldTranslate: false,
      focalPointAlignment: Alignment.topLeft,
      onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
        setState(() {
          matrix = m;
        });
      },
      child: Transform(
        transform: matrix,
        child: widget.child,
      ),
    );
  }
}