shape_shifter_icon 1.0.3 copy "shape_shifter_icon: ^1.0.3" to clipboard
shape_shifter_icon: ^1.0.3 copied to clipboard

Fully animated icons.

Shape Shifter Icon #

The package provides three different animated icons that can be used as standalone widgets or inside buttons. It is self-contained, it doesn't rely on online services and repositories — you bundle your icons with your app.

Standard animated icon #

SelfAnimatedIcon encloses a standard Flutter AnimatedIcon, its only advantage is that it's self-contained and requires no external animation controller. You just construct it:

SelfAnimatedIcon(
  [key: ...,]
  icon: one of the AnimatedIcons constants,
  state: a boolean,
  /// optional duration, defaults to kThemeAnimationDuration
  duration: const Duration(seconds: 1)
);
copied to clipboard

Icon animated between to icons #

SelfAnimatedTwoIcons is rather similar to the standard animated icon above but it requires two simple icons and animates between the two using the usual Flutter crossfade animation.

SelfAnimatedTwoIcons(
  [key: ...,]
  offIcon: an Icon,
  onIcon: another Icon,
  state: a boolean,
  /// optional duration, defaults to kThemeAnimationDuration
  duration: const Duration(seconds: 1)
);
copied to clipboard

Fully animated icon #

ShapeShifterIcon is, of course, the pièce de resistance. You visit https://shapeshifter.design, create and export a shape shifter animation that morphs an icon into another. These work like the stock AnimatedIcons, only that you can have your own and you're not limited to the very few available in that class.

Using it is almost as simple as the ones above:

ShapeShifterIcon(
  [key: ...,]
  state: a boolean,
  assets: a list of asset names,
  /// optional duration, defaults to kThemeAnimationDuration
  duration: const Duration(seconds: 1)
);
copied to clipboard

You simply have to pass a list of SVG files representing the individual frames. Shape Shifter exports to 30 fps (10 files) and 60 fps (19 files). Naming them is up to you, you can put each icon into a separate folder, or just name them iconname_framenumber.svg, however you please. Just create a list of the names and pass it to the icon. It might be as simple as:

  final assets = List.generate(19, (index) => 'assets/$index.svg');
copied to clipboard

for the 60 fps version.

Just like the underlying flutter_svg package, this package also supports compiling the SVG file into a binary format to achieve smaller size and better loading performance, using vector_graphics_compiler.

The only difference is that you need to call the ShapeShifterIcon.compiled() constructor instead:

ShapeShifterIcon.compiled(
  [key: ...,]
  state: a boolean,
  assets: a list of compiled asset names,
  /// optional duration, defaults to kThemeAnimationDuration
  duration: const Duration(seconds: 1)
);
copied to clipboard

Compiling is a single command:

dart run vector_graphics_compiler -i example/assets/0.svg -o example/assets/0.svg.vec
copied to clipboard

Don't forget that your file names will be different:

  final assets = List.generate(19, (index) => 'assets/$index.svg.vec');
copied to clipboard

Support #

If you like this package, please consider supporting it.

buy me a book

0
likes
130
points
53
downloads
screenshot

Publisher

verified publishertramontana.co.hu

Weekly Downloads

2024.08.05 - 2025.02.17

Fully animated icons.

Repository (GitHub)

Topics

#flutter #icon #animated

Documentation

API reference

Funding

Consider supporting this project:

buymeacoffee.com

License

MIT (license)

Dependencies

flutter, flutter_svg, vector_graphics

More

Packages that depend on shape_shifter_icon