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: "https://cdn.2dimensions.com/Filip.flr",
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.filename,
this.animation,
this.fit = BoxFit.contain,
this.alignment = Alignment.center})
: super(key: key);
@override
_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;
artboard.initializeGraphics();
var flutterArtboard = artboard.makeInstance() as FlutterActorArtboard;
flutterArtboard.initializeGraphics();
flutterArtboard.advance(0);
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,
{this.fit = BoxFit.contain,
this.alignment = Alignment.center,
this.controller});
@override
RenderObject createRenderObject(BuildContext context) {
return FlareArtboardRenderObject()
..artboard = artboard
..fit = 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;
SimpleControls(this.defaultAnimation);
@override
void initialize(FlutterActorArtboard artboard) {
super.initialize(artboard);
if (defaultAnimation != null) {
play(defaultAnimation);
}
}
}

More Custom Widgets coming soon...