diff --git a/doc/examples/widgets/.gitignore b/doc/examples/widgets/.gitignore
index 7e56423a9..c69615e35 100644
--- a/doc/examples/widgets/.gitignore
+++ b/doc/examples/widgets/.gitignore
@@ -70,3 +70,5 @@
 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
 
 .flutter-plugins-dependencies
+
+web
diff --git a/doc/examples/widgets/assets/images/buttons.png b/doc/examples/widgets/assets/images/buttons.png
new file mode 100644
index 000000000..4d55dfbae
Binary files /dev/null and b/doc/examples/widgets/assets/images/buttons.png differ
diff --git a/doc/examples/widgets/lib/generated_plugin_registrant.dart b/doc/examples/widgets/lib/generated_plugin_registrant.dart
new file mode 100644
index 000000000..db367c1ae
--- /dev/null
+++ b/doc/examples/widgets/lib/generated_plugin_registrant.dart
@@ -0,0 +1,16 @@
+//
+// Generated file. Do not edit.
+//
+
+// ignore: unused_import
+import 'dart:ui';
+
+import 'package:audioplayers/audioplayers_web.dart';
+
+import 'package:flutter_web_plugins/flutter_web_plugins.dart';
+
+// ignore: public_member_api_docs
+void registerPlugins(PluginRegistry registry) {
+  AudioplayersPlugin.registerWith(registry.registrarFor(AudioplayersPlugin));
+  registry.registerMessageHandler();
+}
diff --git a/doc/examples/widgets/lib/main.dart b/doc/examples/widgets/lib/main.dart
index 1a5273961..94a67158d 100644
--- a/doc/examples/widgets/lib/main.dart
+++ b/doc/examples/widgets/lib/main.dart
@@ -1,13 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:flame/flame.dart';
+import 'package:flame/spritesheet.dart';
 import 'package:dashbook/dashbook.dart';
 
 import 'package:flame/widgets/nine_tile_box.dart';
+import 'package:flame/widgets/sprite_button.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
   final nineTileBoxImage = await Flame.images.load('nine_tile_box.png');
+  await Flame.images.load('buttons.png');
+
+  final _buttons = SpriteSheet(imageName: 'buttons.png', textureHeight: 20, textureWidth: 60, columns: 1, rows: 2);
+
   final dashbook = Dashbook();
 
   dashbook.storiesOf('NineTileBox').decorator(CenterDecorator()).add(
@@ -30,5 +36,17 @@ void main() async {
             ),
           ));
 
+  dashbook.storiesOf('SpriteButton').decorator(CenterDecorator()).add(
+      'default',
+      (ctx) => Container(padding: const EdgeInsets.all(20), child: SpriteButton(
+          onPressed: () {
+            print('Pressed');
+          },
+          label: const Text('Sprite Button', style: const TextStyle(color: const Color(0xFF5D275D))),
+          sprite: _buttons.getSprite(0, 0),
+          pressedSprite: _buttons.getSprite(1, 0),
+      )),
+  );
+
   runApp(dashbook);
 }
diff --git a/doc/examples/widgets/pubspec.yaml b/doc/examples/widgets/pubspec.yaml
index d8c7d4612..503e2fc86 100644
--- a/doc/examples/widgets/pubspec.yaml
+++ b/doc/examples/widgets/pubspec.yaml
@@ -11,10 +11,11 @@ dependencies:
     sdk: flutter
   flame:
       path: ../../../
-  dashbook: ^0.0.2
+  dashbook: ^0.0.4
 
   cupertino_icons: ^0.1.2
 flutter:
   uses-material-design: true
   assets:
     - assets/images/nine_tile_box.png
+    - assets/images/buttons.png
diff --git a/lib/widgets/sprite_button.dart b/lib/widgets/sprite_button.dart
new file mode 100644
index 000000000..73042d806
--- /dev/null
+++ b/lib/widgets/sprite_button.dart
@@ -0,0 +1,77 @@
+import 'package:flutter/widgets.dart';
+import '../sprite.dart';
+import 'package:meta/meta.dart';
+
+class SpriteButton extends StatefulWidget {
+  final VoidCallback onPressed;
+  final Widget label;
+  final Sprite sprite;
+  final Sprite pressedSprite;
+  final double width;
+  final double height;
+
+  SpriteButton({
+    @required this.onPressed,
+    @required this.label,
+    @required this.sprite,
+    @required this.pressedSprite,
+
+    this.width,
+    this.height,
+  });
+
+  @override
+  State createState() => _ButtonState();
+}
+
+class _ButtonState extends State<SpriteButton> {
+  bool _pressed = false;
+
+  @override
+  Widget build(_) {
+    final width = widget.width ?? 200;
+    final height = widget.height ?? 50;
+
+    return GestureDetector(
+        onTapDown: (_) {
+          setState(() {
+            _pressed = true;
+          });
+        },
+        onTapUp: (_) {
+          setState(() {
+            _pressed = false;
+          });
+
+          widget.onPressed?.call();
+        },
+        child: Container(
+            width: width,
+            height: height,
+            child: CustomPaint(
+                painter: _ButtonPainer(_pressed ? widget.pressedSprite : widget.sprite),
+                child: Center(
+                    child: Container(
+                        padding: _pressed ? const EdgeInsets.only(top: 5) : null,
+                        child: widget.label,
+                    ),
+                ),
+            ),
+        ),
+    );
+  }
+}
+
+class _ButtonPainer extends CustomPainter {
+  final Sprite _sprite;
+
+  _ButtonPainer(this._sprite);
+
+  @override
+  bool shouldRepaint(_ButtonPainer old) => old._sprite != _sprite;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    _sprite.renderRect(canvas, Rect.fromLTWH(0, 0, size.width, size.height));
+  }
+}