Flutter：如何使用SpriteWidget显示简单精灵表动画

步骤1：确认依赖 #

确保你的pubspec.yaml中已添加依赖：

dependencies:
  spritewidget: ^2.0.1

同时在assets节点添加精灵表图片路径：

flutter:
  assets:
    - assets/spritesheet.png  # 替换为你的精灵表实际路径

步骤2：完整极简示例代码 #

以下代码直接实现精灵表循环动画，适配你提供的横向排列精灵表：

import 'package:flutter/material.dart';
import 'package:spritewidget/spritewidget.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: SpriteAnimationWidget()),
      ),
    );
  }
}

class SpriteAnimationWidget extends StatefulWidget {
  @override
  State<SpriteAnimationWidget> createState() => _SpriteAnimationWidgetState();
}

class _SpriteAnimationWidgetState extends State<SpriteAnimationWidget> {
  late SpriteSheet _spriteSheet;
  late AnimationPlayer _animationPlayer;
  late Sprite _sprite;

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

  Future<void> _loadSpriteSheet() async {
    // 加载本地精灵表图片
    final imageBytes = await rootBundle.load('assets/spritesheet.png');
    final texture = Texture.fromImage(
      await decodeImageFromList(imageBytes.buffer.asUint8List()),
    );

    // 配置精灵表：适配你提供的4帧横向排列样式
    _spriteSheet = SpriteSheet(
      texture: texture,
      frameSize: const Size(100, 100), // 单帧尺寸，按需调整
      rows: 1,
      columns: 4,
    );

    // 创建并初始化动画
    final animation = _spriteSheet.createAnimation(
      0,
      from: 0,
      to: 3,
      stepTime: 0.1, // 每帧间隔时间（秒）
    );
    _animationPlayer = AnimationPlayer(animation);
    _sprite = Sprite.fromSpriteSheet(_spriteSheet, 0);

    // 启动循环动画
    _animationPlayer.play(true);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (!_animationPlayer.isReady) {
      return const CircularProgressIndicator(); // 加载中提示
    }

    return SpriteWidget(
      NodeWithSize(const Size(100, 100), children: [
        _sprite..animationPlayer = _animationPlayer,
      ]),
    );
  }
}

关键参数调整说明 #

• 精灵表配置：根据实际图片修改frameSize（单帧宽高）、rows（总行数）、columns（总列数）。你提供的精灵表是1行4列，所以对应参数如上。
• 动画控制：createAnimation的from/to控制动画帧范围，stepTime调整动画速度，play(true)设置循环播放。

内容的提问来源于stack exchange，提问作者Abdurraheem Abdulhakeem