interactive_viewer sample

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'InteractiveViewer Demo',
        home: const HomePage(),
        theme: ThemeData.dark(useMaterial3: true),
      );
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text(
            'InteractiveViewer Demo',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        body: InteractiveViewer(
          minScale: 0.1,
          maxScale: 100,
          boundaryMargin: const EdgeInsets.all(double.infinity),
          child: CustomPaint(
            painter: _Painter(),
            size: Size.infinite,
          ),
        ),
      );
}

class _Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 50pxごとに線を引く
    for (var i = 0.0; i < size.width; i += 50) {
      canvas.drawLine(
        Offset(i, 0),
        Offset(i, size.height),
        Paint()
          ..color = Colors.red
          ..strokeWidth = 1,
      );
      TextPainter(
        text: TextSpan(
          text: i.toInt().toString(),
          style: const TextStyle(
            color: Colors.white,
            fontSize: 15,
            fontWeight: FontWeight.bold,
          ),
        ),
        textDirection: TextDirection.ltr,
      )
        ..layout()
        ..paint(
          canvas,
          Offset(i, 0),
        );
    }
    for (var i = 0.0; i < size.height; i += 50) {
      canvas.drawLine(
        Offset(0, i),
        Offset(size.width, i),
        Paint()
          ..color = Colors.red
          ..strokeWidth = 1,
      );
      TextPainter(
        text: TextSpan(
          text: i.toInt().toString(),
          style: const TextStyle(
            color: Colors.white,
            fontSize: 15,
            fontWeight: FontWeight.bold,
          ),
        ),
        textDirection: TextDirection.ltr,
      )
        ..layout()
        ..paint(
          canvas,
          Offset(0, i),
        );
    }
  }

  @override
  bool shouldRepaint(covariant _Painter oldDelegate) => false;
}