import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:rive/rive.dart'; /// An example showing how to drive a StateMachine via a trigger input. class LittleMachine extends StatefulWidget { const LittleMachine({Key? key}) : super(key: key); @override State createState() => _LittleMachineState(); } class _LittleMachineState extends State { /// Tracks if the animation is playing by whether controller is running. bool get isPlaying => _controller?.isActive ?? false; /// Message that displays when state has changed String stateChangeMessage = ''; Artboard? _riveArtboard; StateMachineController? _controller; SMIInput? _trigger; @override void initState() { super.initState(); // Load the animation file from the bundle, note that you could also // download this. The RiveFile just expects a list of bytes. rootBundle.load('assets/little_machine.riv').then( (data) async { // Load the RiveFile from the binary data. final file = RiveFile.import(data); // The artboard is the root of the animation and gets drawn in the // Rive widget. final artboard = file.mainArtboard; var controller = StateMachineController.fromArtboard( artboard, 'State Machine 1', onStateChange: _onStateChange, ); if (controller != null) { artboard.addController(controller); _trigger = controller.findInput('Trigger 1'); } setState(() => _riveArtboard = artboard); }, ); } /// Do something when the state machine changes state void _onStateChange(String stateMachineName, String stateName) => setState( () => stateChangeMessage = 'State Changed in $stateMachineName to $stateName', ); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Little Machine')), body: Stack( children: [ _riveArtboard == null ? const SizedBox() : GestureDetector( onTapDown: (_) => _trigger?.value = true, child: Rive( artboard: _riveArtboard!, fit: BoxFit.cover, ), ), const Align( alignment: Alignment.topCenter, child: Padding( padding: EdgeInsets.all(16.0), child: Text( 'Press to activate!', style: TextStyle(fontSize: 18, color: Colors.black), ), ), ), Align( alignment: Alignment.bottomCenter, child: Padding( padding: const EdgeInsets.all(16.0), child: Text( stateChangeMessage, style: const TextStyle( color: Colors.black, fontWeight: FontWeight.bold), ), ), ) ], ), ); } }