Custom Flutter Widgets
Custom Rive Widgets created for Flutter
This is the manual for the old version of Rive (formerly Flare). Visit the Help Center for the new Rive here.
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);
}
}
}
Last modified 2yr ago