mirror of
https://github.com/rive-app/rive-flutter.git
synced 2025-07-06 08:26:42 +08:00
88 lines
2.9 KiB
Dart
88 lines
2.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:rive/rive.dart';
|
|
|
|
/// An example showing how to drive two boolean state machine inputs.
|
|
class ExampleStateMachine extends StatefulWidget {
|
|
const ExampleStateMachine({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
State<ExampleStateMachine> createState() => _ExampleStateMachineState();
|
|
}
|
|
|
|
class _ExampleStateMachineState extends State<ExampleStateMachine> {
|
|
/// Tracks if the animation is playing by whether controller is running.
|
|
bool get isPlaying => _controller?.isActive ?? false;
|
|
|
|
Artboard? _riveArtboard;
|
|
StateMachineController? _controller;
|
|
SMIInput<bool>? _hoverInput;
|
|
SMIInput<bool>? _pressInput;
|
|
|
|
@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/rocket.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, 'Button');
|
|
if (controller != null) {
|
|
artboard.addController(controller);
|
|
_hoverInput = controller.findInput('Hover');
|
|
_pressInput = controller.findInput('Press');
|
|
}
|
|
setState(() => _riveArtboard = artboard);
|
|
},
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(title: const Text('Button State Machine')),
|
|
body: _riveArtboard == null
|
|
? const SizedBox()
|
|
: MouseRegion(
|
|
onEnter: (_) => _hoverInput?.value = true,
|
|
onExit: (_) => _hoverInput?.value = false,
|
|
child: GestureDetector(
|
|
onTapDown: (_) => _pressInput?.value = true,
|
|
onTapCancel: () => _pressInput?.value = false,
|
|
onTapUp: (_) => _pressInput?.value = false,
|
|
child: Stack(
|
|
children: [
|
|
Rive(
|
|
fit: BoxFit.cover,
|
|
artboard: _riveArtboard!,
|
|
),
|
|
Align(
|
|
alignment: Alignment.bottomCenter,
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(18.0),
|
|
child: Text(
|
|
'Try pressing the button...',
|
|
style: TextStyle(
|
|
fontSize: 22,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.grey[800],
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|