AnimatedCopy Icon with Rive

AnimatedCopy

/// Copyright © Rebar Ahmad
/// 12. June 2021 - Germany
///
/// IMPORTANT: You've to install the rive package:
///   rive: 0.7.14
/// at first

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: 'Rive Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'AnimatedCopy Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  Artboard _riveArtboard;
  RiveAnimationController _controller;

  /// Toggles playing/pausing the animation
  void _toggleCopy() {
    if (_controller != null) {
      _riveArtboard.addController(_controller = SimpleAnimation('Copied'));
      _controller.isActiveChanged.addListener(() {
        if (_controller.isActive) {
          print('Animation started playing');
        } else {
          print('Animation stopped playing');
          Future.delayed(
            const Duration(seconds: 1),
            () {
              _riveArtboard.addController(
                _controller = SimpleAnimation('Done'),
              );
            },
          );
        }
      });
    }
  }

  /// Tracks if the animation is playing by whether controller is running.
  bool get isPlaying => _controller?.isActive ?? false;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
      // Load the animation file from the bundle, note that you could also
      // download this. The RiveFile just expects a list of bytes.
      ByteData data = await rootBundle.load('assets/animatedcopy_30s.riv');

      // Load the RiveFile from the binary data.
      final file = RiveFile.import(data);

      // The artboard is the root of the animation and gets drawn in the
      // Rive widget.
      final artboard = file.mainArtboard;
      setState(() => _riveArtboard = artboard);

      // 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.
      _riveArtboard.addController(_controller = SimpleAnimation('Idle'));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _riveArtboard == null
            ? const SizedBox()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Text(
                    'Preview',
                    textScaleFactor: 2,
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  SizedBox(
                    height: kToolbarHeight,
                    width: kToolbarHeight,
                    child: Rive(artboard: _riveArtboard),
                  ),
                ],
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleCopy,
        backgroundColor: Colors.blueAccent,
        tooltip: (_controller?.isActive ?? false) ? 'Done' : 'Copy',
        child: _riveArtboard == null
            ? const SizedBox()
            : SizedBox(
                height: 24,
                width: 24,
                child: Rive(artboard: _riveArtboard),
              ),
      ),
    );
  }
}