how create a RIVE animation with flutter

Question

I want to create a RIVE animation with flutter. I followed a tutorial in YouTube. I wrote the same thing but when I execute two errors is displayed

 (RiveFile.import (data);
 file.mainArtboard;)

Here is the code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rive/rive.dart';


void main() {

  

runApp(MyApp());

}


class MyApp extends StatelessWidget {

  @override


  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',


      home: MyPage(),
    );

  }
}

class MyPage extends StatelessWidget {


  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(
          title: Text('Using Rive'),

        ),
        body: RocketContainer());
  }
}

class RocketContainer extends StatefulWidget {
  @override

  _RocketContainerState createState() => _RocketContainerState();
}


class _RocketContainerState extends State<RocketContainer> {

  Artboard _artboard;
  RiveAnimationController _rocketController;

  @override

  void initState() {
    _loadRiveFile();
    super.initState();
  }

  void _loadRiveFile() async {
    final bytes = await rootBundle.load('assets/rocket.riv');
    final file = RiveFile.import(bytes);

    setState(() {
      _artboard = file.mainArtboard;
    });
  }

  void _launch() async {
    _artboard.addController(
      _rocketController = SimpleAnimation('launch'),
    );
    setState(() => _rocketController.isActive = true);
  }

  void _fall() async {
    _artboard.addController(
      _rocketController = SimpleAnimation('fall'),
    );
    setState(() => _rocketController.isActive = true);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height - 250,
            child: _artboard != null
                ? Rive(
                    artboard: _artboard,
                    fit: BoxFit.cover,
                  )
                : Container()),
        TextButton(onPressed: () => _launch(), child: Text('launch')),
        TextButton(onPressed: () => _fall(), child: Text('fall'))
      ],
    );
  }
}

errors:

The current Dart SDK version is 2.10.5.
Because animation depends on cupertino_icons >=1.0.1 which requires SDK version >=2.12.0-0 <3.0.0, version solving failed.
pub get failed (1; Because animation depends on cupertino_icons >=1.0.1 which requires SDK version >=2.12.0-0 <3.0.0, version solving failed.)
*error: Instance member 'import' can't be accessed using static access. (static_access_to_instance_member at [animation] lib\main.dart:47)
*error: The getter 'mainArtboard' isn't defined for the type 'bool'. (undefined_getter at [animation] lib\main.dart:50)

Answer 1

You could have a look at the example provided with the updated and latest documentation of Rive in their official Github repository.

Control playing and pausing a looping animation:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

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,
        ),
      ),
    );
  }
}

To play an animation from an asset bundle, use:

RiveAnimation.asset('assets/vehicles.riv'

in place of

RiveAnimation.network('https://cdn.rive.app/animations/vehicles.riv', 

This line:

_controller = SimpleAnimation('idle');

attempts to play an animation called 'idle'. If your animation is named differently, try replacing the name here.