11d ago

Flutter Web - Cannot Render Multiple Artboards

So I have a single .riv file that has two artboards, if I render one then I cannot render the other. Its working on mobile but not on web, it was working on the previous version of Rive and not with version 0.8.1317 and flutter rive package version 0.13.2

I have tested on Firefox, Edge and Chrome on Windows, same Issue, here are some images and the code :

As you can see the dog artboard and the button artboard renders on the mobile emulator, but the button does not render on web, and the same happens if I render the button artboard first the dog artboard does not render

Here is the code:

 Widget _renderAnimationWithGesture() {
    return Container(
      width: 250,
      height: 250,
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          RiveAnimation.asset(
            'assets/dog.riv',
            artboard: 'dog_2',
            onInit: _onDogRiveInit,
            fit: BoxFit.fitWidth,
          ),
          SwipeDetector(onSwipeStateUpdate: onSwipeStateUpdate),
        ],
      ),
    );
  }

  Widget _renderNextButton() {
    return Container(
      width: 350,
      height: 67,
      child: RiveAnimation.asset(
        'assets/dog.riv',
        onInit: _onButtonRiveInit,
        artboard: "button",
      ),
    );
  }

3 replies

5d ago

Hey , I can confirm the issue! This is something underneath in preparation for an exciting new feature. But seems like we introduced a bug, where if multiple animations are loading at the same time the underlying engines believes it is already initialized.

You can resolve this by awaiting await RiveFile.initializeText(); before displaying any Rive animations.

But for your use case of using the same Rive file to display multiple artboards it'll be better to load the Rive file once, see the sample code below that demonstrates how you can do it (note that here the initializeText call is not needed because the file is only loaded once, but I'm including it for clarity). In the next release we will have this fixed.

5d ago

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

/// Basic example playing a Rive animation from a packaged asset.
class SimpleAssetAnimation extends StatefulWidget {
  const SimpleAssetAnimation({Key? key}) : super(key: key);

  @override
  State<SimpleAssetAnimation> createState() => _SimpleAssetAnimationState();
}

class _SimpleAssetAnimationState extends State<SimpleAssetAnimation> {
  RiveFile? file;

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

  Future<void> _initRiveFile() async {
    // Technically not needed here, but ensures that this issue won't happen for you if you initialize it manually
    await RiveFile.initializeText();

    // Load the file once and reuse.
    file = await RiveFile.asset("multi_artboard.riv");
    setState(() {}); // rebuild widget when file is loaded.
  }

  @override
  Widget build(BuildContext context) {
    if (file == null) return const SizedBox.shrink();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Animation'),
      ),
      body: Column(
        children: [
          Expanded(
            child: RiveAnimation.direct(
              file!,
              artboard: 'Artboard1',
            ),
          ),
          Expanded(
            child: RiveAnimation.direct(
              file!,
              artboard: 'Artboard2',
            ),
          ),
        ],
      ),
    );
  }
}

5d ago

multi_artboard.riv

0 KB