When using Factory.rive, drawing multiple RiveWidgets to their own individual textures incurs a performance cost and can hit WebGL context limits on the web.
RivePanel solves this by creating a single shared texture that multiple RiveWidgets can paint to. This can drastically improve performance under certain conditions.
To enable shared texture behavior:
- Wrap your
RiveWidgets with a RivePanel. - Set
useSharedTexture: true on each RiveWidget.
Important Considerations:
- Interleaving: Drawing to a shared surface means you cannot interleave Flutter drawing commands with Rive drawing commands. If you need to interleave content, use
Factory.flutter or a separate RivePanel for the interleaved content. - Memory: Allocating a larger shared texture has a memory cost. Benchmarking is recommended.
- Compatibility: This has no effect when using
Factory.flutter and will create an unnecessary texture if used there.
class ExampleRivePanel extends StatelessWidget {
const ExampleRivePanel({super.key});
@override
Widget build(BuildContext context) {
return const RivePanel(
backgroundColor: Colors.red,
child: ListViewExample(),
);
}
}
// Inside your widget tree, configure RiveWidget to use the shared texture
// provided by the parent RivePanel
RiveWidget(
controller: state.controller,
fit: Fit.contain,
/// Set this to true to draw to the nearest `RivePanel`
useSharedTexture: true,
)
