Flutter - 在 Rive 周围创建小部件时出错

Question

为了在多个地方使用 rive，我在 Rive 小部件周围创建了一个包装小部件。

//imports...
class RiveAnimation extends StatefulWidget {
  final String path;
  final String animation;
  final Alignment alignment;
  final bool useArtboardSize;
  RiveAnimation({
    @required this.path,
    this.animation = animTrigger,
    this.alignment = Alignment.center,
    this.useArtboardSize = true,
  });
  @override
  _RiveAnimationState createState() => _RiveAnimationState();
}

class _RiveAnimationState extends State<RiveAnimation> {
  Artboard _riveArtboard;
  RiveAnimationController _controller;

  @override
  void initState() {
    rootBundle.load(widget.path).then(
      (data) async {
        print('animation loaded');
        final RiveFile file = RiveFile.import(data);
        if (file != null) {
          final Artboard artboard = file.mainArtboard;
          artboard.addController(
            _controller = SimpleAnimation(widget.animation),
          );
          setState(() {
            _riveArtboard = artboard;
          });
        }
      },
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Rive(
      artboard: _riveArtboard,
      alignment: widget.alignment,
      useArtboardSize: widget.useArtboardSize,
      fit: BoxFit.fill,
    );
  }
}

使用此小部件时，我收到一条错误消息：

I/flutter ( 7139): The getter 'redraw' was called on null.
I/flutter ( 7139): Receiver: null
I/flutter ( 7139): Tried calling: redraw

有时会显示动画，但有时我会看到 Flutter 错误屏幕。

谢谢。

Answer 1

尝试调用

super.initState();

在加载动画之前。

  @override
  void initState() {
    super.initState();
    rootBundle.load(widget.path).then(
      (data) async {
        print('animation loaded');
        final RiveFile file = RiveFile.import(data);
        if (file != null) {
          final Artboard artboard = file.mainArtboard;
          artboard.addController(
            _controller = SimpleAnimation(widget.animation),
          );
          setState(() {
            _riveArtboard = artboard;
          });
        }
      },
    );
  }