Reading A Rive File To Create a Better Developer Experience

[FilledStacks]

Hi,

I've been using Rive since the Flare days, in-fact I think I might still have the highest viewed rive video where I built a state machine for rive animations 3 years before the feature was released 😎

Context

I'm currently in the middle of an inspiration cycle with rive animations again and I'm building a new cross-framework, framework (for myself) that will allow me to create my app UI using rive and low-code.

I'm calling it expressionUI.

I've been having some good success with the framework in terms of what I can do with minimal code, so I am now at the point where I want to create a great API for developers to use

Why did I create this issue

In the past I remember Rive having a readable JSON format, I think removing this has slowed down tooling that can be built around Rive.

I want to create a type-safe way to interact with rive animations for expression UI where I handle a lot of the wiring of functionality, listening for events, textRun extraction and updating, etc.

Note: This would even be cool for the base Rive package

What I want to do

The way I'm exploring this UI framework is by having each view be an artboard with different states in it using the state machine functionality.

The first thing I want to do is to read all artboards that match a specific naming like *-screen, *-view, *-page then generate an appropriately named class.

Creating Type Safe Views/Pages/Screens

I have the following artboards

Named intro-view and counter-view. I would like to read the artboard using a dart cli app and then generate a class with the following code in it.

class CounterView extends StatelessWidget {
  const CounterView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RiveAnimation.asset(
        'assets/expression-example-app.riv',
        artboard: 'counter',
        fit: BoxFit.cover,
        onInit: (Artboard artboard) {
        
        },
      ),
    );
  }
}

This way, in Flutter I can use it in a type safe manner.

This is one of 8 developer experience improvements I want to make using Rive animations, which include type safe text run surfacing, type-safe event handling, type-safe "widget artboard" referencing, etc.

What's the problem?

I can see the code you're using to read the rive file and load it as a rive animation but it's not pure dart so I can't use your code directly. To test this out simply start a new dart cli project, add the rive package then add the following into the main file.

import 'package:rive/rive.dart';

void main() {
  final riveFile = RiveFile.file('assets/counter.riv');
}

When you run you'll see it breaks because of a reference to dart:ui. I can absolutely fork the repo, make the adjustments and have it fixed up, but there's actually a deeper concern that I have with what I'm trying to do.

Stability of the rive file structure. Because I can't see the structure in a readable way, it will be very hard for me to debug any binary structural changes you may introduce that could break the sequentially sound reading that binary files enforce.

What's my request?

There are 2 things that can help me tremendously build something great for your platform.

1. Publishing the binary structure of your .riv file (good start but not ideal solution)
2. Bringing back the open-ness rive was founded on allowing open source devs like myself to build something for the community

I used to feel like an insider because I could tinker with internals and see everything. Hell, I even spoke with potential investors in Rive and put a big, enthusiastic, yes stamp on the product before the change from Flare to Rive.

I love the product and I think there's potential for it to be better in many ways. Not only that, I'm one of the builders who want to publicly use it to make it better suited for mobile app developers.

I would really like to build expressionUI, I have a few open-source contributors already excited about the project.

I would be happy to pass along all my type-safe rive generator code for you to build your own rive CLI internally with if you want.

Thank you for your consideration.

Dane

[FilledStacks]

Thank you @neurowave for the details on Twitter.

The format is described here but it's unclear what certain values should be read as, like:

• Major Version (assumed int)
• Minor Version (assumed int)
• File ID (string?)

Majority of the file is not very clear but it's better than having nothing.

Using this, along with the open flutter package I can figure out how to load the file.

If you don't mind, I would like to keep this issue open for when I run into reader issues.

[ameenbadri7]

UP