---
title: Introduction
description: >-
  A pure-Dart DragonBones runtime and a Flutter Canvas renderer. What they are,
  what is verified, and what is not.
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.page/RafaelBarbosatec/dragonbones_flutter/llms.txt
> Use this file to discover all available pages before exploring further.

Skeletal (bone-based) animation for **Dart** and **Flutter**, from animations
exported by **DragonBones** — the free, MIT alternative to Spine and Rive.

## The premise

Skeletal animation is table stakes for a 2D game: slot and skin swapping, deform
meshes, bone attachment, animation events. **In Flutter there has been no free,
end-to-end option for it — a free editor, an open format, and an MIT runtime a
game can depend on without a commercial licence.**

DragonBones is exactly that, and its runtimes shipped officially for
TypeScript/JS, C++, C#, Java, Haxe and ActionScript — but **never for Dart or
Flutter**. This project closes that gap.

<Info>
  **Status: v0.4.1.** Feature-complete for the common case, not for everything.
  Both packages are on pub.dev:
  [`dragonbones`](https://pub.dev/packages/dragonbones) (the runtime) and
  [`dragonbones_flutter`](https://pub.dev/packages/dragonbones_flutter) (the
  renderer). The runtime's `0.4.0` adds animated IK, `Surface` bones and
  animation blending; the renderer's `0.4.1` is in the repository, waiting for
  its release commit, and depends on it. For exactly what is missing, read
  [Limitations](/limitations): it is a short, specific list, not a vague
  disclaimer.
</Info>

## Two packages

| Package | What it is | Depends on |
| --- | --- | --- |
| `dragonbones` | The runtime. Parses and evaluates the format, and exposes the pose as a **framework-agnostic draw list**. | Nothing. Zero dependencies. |
| `dragonbones_flutter` | The renderer. Turns that draw list into `Canvas` calls. | Flutter only — no game engine. |

The split is the whole point. A skeletal runtime is a pile of matrix maths, and
that maths **drifts silently** — a bone off by a few thousandths looks fine until
a foot slides through the floor. Keeping the runtime free of Flutter means it can
be verified with a **bare Dart SDK**, no GPU and no device, against the official
implementation. See [Architecture & verification](/architecture).

The renderer is deliberately not coupled to any engine. It is two methods:

```dart
player.update(dt);     // advance the animation
player.render(canvas); // draw the pose
```

That is the entire contract, which is why the same code drops into a plain
Flutter app, any game engine's component, or your own painter. Placement is the
only extra: `player.fit(size: ..., align: ...)` measures the pose and writes
`scale`/`offset`, so an engine component never has to.

## Verify it yourself

The claim this project makes is not "it works" but "it matches the official
runtime, and here is the number". Measured on the current commit:

```text
1353695 numeric comparisons over 56 assets (56 clean, 0 failing)
205259 mesh values, 1228 nested-armature slots
RESULT: PASS
```

56 assets replayed frame by frame — the whole DragonBones **Unity SDK** demo set
plus a hand-picked ladder and the feature fixtures (animated IK, `Surface` bones,
animation blending) — comparing every bone matrix, every slot's draw data, every
posed mesh vertex and UV, and every flattened nested-armature slot against the
official runtime. Worst-case error is ~5e-7, which is the rounding precision of
the reference dumps themselves.

<CardGroup cols={2}>
  <Card title="Getting started" icon="rocket" href="/getting-started">
    Load an export and put an animated character on a Canvas.
  </Card>
  <Card title="Integration" icon="puzzle-piece" href="/integration">
    Any engine, your own painter, or a headless test.
  </Card>
  <Card title="Limitations" icon="triangle-exclamation" href="/limitations">
    Read this one before committing a project. What is not evaluated, and how to
    tell whether your assets are affected.
  </Card>
  <Card title="Architecture" icon="sitemap" href="/architecture">
    How the port is built, and why the verification means something.
  </Card>
</CardGroup>

## Is it good enough for my project?

**Probably yes** if you are drawing animated characters with sprites and meshes,
swapping skins and equipment, mounting weapons or effects on bones, animating IK
weights, deforming surfaces, or blending animations by parameter. That is what is
verified.

**Probably not yet** if you need:

- **path constraints** (bones following a path), or
- **binary `.dragonbones`** input (JSON exports only).

<Warning>
  Those gaps are *not evaluated* rather than *unsupported*, which is the
  dangerous kind: a file using them loads and animates, then behaves subtly wrong
  instead of failing loudly. [Limitations](/limitations) lists each one, what you
  will see, and how to tell from the JSON whether your assets rely on it.
</Warning>

## Why free matters

There is no shortage of ways to make a 2D game in Flutter. There has, until now,
been no free way to give it skeletal animation — the pipeline a game would have
to adopt (editor, format and runtime) was commercial in some part that mattered.

DragonBones is MIT end to end. That is the whole point of this port: not a nicer
API, but the same free pipeline the rest of the ecosystem already had, finally
available to Dart.

For a real game the win is not "prettier sprites". It is **slot and skin
swapping** (equip armour and weapons without authoring N sprites per
combination), **deform meshes**, **bone attachment** for hitboxes and effect
spawn points, and [**animation events**](/events) that drive gameplay from the
animation itself.
