Custom Flutter Widgets

Custom Rive Widgets created for Flutter

Network Loading in Rive

This Rive example demonstrates how to create a custom class to download a ".flr" file and animate it within Flutter. It downloads the ".flr" file from the network, loads an Actor and instances an Artboard from it.

class MyHomePage extends StatelessWidget {
const Flare(
filename: "",
animation: "idle"),

The Flare widget needs a filename that is passed as a String, which will be the URL for the ".flr" file. It also needs an animation to play that will also be passed as a String.

class Flare extends StatefulWidget {
final String filename;
final String animation;
final BoxFit fit;
final Alignment alignment;
const Flare(
{Key key,
this.animation, = BoxFit.contain,
this.alignment =})
: super(key: key);
_FlareState createState() => _FlareState();

When the widget is initialized it will _load() the flare file from the network, instance the correct Artboard, and use it to display the FlareArtboard widget.

Future<void> _load() async {
HttpClient client = HttpClient();
HttpClientRequest request = await client.getUrl(Uri.parse(widget.filename));
HttpClientResponse response = await request.close();
var data = await consolidateHttpClientResponseBytes(response);
var actor = await FlutterActor.loadFromByteData(ByteData.view(data.buffer));
var artboard = actor.artboard;
var flutterArtboard = artboard.makeInstance() as FlutterActorArtboard;
setState(() {
_artboard = flutterArtboard;

The FlareArtboard widget handles drawing the Artboard once it is loaded from the network.

class FlareArtboard extends LeafRenderObjectWidget {
final FlutterActorArtboard artboard;
final BoxFit fit;
final Alignment alignment;
final FlareController controller;
const FlareArtboard(this.artboard,
{ = BoxFit.contain,
this.alignment =,
RenderObject createRenderObject(BuildContext context) {
return FlareArtboardRenderObject()
..artboard = artboard = fit
..controller = controller
..alignment = alignment;

Using a very simple custom controller extended from FlareControls allows us to play the default animation on initialization of the loaded Artboard.

class SimpleControls extends FlareControls {
final String defaultAnimation;
void initialize(FlutterActorArtboard artboard) {
if (defaultAnimation != null) {

More Custom Widgets coming soon...