[flutter] More dress up example work

spine-flutter/example/lib/dress_up.dart

@@ -2,6 +2,7 @@ import 'dart:ui' as ui;
 
 import 'package:flutter/material.dart';
 import 'package:spine_flutter/spine_flutter.dart';
+import 'package:flutter/rendering.dart' as rendering;
 
 class DressUp extends StatefulWidget {
   const DressUp({Key? key}) : super(key: key);
@@ -20,12 +21,25 @@ class DressUpState extends State<DressUp> {
     super.initState();
     SkeletonDrawable.fromAsset("assets/mix-and-match-pro.skel", "assets/mix-and-match.atlas").then((drawable) async {
       for (var skin in drawable.skeletonData.getSkins()) {
+        //if (skin.getName() == "default") continue;
+
+        var skeleton = drawable.skeleton;
+        skeleton.setSkin(skin);
+        skeleton.setToSetupPose();
+        skeleton.updateWorldTransform();
+        var bounds = skeleton.getBounds();
+        var scale = 1 / (bounds.width > bounds.height ? bounds.width / thumbnailSize * 1.1 : bounds.height / thumbnailSize * 1.1);
+
         var recorder = ui.PictureRecorder();
         var canvas = Canvas(recorder, const Rect.fromLTWH(0, 0, thumbnailSize, thumbnailSize));
         var paint = Paint()
-          ..color = ui.Color(0xff995588)
+          ..color = const ui.Color(0xffff00ff)
           ..style = PaintingStyle.fill;
-        canvas.drawRect(Rect.fromLTWH(0, 0, 200, 200), paint);
+        canvas.drawRect(const Rect.fromLTWH(0, 0, thumbnailSize, thumbnailSize), paint);
+        canvas.scale(scale, scale);
+        canvas.translate(-bounds.x, -bounds.y);
+        drawable.renderToCanvas(canvas);
+
         var imageData = await (await recorder.endRecording().toImage(thumbnailSize.toInt(), thumbnailSize.toInt())).toByteData(format: ui.ImageByteFormat.png);
         _skinImages.add(Image.memory(imageData!.buffer.asUint8List(), fit: BoxFit.none));
       }
@@ -37,14 +51,16 @@ class DressUpState extends State<DressUp> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-        appBar: AppBar(title: const Text('Skins')),
+        appBar: AppBar(title: const Text('Dress Up')),
         body: _skinImages.isEmpty
             ? const SizedBox()
             : Row(
             children: [
               Expanded(
                   child:ListView(
-                      children: _skinImages
+                      children: _skinImages.map((image) {
+                        return SizedBox(width: 100, height: 100, child: image);
+                      }).toList()
                   )
               ),
             ]

spine-flutter/lib/spine_flutter.dart

@@ -5,7 +5,7 @@ import 'dart:typed_data';
 import 'dart:ui';
 
 import 'package:ffi/ffi.dart';
-import 'package:flutter/rendering.dart';
+import 'package:flutter/rendering.dart' as rendering;
 import 'package:flutter/services.dart';
 import 'package:http/http.dart' as http;
 import 'package:path/path.dart' as path;
@@ -3219,6 +3219,14 @@ class SkeletonDrawable {
     return commands;
   }
 
+  void renderToCanvas(Canvas canvas) {
+    var commands = render();
+    for (final cmd in commands) {
+      canvas.drawVertices(
+          cmd.vertices, rendering.BlendMode.modulate, atlas.atlasPagePaints[cmd.atlasPageIndex]);
+    }
+  }
+
   void dispose() {
     if (_disposed) return;
     _disposed = true;
@@ -3238,6 +3246,7 @@ class RenderCommand {
     atlasPageIndex = nativeCmd.ref.atlasPage;
     int numVertices = nativeCmd.ref.numVertices;
     int numIndices = nativeCmd.ref.numIndices;
+    final positions = nativeCmd.ref.positions.asTypedList(numVertices * 2);
     final uvs = nativeCmd.ref.uvs.asTypedList(numVertices * 2);
     for (int i = 0; i < numVertices * 2; i += 2) {
       uvs[i] *= pageWidth;
@@ -3247,7 +3256,7 @@ class RenderCommand {
     // is copied, so it doesn't matter that we free up the underlying memory on the next
     // render call. See the implementation of Vertices.raw() here:
     // https://github.com/flutter/engine/blob/5c60785b802ad2c8b8899608d949342d5c624952/lib/ui/painting/vertices.cc#L21
-    vertices = Vertices.raw(VertexMode.triangles, nativeCmd.ref.positions.asTypedList(numVertices * 2),
+    vertices = Vertices.raw(VertexMode.triangles, positions,
         textureCoordinates: uvs,
         colors: nativeCmd.ref.colors.asTypedList(numVertices),
         indices: nativeCmd.ref.indices.asTypedList(numIndices));

spine-flutter/lib/spine_widget.dart

@@ -1,12 +1,8 @@
-import 'dart:convert';
-import 'dart:io';
 import 'dart:math';
 
 import 'package:flutter/rendering.dart' as rendering;
 import 'package:flutter/scheduler.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
-import 'package:http/http.dart' as http;
 
 import 'spine_flutter.dart';
 
@@ -424,11 +420,7 @@ class _SpineRenderObject extends RenderBox {
     canvas.save();
     _setCanvasTransform(canvas, offset);
 
-    final commands = _skeletonDrawable.render();
+    _skeletonDrawable.renderToCanvas(canvas);
-    for (final cmd in commands) {
-      canvas.drawVertices(
-          cmd.vertices, rendering.BlendMode.modulate, _skeletonDrawable.atlas.atlasPagePaints[cmd.atlasPageIndex]);
-    }
 
     canvas.restore();
     SchedulerBinding.instance.scheduleFrameCallback(_beginFrame);