If you’re looking to add rich, animated graphics to your Flutter application without breaking a sweat, Zerker is the perfect companion for you! This flexible and lightweight canvas graphic animation library empowers you to create an array of effects such as animations, pop-ups, scene transitions, and even basic games! In this blog post, we will guide you through the installation and usage of Zerker, helping you bring your graphics to life.

What is Zerker?

Zerker is a versatile Flutter library designed specifically for seamless graphic animations on canvas. Whether you want to generate animated effects, create games with sprites or scrolling backgrounds, or simply spruce up your UI, Zerker has got you covered. You can dive deeper into the capabilities of Zerker in the comprehensive documentation here.

Installation

To install Zerker, add the following line to your project’s pubspec.yaml file under dependencies:

dependencies:
  zerker: latest_version_here

Then, run the command:

flutter pub get

For more detailed installation steps, check out the guide here.

Getting Started with Zerker

Import the Package

To start using Zerker in your Flutter project, you need to import it at the top of your Dart file:

import 'package:zerker/zerker.dart';

Creating a Zerker Widget

Let’s create a simple Flutter widget using Zerker. Below, we’ll keep things straightforward:

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Zerker(app: MyZKApp(), clip: true, interactive: true, width: 350, height: 350),
      ),
    );
  }
}

Creating a Zerker Class

Next, we’ll define our Zerker class, which extends ZKApp to create interactive graphics. This part can be compared to building a house: you have a foundation and as you go, you add rooms and features:

• Foundation
• Building Rooms: The init() method allows you to set up the scene similar to deciding how many rooms your house will have.
• Adding Furniture: The update() method is like arranging your furniture; here you determine how components move and interact.

class MyZKApp extends ZKApp {
  @override
  init() {
    super.init(); // Initiate the Zerker scene
  }

  @override
  update(int time) {
    super.update(time);
    sprite.position.x++; // Move the sprite
  }
}

// Create a sprite
ZKSprite bigboy = ZKSprite(key: bigboy)
  ..animator.make(front, [0, 1, 2, 3, 4])
  ..animator.make(left, [5-9])
  ..animator.make(after, [10-14])
  ..animator.make(right, [15-19])
  ..onTapDown = (event) {
    bigboy.animator.play(right, 8, true);
  };
stage.addChild(bigboy);  // Add sprite to the stage

// Create a text
ZKText text = ZKText()
  ..setPosition(100, 100)
  ..text = 'hello world'
  ..setStyle(color: Colors.blueGrey, backgroundColor: Colors.red[50]);
stage.addChild(text); // Add text to the stage
}