flutterkit / zerker

Zerker is a lightweight and powerful flutter graphic animation library

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.

➤ More detailed documentation about Zerker is here https://flutterkit.github.io/zerkerdocs/

Installation

Add this to your package's pubspec.yaml file, And execute the commandflutter pub get:

dependencies:
  zerker: <latest_version_here>

More detailed installation steps, you can refer to here. https://pub.dev/packages/zerker/install

Getting started

Import the package

import 'package:zerker/zerker.dart';

Useage

Create a zerker widget

class _MyHomePageState extends State<MyHomePage> {
  @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),
        ));
  }
}

Create your Zerker class inherited from ZKApp

class MyZKApp extends ZKApp {

  @override
  init() {
    super.init();
    /// init zerker scene
  }

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

Initialize the scene and create elements in the init function

/// Create a zerker 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);

/// Create a zerker text
ZKText text = ZKText()
  ..setPosition(100, 100)
  ..text = "hello world"
  ..setStyle(color: Colors.blueGrey, backgroundColor: Colors.red[50]);
stage.addChild(_text);

More cases

You can quickly start learning an example here. https://flutterkit.github.io/zerkerdocs/guide/tutorial.html

More zerker examples you can view here https://github.com/flutterkit/zerker-samples. If you have any questions about Zerker, please let me know by email, thank you very much!

License

Zerker is licensed under MIT license. View license. https://github.com/flutterkit/zerker/blob/master/LICENSE

zerker's Issues

example build failed

miss ImageStreamListener、TextWidthBasis and so on

Export to PNG/JPG file

Is there any method to export scene to PNG (transparent) or JPG image?

How to handle zerker element gesture sliding event

The following code

@override
void panStart(ZKEvent event) {}

@override
void panEnd(ZKEvent event) {}

@override
void panUpdate(ZKEvent event) {
    _handler(event.dx, event.dy);
}

onTouchMove not working

Hi, Can not seem to get the onTouchMove callback working. Awesome library, Keep up the good work!

How to dispose zerker?

class _MyHomePageState extends State<MyHomePage> {
  Zerker a;
  MyZKApp app = MyZKApp();
  @override
  void initState() {
    super.initState();
    a = Zerker(
        app: app, clip: true, interactive: true, width: 350, height: 350);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          actions: [
            InkWell(
              child: Text('dispose'),
              onTap: () {
                a = null;
                app.dispose();
                setState(() {});
              },
            )
          ],
        ),
        body: Center(
          child: a,
        ));
  }
}

I used the example with some modifications.

My computer is a poorly performing device, but my cell phone is worse. If the zerker is not dispose, the performance of the cell phone is very poor.
This cannot be solved with super.dispose.

Please provide me a solution.

scene transitions

In the description of this great package, it states we can make custom scene transitions. I would love to see an example or a code snippet to make a custom scene transition from one page to another. Something like Instagram/Snapchat story dismissing by swiping down and page being clipped down to a circle avatar in the first page.