funvas 0.1.8 copy "funvas: ^0.1.8" to clipboard
funvas: ^0.1.8 copied to clipboard

Package for creating canvas animations based on time and math functions. Fun + canvas -> funvas :)

funvas GitHub stars Pub version Twitter Follow #

Flutter package that allows creating canvas animations based on time and math functions.

The name "funvas" is based on Flutter + fun + canvas. Let me know if you have any better ideas :)

Concept #

The idea of the package is to provide an easy way to create custom canvas animations based only on time and some math functions (sine, cosine, etc.) - like this one.

Inspired by Dwitter (check it out). This is also the reason why the following shortcut functions and variables are available; they might be expanded upon in the future given that there are a lot more possibilities:

u(t) is called 60 times per second.
    t: Elapsed time in seconds.
    S: Shorthand for sin from dart:math.
    C: Shorthand for cos from dart:math.
    T: Shorthand for tan from dart:math.
    R: Shorthand for Color.fromRGBA, usage ex.: R(255, 255, 255, 0.5)
    c: A dart:ui canvas.
    x: A context for the canvas, providing size.

You can of course use all of the Canvas functionality, the same way you can use them in a CustomPainter; the above is just in homage to Dwitter :)

Usage #

You create funvas animations by extending Funvas and you can display the animations using a FunvasContainer. Note that you have to size the animation from outside, e.g. using a SizedBox.

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

/// Example implementation of a funvas.
/// The animation is drawn in [u] based on [t] in seconds.
class ExampleFunvas extends Funvas {
  void u(double t) {
      Offset(x.width / 2, x.height / 2),
      S(t).abs() * x.height / 4 + 42,
      Paint()..color = R(C(t) * 255, 42, 60 + T(t)),

/// Example widget that displays the [ExampleFunvas] animation.
class ExampleFunvasWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return SizedBox(
      width: 420,
      height: 420,
      child: FunvasContainer(
        funvas: ExampleFunvas(),

See the example package for a complete example implementation.

Funvas is a package that I wrote because I wanted to create some Dwitter-like animations in Flutter myself. Because of that, I have created a lot surrounding it, which you might not discover when looking only at the package :)
And not only me - the community has also created some amazing projects with it ✨

In the main README on GitHub you can find:

  • Gallery - live demo showcasing some of my funvas animations.
  • Community projects - list of projects created by the community using the funvas package.
pub points



Package for creating canvas animations based on time and math functions. Fun + canvas -> funvas :)

Repository (GitHub)
View/report issues


API reference


BSD-3-Clause (LICENSE)


flutter, meta


Packages that depend on funvas