mirror of
https://github.com/rive-app/rive-flutter.git
synced 2025-08-06 16:40:27 +08:00
chore: update README
Mostly sentence case for headers and adding new info as needed + removing older things Diffs= e68c7b6de chore: update README (#6824) bcf6451f4 Unity webgl! (#6816) 09feaccb0 Always decode 3 or 4 channel PNG images. (#6818) Co-authored-by: Gordon <pggordonhayes@gmail.com>
This commit is contained in:
HayesGordon
@ -1 +1 @@
|
|||||||
ef100e0d9462f9f71b0be53a0abdc2f438afeb92
|
e68c7b6ded17c667fe344426e54710875fc58e94
|
||||||
|
|||||||
161
README.md
161
README.md
@ -32,7 +32,7 @@ For more information, check out the following resources:
|
|||||||
|
|
||||||
🛠 [Learning Rive](https://rive.app/learn-rive)
|
🛠 [Learning Rive](https://rive.app/learn-rive)
|
||||||
|
|
||||||
## Getting Started
|
## Getting started
|
||||||
|
|
||||||
To get started with Rive Flutter, check out the following resources:
|
To get started with Rive Flutter, check out the following resources:
|
||||||
- [Getting Started with Rive in Flutter](https://help.rive.app/runtimes/overview/flutter)
|
- [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)
|
- [Animation Playback](https://help.rive.app/runtimes/playback)
|
||||||
- [State Machines](https://help.rive.app/runtimes/state-machines)
|
- [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.
|
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.
|
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<PlayPauseAnimation> {
|
|
||||||
// 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<PlayOneShotAnimation> {
|
|
||||||
/// 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
|
## Contributing
|
||||||
|
|
||||||
We love contributions and all are welcome! 💙
|
We love contributions and all are welcome! 💙
|
||||||
|
|||||||
Reference in New Issue
Block a user