Flutter: Fix Rive Animation Controller Type Casting Error
Problem
When working with Rive animations in Flutter, you might encounter an error when trying to cast inputs using:
trigger = stateMachineController!.inputs.first as SMITrigger;
This error occurs because the type casting is invalid and unsafe.
Solution
Here's a complete working example showing how to properly handle Rive animation inputs:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';
class BirdAnimation extends StatefulWidget {
const BirdAnimation({Key? key}) : super(key: key);
@override
State<BirdAnimation> createState() => _BirdAnimationState();
}
class _BirdAnimationState extends State<BirdAnimation> {
Artboard? _birdArtboard;
SMITrigger? trigger;
SMIBool? dance;
StateMachineController? stateMachineController;
@override
void initState() {
super.initState();
_loadRiveFile();
}
Future<void> _loadRiveFile() async {
try {
final data = await rootBundle.load('assets/bird.riv');
final file = RiveFile.import(data);
final artboard = file.mainArtboard;
// Initialize state machine controller
stateMachineController = StateMachineController.fromArtboard(
artboard,
"birb" // Your state machine name
);
if (stateMachineController != null) {
artboard.addController(stateMachineController!);
// Properly find and initialize inputs
trigger = stateMachineController!.findSMI('look up');
dance = stateMachineController!.findSMI('dance');
}
setState(() => _birdArtboard = artboard);
} catch (e) {
print('Error loading Rive file: $e');
}
}
void _lookup() {
if (trigger != null) {
trigger!.fire();
}
}
void _toggleDance() {
if (dance != null) {
dance!.change(!dance!.value);
}
}
@override
void dispose() {
stateMachineController?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
height: 400,
width: 400,
child: _birdArtboard == null
? const CircularProgressIndicator()
: GestureDetector(
onTap: _lookup,
onDoubleTap: _toggleDance,
child: Rive(
artboard: _birdArtboard!,
fit: BoxFit.contain,
),
),
),
);
}
}
Key Points
- Proper Input Initialization
// Instead of unsafe casting:
// trigger = stateMachineController!.inputs.first as SMITrigger;
// Use findSMI to safely get inputs:
trigger = stateMachineController!.findSMI('look up');
dance = stateMachineController!.findSMI('dance');
- Error Handling
try {
// Load and initialize Rive file
} catch (e) {
print('Error loading Rive file: $e');
}
- Null Safety
void _lookup() {
if (trigger != null) {
trigger!.fire();
}
}
Usage Guide
- Add Rive Dependency
dependencies:
rive: ^0.12.4 # Use latest version
- Add Asset to pubspec.yaml
flutter:
assets:
- assets/bird.riv
- Create State Machine in Rive
- Name your state machine (e.g., "birb")
- Create inputs:
- "look up" trigger
- "dance" boolean
- Implement Interactions
GestureDetector(
onTap: _lookup, // Single tap to look up
onDoubleTap: _toggleDance, // Double tap to toggle dance
child: Rive(...),
)
Common Issues & Solutions
- Input Not Found
// Check if input exists
final input = stateMachineController!.findSMI('input_name');
if (input == null) {
print('Input not found in state machine');
}
- Controller Disposal
@override
void dispose() {
stateMachineController?.dispose();
super.dispose();
}
- Loading States
child: _birdArtboard == null
? const CircularProgressIndicator()
: Rive(artboard: _birdArtboard!),
Best Practices
- Type-Safe Input Management
class RiveInputs {
final SMITrigger? lookUp;
final SMIBool? dance;
RiveInputs({this.lookUp, this.dance});
static RiveInputs fromController(StateMachineController controller) {
return RiveInputs(
lookUp: controller.findSMI('look up'),
dance: controller.findSMI('dance'),
);
}
}
- Resource Management
// Load file once and reuse
late final Future<RiveFile> _riveFile;
@override
void initState() {
super.initState();
_riveFile = rootBundle.load('assets/bird.riv')
.then((data) => RiveFile.import(data));
}
- Performance Optimization
// Use const constructor
const BirdAnimation({Key? key}) : super(key: key);
// Cache artboard
final artboard = file.mainArtboard.instance();
Debugging Tips
- Check State Machine Name
print('Available state machines: ${file.mainArtboard.stateMachineNames}');
- Verify Inputs
stateMachineController?.inputs.forEach((input) {
print('Input: ${input.name}, Type: ${input.runtimeType}');
});
- Monitor State Changes
dance?.addListener(() {
print('Dance state: ${dance!.value}');
});
Remember to:
- Use proper type-safe methods to access inputs
- Handle null cases appropriately
- Dispose controllers when done
- Add proper error handling
- Test interactions thoroughly
Would you like me to explain any specific part in more detail?
