flutterdartanimationflutter-animationrive

How use Artboard and Nestedartboard from Rive in a Flutter app


I want to use a rive animation like this one

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

I notice that this artboard contains a somes NestedArtboard this nested artboard are not loaded by my app, I would like to know why this happen?

This is my code:

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')),
    );
  }
}

Expected result enter image description here

My result enter image description here


Solution

  • Not sure if you found a solution for this already, but according to this response in this Github issue,

    to get the nested artboard to show through, you should instance the Artboard when you set it up with the Rive widget, so your setup would go from:

    Rive(artboard: riveFile.artboardByName("artboard"));
    

    to

    Rive(artboard: riveFile.artboardByName("artboard")!.instance());
    

    more detail in the link. I hope this helps!