# Introduction
# What is Zerker
Zerker is a flexible and lightweight flutter canvas graphic animation library.
With Zerker, you can create a lot of seemingly cumbersome animation effects, such as animated animations, pop-up animations, scene transitions, icon effects, and more.
At the same time, you can create a lot of simple games with Zerker. Zerker contains elements such as sprites, scrolling backgrounds, and atlases, making it easy to create game worlds with them.
Source Code https://github.com/flutterkit/zerker (opens new window)
# Install
# Use this package as a library
# 1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
zerker: <latest_version_here>
# 2. Install it
You can install packages from the command line: with Flutter:
$ flutter pub get
Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
# 3. Import it
Now in your Dart code, you can use:
import 'package:zerker/zerker.dart';
# More detailed installation steps, you can refer to here. https://pub.dev/packages/zerker#-installing-tab- (opens new window)
# Quick start
# Import the package
import 'package:zerker/zerker.dart';
# Useage
# Create a zerker widget
class _MyHomePageState extends State<MyHomePage> {
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),
));
}
}
# Create your Zerker class inherited from ZKApp
class MyZKApp extends ZKApp {
init() {
super.init();
/// init zerker scene
}
update(int time) {
super.update(time);
}
}
# Initialize the scene and create elements in the init function
/// Create a zerker sprite
ZKSprite bigboy = ZKSprite(key: "bigboy")
..position.x = size.width / 2
..position.y = size.height / 2
..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);
/// Create a zerker text
ZKText text = ZKText()
..setPosition(100, 100)
..text = "hello world"
..setStyle(color: Colors.blueGrey, backgroundColor: Colors.red[50]);
stage.addChild(_text);
Tutorial →