flutter - 如何在 Flutter 应用中使用 Rive 的 Artboard 和 Nestedartboard

Question

我想使用像这样的动画

https://rive.app/community/1514-2958-flower-composition-tutorial/

我注意到这个画板包含一些 NestedArtboard 这个嵌套画板不是由我的应用程序加载的，我想知道为什么会发生这种情况？

这是我的代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';

class RiveBackground extends StatefulWidget {
  const RiveBackground({Key? key}) : super(key: key);

  @override
  State<RiveBackground> createState() => _RiveBackgroundState();
}

class _RiveBackgroundState extends State<RiveBackground> {
  // Declarations necessary to rive
  final riveFileName = 'assets/rive/last.riv';
  Artboard? globalArtboard;

  // Animation controller
  late RiveAnimationController _animationController;

  // Loads a Rive file
  Future<void> _loadRiveFile() async {
    final bytes = await rootBundle.load(riveFileName);
    RiveFile rFile = RiveFile.import(bytes);

    final artboard = rFile.artboardByName('Motion');

    print(globalArtboard);
    globalArtboard = artboard!
      ..addController(
        _animationController = SimpleAnimation('Animation 1'),
      );
    setState(() {});
  }
 

  @override
  void initState() {
    WidgetsBinding.instance!.addPostFrameCallback((_) => _loadRiveFile());

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('Building');
    return Scaffold(
      body: globalArtboard != null
          ? Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: Rive(
                fit: BoxFit.cover,
                artboard: globalArtboard!,
              ),
            )
          : const Center(child: Text('empty')),
    );
  }
}

预期结果

我的结果