[flutter] Skins example, WIP

spine-flutter/example/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:spine_flutter/spine_flutter.dart';
 
 class ExampleSelector extends StatelessWidget {
@@ -46,6 +47,18 @@ class ExampleSelector extends StatelessWidget {
                   );
                 },
               ),
+              spacer,
+              ElevatedButton(
+                child: const Text('Skins'),
+                onPressed: () {
+                  Navigator.push(
+                    context,
+                    MaterialPageRoute<void>(
+                      builder: (context) => const Skins(),
+                    ),
+                  );
+                },
+              ),
               spacer
             ]
           )
@@ -66,7 +79,7 @@ class SimpleAnimation extends StatelessWidget {
     });
 
     return Scaffold(
-      appBar: AppBar(title: const Text('Spineboy')),
+      appBar: AppBar(title: const Text('Simple Animation')),
       body: SpineWidget.asset("assets/spineboy-pro.skel", "assets/spineboy.atlas", controller),
       // body: SpineWidget.file("/Users/badlogic/workspaces/spine-runtimes/examples/spineboy/export/spineboy-pro.skel", "/Users/badlogic/workspaces/spine-runtimes/examples/spineboy/export/spineboy.atlas", controller),
       // body: const SpineWidget.http("https://marioslab.io/dump/spineboy/spineboy-pro.json", "https://marioslab.io/dump/spineboy/spineboy.atlas"),
@@ -103,7 +116,7 @@ class PlayPauseAnimationState extends State<PlayPauseAnimation> {
     reportLeaks();
 
     return Scaffold(
-      appBar: AppBar(title: const Text('Spineboy')),
+      appBar: AppBar(title: const Text('Play/Pause')),
       body: SpineWidget.asset("assets/spineboy-pro.skel", "assets/spineboy.atlas", _controller),
       floatingActionButton: FloatingActionButton(
         onPressed: _togglePlaystate,
@@ -113,6 +126,90 @@ class PlayPauseAnimationState extends State<PlayPauseAnimation> {
   }
 }
 
+class Skins extends StatefulWidget {
+  const Skins({Key? key}) : super(key: key);
+
+  @override
+  SkinsState createState() => SkinsState();
+}
+
+class SkinsState extends State<Skins> {
+  Atlas? _atlas;
+  SkeletonData? _skeletonData;
+  final Map<String, bool> _availableSkins = {};
+  Skin? _customSkin;
+  late SpineWidgetController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    Atlas.fromAsset(rootBundle, "assets/mix-and-match.atlas").then((atlas) async {
+      _skeletonData = await SkeletonData.fromAsset(atlas, rootBundle, "assets/mix-and-match-pro.skel");
+      _atlas = atlas;
+      for (var skin in _skeletonData?.getSkins() ?? []) {
+        _availableSkins[skin.getName()] = false;
+      }
+
+      _controller = SpineWidgetController((controller) {
+        controller.animationState?.setAnimationByName(0, "walk", true);
+      });
+
+      setState(() => _toggleSkin("full-skins/girl"));
+    });
+  }
+
+  void _toggleSkin(String skinName) {
+    _availableSkins[skinName] = !_availableSkins[skinName]!;
+
+    if (_customSkin != null) {
+      _customSkin?.dispose();
+      _customSkin = null;
+    }
+
+    _customSkin = Skin("custom-skin");
+    for (var skinName in _availableSkins.keys) {
+      if (_availableSkins[skinName] == true) {
+        var skin = _controller.skeletonData?.findSkin(skinName);
+        if (skin != null)
+          _customSkin?.addSkin(skin);
+      }
+    }
+    _controller.skeleton?.setSkin(_customSkin!);
+    _controller.skeleton?.setToSetupPose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: AppBar(title: const Text('Skins')),
+        body: _skeletonData == null
+            ? SizedBox()
+            : Row(
+            children: [
+              Expanded(
+                  child:ListView(
+                    children: _availableSkins.keys.map((skinName) {
+                      return CheckboxListTile(
+                        title: Text(skinName),
+                        value: _availableSkins[skinName],
+                        onChanged: (bool? value) {
+                          _toggleSkin(skinName);
+                          setState(() => {});
+                        },
+                      );
+                    }).toList()
+                  )
+              ),
+              Expanded(
+                  child: SpineWidget.raw(_skeletonData, _atlas, _controller, boundsProvider: SkinAndAnimationBounds(["full-skins/girl"]))
+              )
+            ]
+        )
+    );
+  }
+}
+
 class AnimationStateEvents extends StatelessWidget {
   const AnimationStateEvents({Key? key}) : super(key: key);
 

spine-flutter/lib/spine_flutter.dart

@@ -143,6 +143,14 @@ class SkeletonData {
     return SkeletonData._(result.skeletonData);
   }
 
+  static Future<SkeletonData> fromAsset(Atlas atlas, AssetBundle assetBundle, String skeletonFileName) async {
+    if (skeletonFileName.endsWith(".json")) {
+      return fromJson(atlas, await assetBundle.loadString(skeletonFileName));
+    } else {
+      return fromBinary(atlas, (await assetBundle.load(skeletonFileName)).buffer.asUint8List());
+    }
+  }
+
   /// Finds a bone by comparing each bone's name. It is more efficient to cache the results of this method than to call it multiple times.
   BoneData? findBone(String name) {
     final nativeName = name.toNativeUtf8();
@@ -1559,11 +1567,23 @@ class SkinEntry {
   SkinEntry(this.slotIndex, this.name, this.attachment);
 }
 
-// FIXME add a way to create a new skin
 class Skin {
-  final spine_skin _skin;
+  late final bool _isCustomSkin;
+  late final spine_skin _skin;
 
-  Skin._(this._skin);
+  Skin._(this._skin) : _isCustomSkin = false;
+
+  Skin.new(String name) {
+    final nativeName = name.toNativeUtf8();
+    _skin = _bindings.spine_skin_create(nativeName.cast());
+    malloc.free(nativeName);
+    _isCustomSkin = true;
+  }
+
+  void dispose() {
+    if (!_isCustomSkin) return;
+    _bindings.spine_skin_dispose(_skin);
+  }
 
   void setAttachment(int slotIndex, String name, Attachment? attachment) {
     final nativeName = name.toNativeUtf8();
@@ -2283,12 +2303,16 @@ class Skeleton {
   /// Also, often AnimationState::apply(Skeleton&) is called before the next time the
   /// skeleton is rendered to allow any attachment keys in the current animation(s) to hide or show attachments from the new skin.
   /// @param skinName May be NULL.
-  void setSkin(String skinName) {
+  void setSkinByName(String skinName) {
     final nameNative = skinName.toNativeUtf8();
-    _bindings.spine_skeleton_set_skin(_skeleton, nameNative.cast());
+    _bindings.spine_skeleton_set_skin_by_name(_skeleton, nameNative.cast());
     malloc.free(nameNative);
   }
 
+  void setSkin(Skin skin) {
+    _bindings.spine_skeleton_set_skin(_skeleton, skin._skin);
+  }
+
   Attachment? getAttachmentByName(String slotName, String attachmentName) {
     final slotNameNative = slotName.toNativeUtf8();
     final attachmentNameNative = attachmentName.toNativeUtf8();

spine-flutter/lib/spine_widget.dart

@@ -52,22 +52,6 @@ class SpineWidgetController {
   }
 
   bool get isPlaying => _drawable?.animationState.getTimeScale() != 0;
-
-  List<String> get animationNames {
-    List<String> names = [];
-    for (var anim in _drawable?.skeletonData.getAnimations() ?? []) {
-      names.add(anim.getName());
-    }
-    return names;
-  }
-
-  List<String> get skinNames {
-    List<String> names = [];
-    for (var skin in _drawable?.skeletonData.getSkins() ?? []) {
-      names.add(skin.getName());
-    }
-    return names;
-  }
 }
 
 enum AssetType { Asset, File, Http, Raw }
@@ -81,6 +65,7 @@ abstract class BoundsProvider {
 class SetupPoseBounds extends BoundsProvider {
   const SetupPoseBounds();
 
+  @override
   Bounds computeBounds(SkeletonDrawable drawable) {
     return drawable.skeleton.getBounds();
   }
@@ -91,12 +76,45 @@ class RawBounds extends BoundsProvider {
 
   RawBounds(this.x, this.y, this.width, this.height);
 
+  @override
   Bounds computeBounds(SkeletonDrawable drawable) {
     return Bounds(x, y, width, height);
   }
 }
 
+class SkinAndAnimationBounds extends BoundsProvider {
+  final List<String> _skins;
+  final String? _animation;
+
+  SkinAndAnimationBounds(this._skins, [this._animation]);
+
+  @override
+  Bounds computeBounds(SkeletonDrawable drawable) {
+    var data = drawable.skeletonData;
+    var oldSkin = drawable.skeleton.getSkin();
+    var customSkin = Skin("custom-skin");
+    for (var skinName in _skins) {
+      var skin = data.findSkin(skinName);
+      if (skin == null) continue;
+      customSkin.addSkin(skin);
+    }
+    drawable.skeleton.setSkin(customSkin);
+    drawable.skeleton.setToSetupPose();
+    var bounds = drawable.skeleton.getBounds();
+    customSkin.dispose();
+
+    if (oldSkin == null) {
+      drawable.skeleton.setSkinByName("");
+    } else {
+      drawable.skeleton.setSkin(oldSkin);
+    }
+    drawable.skeleton.setToSetupPose();
+    return bounds;
+  }
+}
+
 class ComputedBounds extends BoundsProvider {
+  @override
   Bounds computeBounds(SkeletonDrawable drawable) {
     return Bounds(0, 0, 0, 0);
   }
@@ -169,7 +187,9 @@ class _SpineWidgetState extends State<SpineWidget> {
 
   void loadRaw(SkeletonData skeletonData, Atlas atlas) {
     skeletonDrawable = SkeletonDrawable(atlas, skeletonData, false);
+    widget.controller._initialize(atlas, skeletonData, skeletonDrawable!);
     skeletonDrawable?.update(0);
+    setState(() {});
   }
 
   void loadFromAsset(String skeletonFile, String atlasFile, AssetType assetType) async {
@@ -199,10 +219,7 @@ class _SpineWidgetState extends State<SpineWidget> {
         throw Exception("Raw assets can not be loaded via loadFromAsset().");
     }
 
-    skeletonDrawable = SkeletonDrawable(atlas, skeletonData, true);
-    widget.controller._initialize(atlas, skeletonData, skeletonDrawable!);
-    skeletonDrawable?.update(0);
-    setState(() {});
+    loadRaw(skeletonData, atlas);
   }
 
   @override