diff --git a/.rive_head b/.rive_head index bff952e..d951bd1 100644 --- a/.rive_head +++ b/.rive_head @@ -1 +1 @@ -ef100e0d9462f9f71b0be53a0abdc2f438afeb92 +e68c7b6ded17c667fe344426e54710875fc58e94 diff --git a/README.md b/README.md index 15f4073..7657864 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ For more information, check out the following resources: 🛠 [Learning Rive](https://rive.app/learn-rive) -## Getting Started +## Getting started To get started with Rive Flutter, check out the following resources: - [Getting Started with Rive in Flutter](https://help.rive.app/runtimes/overview/flutter) @@ -43,7 +43,7 @@ For additional help, see the Runtime sections of the Rive help documentation, su - [Animation Playback](https://help.rive.app/runtimes/playback) - [State Machines](https://help.rive.app/runtimes/state-machines) -## Supported Platforms +## Supported platforms Be sure to read the [platform specific considerations](platform_considerations.md) for the Rive Flutter package. @@ -51,163 +51,6 @@ Be sure to read the [platform specific considerations](platform_considerations.m For even more examples and resources on using Rive at runtime or in other tools, checkout the [awesome-rive](https://github.com/rive-app/awesome-rive) repo. -## Examples - -To see some examples of what you can do with Rive Flutter, check out the following projects: - -- [Demo app](https://github.com/rive-app/rive-flutter/tree/master/example) -- [Find the Dog (game)](https://github.com/rive-app/find-the-dog) - -Here is an example of how to play an animation from a Rive file retrieved over HTTP: - -```dart -import 'package:flutter/material.dart'; -import 'package:rive/rive.dart'; - -void main() { - runApp(MaterialApp(home: SimpleAnimation())); -} - -class SimpleAnimation extends StatelessWidget { - const SimpleAnimation({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return const Scaffold( - body: Center( - child: RiveAnimation.network( - 'https://cdn.rive.app/animations/vehicles.riv', - ), - ), - ); - } -} -``` - -To play an animation from an asset bundle, use: - -```dart -RiveAnimation.asset('assets/truck.riv'); -``` - -Control playing and pausing a looping animation: - -```dart -import 'package:flutter/material.dart'; -import 'package:rive/rive.dart'; - -void main() { - runApp(MaterialApp(home: PlayPauseAnimation())); -} - -class PlayPauseAnimation extends StatefulWidget { - const PlayPauseAnimation({Key? key}) : super(key: key); - - @override - _PlayPauseAnimationState createState() => _PlayPauseAnimationState(); -} - -class _PlayPauseAnimationState extends State { - // Controller for playback - late RiveAnimationController _controller; - - // Toggles between play and pause animation states - void _togglePlay() => - setState(() => _controller.isActive = !_controller.isActive); - - /// Tracks if the animation is playing by whether controller is running - bool get isPlaying => _controller.isActive; - - @override - void initState() { - super.initState(); - _controller = SimpleAnimation('idle'); - } - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: RiveAnimation.network( - 'https://cdn.rive.app/animations/vehicles.riv', - controllers: [_controller], - // Update the play state when the widget's initialized - onInit: (_) => setState(() {}), - ), - ), - floatingActionButton: FloatingActionButton( - onPressed: _togglePlay, - tooltip: isPlaying ? 'Pause' : 'Play', - child: Icon( - isPlaying ? Icons.pause : Icons.play_arrow, - ), - ), - ); - } -} -``` - -Play a one-shot animation repeatedly on demand - -```dart -/// Demonstrates playing a one-shot animation on demand - -import 'package:flutter/material.dart'; -import 'package:rive/rive.dart'; - -void main() { - runApp(MaterialApp(home: PlayOneShotAnimation())); -} - -class PlayOneShotAnimation extends StatefulWidget { - const PlayOneShotAnimation({Key? key}) : super(key: key); - - @override - _PlayOneShotAnimationState createState() => _PlayOneShotAnimationState(); -} - -class _PlayOneShotAnimationState extends State { - /// Controller for playback - late RiveAnimationController _controller; - - /// Is the animation currently playing? - bool _isPlaying = false; - - @override - void initState() { - super.initState(); - _controller = OneShotAnimation( - 'bounce', - autoplay: false, - onStop: () => setState(() => _isPlaying = false), - onStart: () => setState(() => _isPlaying = true), - ); - } - - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: const Text('One-Shot Example'), - ), - body: Center( - child: RiveAnimation.network( - 'https://cdn.rive.app/animations/vehicles.riv', - animations: const ['idle', 'curves'], - controllers: [_controller], - ), - ), - floatingActionButton: FloatingActionButton( - // disable the button while playing the animation - onPressed: () => _isPlaying ? null : _controller.isActive = true, - tooltip: 'Play', - child: const Icon(Icons.arrow_upward), - ), - ); - } -} -``` - ## Contributing We love contributions and all are welcome! 💙