diff --git a/doc/examples/widgets/lib/main.dart b/doc/examples/widgets/lib/main.dart
index 908ed942b..b76594fc5 100644
--- a/doc/examples/widgets/lib/main.dart
+++ b/doc/examples/widgets/lib/main.dart
@@ -8,6 +8,32 @@ import 'package:flame/widgets/nine_tile_box.dart';
 import 'package:flame/widgets/sprite_button.dart';
 import 'package:flame/widgets/sprite_widget.dart';
 import 'package:flame/widgets/animation_widget.dart';
+import 'package:flame/anchor.dart';
+
+Anchor parseAnchor(String name) {
+  switch (name) {
+    case 'Anchor.topLeft':
+      return Anchor.topLeft;
+    case 'Anchor.topCenter':
+      return Anchor.topCenter;
+    case 'Anchor.topRight':
+      return Anchor.topRight;
+    case 'Anchor.centerLeft':
+      return Anchor.centerLeft;
+    case 'Anchor.center':
+      return Anchor.center;
+    case 'Anchor.centerRight':
+      return Anchor.centerRight;
+    case 'Anchor.bottomLeft':
+      return Anchor.bottomLeft;
+    case 'Anchor.bottomCenter':
+      return Anchor.bottomCenter;
+    case 'Anchor.bottomRight':
+      return Anchor.bottomRight;
+  }
+
+  return null;
+}
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -63,16 +89,27 @@ void main() async {
         ),
       );
 
+  final anchorOptions = [
+    'Anchor.topLeft',
+    'Anchor.topCenter',
+    'Anchor.topRight',
+    'Anchor.centerLeft',
+    'Anchor.center',
+    'Anchor.centerRight',
+    'Anchor.bottomLeft',
+    'Anchor.bottomCenter',
+    'Anchor.bottomRight',
+  ];
   final shieldSprite = await Sprite.loadSprite('shield.png');
   dashbook.storiesOf('SpriteWidget').decorator(CenterDecorator()).add(
         'default',
         (ctx) => Container(
           width: ctx.numberProperty('container width', 400),
           height: ctx.numberProperty('container height', 200),
-          padding: const EdgeInsets.all(20),
           child: SpriteWidget(
             sprite: shieldSprite,
-            center: ctx.boolProperty('center', true),
+            anchor: parseAnchor(
+                ctx.listProperty('anchor', 'Anchor.center', anchorOptions)),
           ),
         ),
       );
@@ -85,22 +122,18 @@ void main() async {
     columns: 4,
     rows: 1,
   );
-  final _animation = _animationSpriteSheet.createAnimation(
-    0,
-    stepTime: 0.2,
-    to: 3,
-    loop: true,
-  );
+  final _animation = _animationSpriteSheet.createAnimation(0,
+      stepTime: 0.2, to: 3, loop: true);
   dashbook.storiesOf('AnimationWidget').decorator(CenterDecorator()).add(
         'default',
         (ctx) => Container(
           width: ctx.numberProperty('container width', 400),
           height: ctx.numberProperty('container height', 200),
-          padding: const EdgeInsets.all(20),
           child: AnimationWidget(
             animation: _animation,
             play: ctx.boolProperty('playing', true),
-            center: ctx.boolProperty('center', true),
+            anchor: parseAnchor(
+                ctx.listProperty('anchor', 'Anchor.center', anchorOptions)),
           ),
         ),
       );
diff --git a/doc/examples/widgets/pubspec.yaml b/doc/examples/widgets/pubspec.yaml
index a4a1082cf..9c9856cc4 100644
--- a/doc/examples/widgets/pubspec.yaml
+++ b/doc/examples/widgets/pubspec.yaml
@@ -11,7 +11,7 @@ dependencies:
     sdk: flutter
   flame:
       path: ../../../
-  dashbook: ^0.0.5
+  dashbook: ^0.0.6
 
   cupertino_icons: ^0.1.2
 flutter:
