I. Overview

• Rive is a FLARE upgrade version, is a real-time interaction design and animation tool.
• The reciprion of the file is.riv, Use it when loading animation isRive Flutter runtime
• Rive supports cross-platform, supports web, iOS, android, flutter, c ++ and other terminals

Two rive

2.1 Warehouse Address

Rive：https://github.com/rive-app/rive-flutter

2.2 plugin address

rive 0.7.9：https://pub.dev/packages/rive

2.3 plug-in installation and uninstall

Plug-in installation

Open the CMD terminal, execute the following instructions (automatically add Pubspec.yaml dependence)

flutter pub add rive

Plugin uninstall

Open the CMD terminal, perform the following instructions (Pubspec.yaml delete)

flutter pub remove rive

Three Rive Materials

3.1 Material Resources

https://rive.app/community/

3.2 Material Download

• On the material page, select the material to enter the details page, select the right sideOpen in Preview Playerturn on

  

• View available animation (as shown in Figure: Walk, Hit, IN)

  

• Return to the material details page for download (the downloaded file name is205-467-zombie-character.rivRenamedzombie.riv)

  

Four examples

4.1 Add RIV dependence (all files under Assets)

 assets:
    - images/
    - assets/

4.2 Code (by setting different names, display animation effect)

class _MyHomePageState extends State<MyHomePage> 
{
  //rive
  Artboard _riveArtboard;
  RiveAnimationController _controller;
  bool get isPlaying => _controller?.isActive ?? false;

  @override
  void initState() {
    super.initState();
    rootBundle.load("assets/zombie.riv").then((value) async {
      final file = RiveFile.import(value);
      final artboard = file.mainArtboard;
      artboard.addController(_controller = SimpleAnimation('idle'));
      setState(() => _riveArtboard = artboard);
    });
  }
 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: [
            Flexible(child:  _riveArtboard == null ?  Container(color: Colors.blue,) : Rive(artboard:_riveArtboard, alignment:Alignment.center, fit:BoxFit.contain, )),
            Column(
              mainAxisAlignment:MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                RaisedButton(child: Text("Walk"),onPressed: (){setState(() { _riveArtboard.addController(_controller = SimpleAnimation('Walk'));});}),
                RaisedButton(child: Text("Hit"),onPressed: (){setState(() { _riveArtboard.addController(_controller = SimpleAnimation('Hit'));});}),
                RaisedButton(child: Text("In"),onPressed: (){setState(() {_riveArtboard.addController(_controller = SimpleAnimation('In'));});})
            ],)
          ],
        ),
        floatingActionButton: FloatingActionButton(
        onPressed: _togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
       child: Icon(
        isPlaying ? Icons.pause : Icons.play_arrow,
        ),
    )
    );
  }

  void _togglePlay() {
    setState(() => _controller.isActive = !_controller.isActive);
  }
}

4.3 renderings