diff --git a/README.md b/README.md index 77951df..655a227 100644 --- a/README.md +++ b/README.md @@ -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 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 { + 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/). \ No newline at end of file diff --git a/example/lib/main.dart b/example/lib/main.dart index c391f4a..5705960 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -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 { 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 { // 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); } }, diff --git a/example/pubspec.lock b/example/pubspec.lock index db8d062..48ee834 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -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" diff --git a/pubspec.lock b/pubspec.lock index 6af7cad..fa6cc0e 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -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" diff --git a/pubspec.yaml b/pubspec.yaml index 19cedc6..ea39bb9 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -11,7 +11,7 @@ dependencies: flutter: sdk: flutter graphs: ^0.2.0 - meta: ^1.1.8 + meta: ^1.2.3 dev_dependencies: flutter_test: