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 {
  Point<int> tile;
  ColorRef color;
  SquareComponent(this.tile, this.color, {Key? key}) : super(key: key);

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

class SquareComponentState extends State<SquareComponent> {
  // late ResponseStream<MonitorReply> responses;
  late final SquereData __serverSquareData;
  bool __updated = false;
  ui.Image? img;
  Uint8List data = Uint8List(256 * 256 * 4);

  void renderImage() {
    ui.decodeImageFromPixels(data, 256, 256, ui.PixelFormat.rgba8888, setImg,
        allowUpscaling: false);
  }

  void setImg(ui.Image data) {
    if (mounted) {
      setState(() {
        img = data;
      });
    }
  }

  @override
  void initState() {
    __serverSquareData = InMemorySquereData(widget.tile);
    loadPoints();
    super.initState();
  }

  Future<void> loadPoints() async {
    // TODO: only update the image if the last update hapenned in less than 200ms
    await for (var value in __serverSquareData.getSteam()) {
      BPoint? lastPosition;
      for (var point in value.points) {
        lastPosition = point.point;
        var p = lastPosition;
        final startByte = (p.x + p.y * 256) * 4;
        List.generate(
            4,
            (index) =>
                data[startByte + index] = point.color.rgba >> 8 * index & 0xff);
      }
      renderImage();
    }
  }

  @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: RawImage(
        image: img,
        filterQuality: FilterQuality.none,
      ),
    );
  }

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