diff --git a/lib/widgets/animation_widget.dart b/lib/widgets/animation_widget.dart
index 8e099345b..14cec31fd 100644
--- a/lib/widgets/animation_widget.dart
+++ b/lib/widgets/animation_widget.dart
@@ -1,19 +1,20 @@
 import 'package:flutter/material.dart' hide Animation;
 import 'package:flame/animation.dart';
 
+import '../anchor.dart';
 import './sprite_widget.dart';
 
 import 'dart:math';
 
 class AnimationWidget extends StatefulWidget {
   final Animation animation;
-  final bool center;
+  final Anchor anchor;
   final bool play;
 
   AnimationWidget({
     this.animation,
     this.play = true,
-    this.center = false,
+    this.anchor = Anchor.topLeft,
   }) : assert(animation.loaded(), 'Animation must be loaded');
 
   @override
@@ -83,6 +84,6 @@ class _AnimationWidget extends State<AnimationWidget>
   @override
   Widget build(ctx) {
     return SpriteWidget(
-        sprite: widget.animation.getSprite(), center: widget.center);
+        sprite: widget.animation.getSprite(), anchor: widget.anchor);
   }
 }
diff --git a/lib/widgets/sprite_widget.dart b/lib/widgets/sprite_widget.dart
index e2866baea..f13fc6dcd 100644
--- a/lib/widgets/sprite_widget.dart
+++ b/lib/widgets/sprite_widget.dart
@@ -1,35 +1,36 @@
 import 'package:flutter/widgets.dart';
 import 'package:meta/meta.dart';
 import '../sprite.dart';
+import '../anchor.dart';
 
 import 'dart:math';
 
 class SpriteWidget extends StatelessWidget {
   final Sprite sprite;
-  final bool center;
+  final Anchor anchor;
 
   SpriteWidget({
     @required this.sprite,
-    this.center = false,
+    this.anchor = Anchor.topLeft,
   }) : assert(sprite.loaded(), 'Sprite must be loaded');
 
   @override
   Widget build(_) {
     return Container(
-      child: CustomPaint(painter: _FlameSpritePainer(sprite, center)),
+      child: CustomPaint(painter: _SpritePainer(sprite, anchor)),
     );
   }
 }
 
-class _FlameSpritePainer extends CustomPainter {
+class _SpritePainer extends CustomPainter {
   final Sprite _sprite;
-  final bool _center;
+  final Anchor _anchor;
 
-  _FlameSpritePainer(this._sprite, this._center);
+  _SpritePainer(this._sprite, this._anchor);
 
   @override
-  bool shouldRepaint(_FlameSpritePainer old) =>
-      old._sprite != _sprite || old._center != _center;
+  bool shouldRepaint(_SpritePainer old) =>
+      old._sprite != _sprite || old._anchor != _anchor;
 
   @override
   void paint(Canvas canvas, Size size) {
@@ -38,20 +39,17 @@ class _FlameSpritePainer extends CustomPainter {
 
     final rate = min(widthRate, heightRate);
 
-    final rect = Rect.fromLTWH(
-      0,
-      0,
-      _sprite.size.x * rate,
-      _sprite.size.y * rate,
+    final w = _sprite.size.x * rate;
+    final h = _sprite.size.y * rate;
+
+    final double dx = _anchor.relativePosition.dx * size.width;
+    final double dy = _anchor.relativePosition.dy * size.height;
+
+    canvas.translate(
+      dx - w * _anchor.relativePosition.dx,
+      dy - h * _anchor.relativePosition.dy,
     );
 
-    if (_center) {
-      canvas.translate(
-        size.width / 2 - rect.width / 2,
-        size.height / 2 - rect.height / 2,
-      );
-    }
-
-    _sprite.renderRect(canvas, rect);
+    _sprite.render(canvas, width: w, height: h);
   }
 }