mirror of
https://github.com/rive-app/rive-flutter.git
synced 2025-07-15 06:30:53 +08:00
69 lines
2.0 KiB
Dart
69 lines
2.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter/widgets.dart';
|
|
import 'package:rive/rive.dart';
|
|
|
|
class ExampleAnimation extends StatefulWidget {
|
|
const ExampleAnimation({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
_ExampleAnimationState createState() => _ExampleAnimationState();
|
|
}
|
|
|
|
class _ExampleAnimationState extends State<ExampleAnimation> {
|
|
void _togglePlay() {
|
|
if (_controller == null) {
|
|
return;
|
|
}
|
|
setState(() => _controller!.isActive = !_controller!.isActive);
|
|
}
|
|
|
|
/// Tracks if the animation is playing by whether controller is running.
|
|
bool get isPlaying => _controller?.isActive ?? false;
|
|
|
|
Artboard? _riveArtboard;
|
|
RiveAnimationController? _controller;
|
|
@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/dino.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;
|
|
// Add a controller to play back a known animation on the main/default
|
|
// artboard. We store a reference to it so we can toggle playback.
|
|
artboard.addController(_controller = SimpleAnimation('Run'));
|
|
setState(() => _riveArtboard = artboard);
|
|
},
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: const Text('Animation Example'),
|
|
),
|
|
body: Center(
|
|
child: _riveArtboard == null
|
|
? const SizedBox()
|
|
: Rive(artboard: _riveArtboard!),
|
|
),
|
|
floatingActionButton: FloatingActionButton(
|
|
onPressed: _togglePlay,
|
|
tooltip: isPlaying ? 'Pause' : 'Play',
|
|
child: Icon(
|
|
isPlaying ? Icons.pause : Icons.play_arrow,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|