the_paint/lib/src/widget/square.dart

import 'dart:async';

import 'dart:math';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:the_paint/src/generated/client.pbgrpc.dart';
import 'dart:ui' as ui;
import '../color_ref.dart';
import '../square/in_memory.dart';
import '../square/square.dart';

class SquareComponent extends StatefulWidget {
  final Point<int> tile;
  final ColorRef color;
  const SquareComponent({super.key, required this.tile, required this.color});

  @override
  SquareComponentState createState() => SquareComponentState();
}

class SquareComponentState extends State<SquareComponent> {
  late final SquereData __serverSquareData = InMemorySquereData(widget.tile);
  final Uint8List data = Uint8List(256 * 256 * 4);

  Future<ui.Image> _loadImage() async {
    final Completer<ui.Image> completer = Completer<ui.Image>();
    ui.decodeImageFromPixels(
      data,
      256,
      256,
      ui.PixelFormat.rgba8888,
      (ui.Image image) => completer.complete(image.clone()),
      allowUpscaling: false,
    );
    return completer.future;
  }

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTapDown: (details) {
          var point = Point<int>(
            details.localPosition.dx.floor(),
            details.localPosition.dy.floor(),
          );

          __serverSquareData.paint(point, widget.color.getColor());
        },
        child: Stack(children: [
          // Text(this.hashCode.toString()),
          FutureBuilder<ui.Image>(
            future: _loadImage(),
            builder: getImage,
          )
        ]));
  }

  Future<void> streamSub() async {
    await for (var event in __serverSquareData.getSteam()) {
      setState(() {
        storePoint(event);
      });
    }
  }

  void storePoint(MonitorReply dd) {
    BPoint? lastPosition;
    for (var point in dd.points) {
      lastPosition = point.point;
      var p = lastPosition;
      final startByte = (p.x + p.y * 256) * 4;

      for (int index in [0, 1, 2, 3]) {
        data[startByte + index] = point.color.rgba >> 8 * index & 0xff;
      }
    }
  }

  Widget getImage(BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
    if (snapshot.hasData) {
      var image = snapshot.data?.clone();
      // snapshot.data?.dispose();
      return RawImage(
        image: image,
        filterQuality: FilterQuality.none,
      );
    } else if (snapshot.hasError) {
      print('${snapshot.error}');
      return Text('${snapshot.error}');
    }
    // By default, show a loading spinner.
    return const CircularProgressIndicator();
  }

  @override
  void dispose() {
    super.dispose();
  }
}