flutter/rive-flutter
1
0
Fork 0
mirror of https://github.com/rive-app/rive-flutter.git synced 2025-06-27 18:28:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated example and readme

Browse Source
This commit is contained in:
Matt Sullivan
2020-11-10 14:46:53 -08:00
parent 3413dc5fe5
commit d0df759001
5 changed files with 153 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
README.md
View File

@ -13,8 +13,112 @@ dependencies:
rive: ^0.6.2
```
## Example
## Examples
See how to use it in [example](example).
### Continuously playing a Looping Animation
Here's a simple example of continuously playing a looping animation.
```dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _togglePlay() {
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/off_road_car.riv').then(
(data) async {
final file = RiveFile();
// Load the RiveFile from the binary data.
if (file.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('idle'));
setState(() => _riveArtboard = artboard);
}
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
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,
),
),
);
}
}
```
Check out the full [example](example).
### Playing a one-shot animation
Rive's ```SimpleAnimation``` will automatically play a looping or ping-pong animation repeatedly, but will play a one-shot animation only once. To determine when a one-shot has completed playing, subscribe to the controller's ```isActiveChanged``` listenable:
```dart
// Listen for changes to the controller to know when an animation has
// started or stopped playing
_controller.isActiveChanged.addListener(() {
if (_controller.isActive) {
print('Animation started playing');
} else {
print('Animation stopped playing');
}
}
```
## More Info
For an in-depth tutorial on how to use the runtime, check out [this blog post](https://blog.rive.app/rives-flutter-runtime-part-1/).

22
example/lib/main.dart
View File

@ -2,9 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';
void main() {
runApp(MyApp());
}
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
@ -32,8 +30,7 @@ class _MyHomePageState extends State<MyHomePage> {
setState(() => _controller.isActive = !_controller.isActive);
}
/// We track if the animation is playing by whether or not the controller is
/// running.
/// Tracks if the animation is playing by whether controller is running.
bool get isPlaying => _controller?.isActive ?? false;
Artboard _riveArtboard;
@ -46,19 +43,16 @@ class _MyHomePageState extends State<MyHomePage> {
// download this. The RiveFile just expects a list of bytes.
rootBundle.load('assets/off_road_car.riv').then(
(data) async {
var file = RiveFile();
final file = RiveFile();
// Load the RiveFile from the binary data.
var success = file.import(data);
if (success) {
// The artboard is the root of the animation and is what gets drawn
// into the Rive widget.
var artboard = file.mainArtboard;
if (file.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('idle'),
);
artboard.addController(_controller = SimpleAnimation('idle'));
setState(() => _riveArtboard = artboard);
}
},

38
example/pubspec.lock
View File

@ -7,49 +7,49 @@ packages:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.5.0-nullsafety.1"
version: "2.5.0-nullsafety.2"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0-nullsafety.1"
version: "2.1.0-nullsafety.2"
characters:
dependency: transitive
description:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0-nullsafety.3"
version: "1.1.0-nullsafety.4"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0-nullsafety.1"
version: "1.2.0-nullsafety.2"
clock:
dependency: transitive
description:
name: clock
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0-nullsafety.1"
version: "1.1.0-nullsafety.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0-nullsafety.3"
version: "1.15.0-nullsafety.4"
fake_async:
dependency: transitive
description:
name: fake_async
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0-nullsafety.1"
version: "1.2.0-nullsafety.2"
flutter:
dependency: "direct main"
description: flutter
@ -73,21 +73,21 @@ packages:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.10-nullsafety.1"
version: "0.12.10-nullsafety.2"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0-nullsafety.3"
version: "1.3.0-nullsafety.5"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0-nullsafety.1"
version: "1.8.0-nullsafety.2"
rive:
dependency: "direct main"
description:
@ -106,55 +106,55 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0-nullsafety.2"
version: "1.8.0-nullsafety.3"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.dartlang.org"
source: hosted
version: "1.10.0-nullsafety.1"
version: "1.10.0-nullsafety.5"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0-nullsafety.1"
version: "2.1.0-nullsafety.2"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0-nullsafety.1"
version: "1.1.0-nullsafety.2"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0-nullsafety.1"
version: "1.2.0-nullsafety.2"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.19-nullsafety.2"
version: "0.2.19-nullsafety.4"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0-nullsafety.3"
version: "1.3.0-nullsafety.4"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0-nullsafety.3"
version: "2.1.0-nullsafety.4"
sdks:
dart: ">=2.10.0-110 <2.11.0"
dart: ">=2.11.0-0.0 <2.12.0"

38
pubspec.lock
View File

@ -7,49 +7,49 @@ packages:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.5.0-nullsafety.1"
version: "2.5.0-nullsafety.2"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0-nullsafety.1"
version: "2.1.0-nullsafety.2"
characters:
dependency: transitive
description:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0-nullsafety.3"
version: "1.1.0-nullsafety.4"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0-nullsafety.1"
version: "1.2.0-nullsafety.2"
clock:
dependency: transitive
description:
name: clock
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0-nullsafety.1"
version: "1.1.0-nullsafety.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0-nullsafety.3"
version: "1.15.0-nullsafety.4"
fake_async:
dependency: transitive
description:
name: fake_async
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0-nullsafety.1"
version: "1.2.0-nullsafety.2"
flutter:
dependency: "direct main"
description: flutter
@ -73,21 +73,21 @@ packages:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.10-nullsafety.1"
version: "0.12.10-nullsafety.2"
meta:
dependency: "direct main"
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0-nullsafety.3"
version: "1.3.0-nullsafety.5"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0-nullsafety.1"
version: "1.8.0-nullsafety.2"
sky_engine:
dependency: transitive
description: flutter
@ -99,55 +99,55 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0-nullsafety.2"
version: "1.8.0-nullsafety.3"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.dartlang.org"
source: hosted
version: "1.10.0-nullsafety.1"
version: "1.10.0-nullsafety.5"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0-nullsafety.1"
version: "2.1.0-nullsafety.2"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0-nullsafety.1"
version: "1.1.0-nullsafety.2"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0-nullsafety.1"
version: "1.2.0-nullsafety.2"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.19-nullsafety.2"
version: "0.2.19-nullsafety.4"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0-nullsafety.3"
version: "1.3.0-nullsafety.4"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0-nullsafety.3"
version: "2.1.0-nullsafety.4"
sdks:
dart: ">=2.10.0-110 <2.11.0"
dart: ">=2.11.0-0.0 <2.12.0"

2
pubspec.yaml
View File

@ -11,7 +11,7 @@ dependencies:
flutter:
sdk: flutter
graphs: ^0.2.0
meta: ^1.1.8
meta: ^1.2.3
dev_dependencies:
flutter_test: