Adding NineTileBox widget

doc/examples/widgets/.flutter-plugins-dependencies

@@ -0,0 +1 @@
+{"_info":"// This is a generated file; do not edit or check into version control.","dependencyGraph":[{"name":"audioplayers","dependencies":["path_provider"]},{"name":"path_provider","dependencies":[]}]}

doc/examples/widgets/.gitignore

@@ -0,0 +1,71 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# Visual Studio Code related
+.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+.dart_tool/
+.flutter-plugins
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Android related
+**/android/**/gradle-wrapper.jar
+**/android/.gradle
+**/android/captures/
+**/android/gradlew
+**/android/gradlew.bat
+**/android/local.properties
+**/android/**/GeneratedPluginRegistrant.java
+
+# iOS/XCode related
+**/ios/**/*.mode1v3
+**/ios/**/*.mode2v3
+**/ios/**/*.moved-aside
+**/ios/**/*.pbxuser
+**/ios/**/*.perspectivev3
+**/ios/**/*sync/
+**/ios/**/.sconsign.dblite
+**/ios/**/.tags*
+**/ios/**/.vagrant/
+**/ios/**/DerivedData/
+**/ios/**/Icon?
+**/ios/**/Pods/
+**/ios/**/.symlinks/
+**/ios/**/profile
+**/ios/**/xcuserdata
+**/ios/.generated/
+**/ios/Flutter/App.framework
+**/ios/Flutter/Flutter.framework
+**/ios/Flutter/Generated.xcconfig
+**/ios/Flutter/app.flx
+**/ios/Flutter/app.zip
+**/ios/Flutter/flutter_assets/
+**/ios/ServiceDefinitions.json
+**/ios/Runner/GeneratedPluginRegistrant.*
+
+# Exceptions to above rules.
+!**/ios/**/default.mode1v3
+!**/ios/**/default.mode2v3
+!**/ios/**/default.pbxuser
+!**/ios/**/default.perspectivev3
+!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
+

doc/examples/widgets/.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: 0aed0b61a1789ed06c9fa05a6c5fcfbd398c4811
+  channel: master
+
+project_type: app

doc/examples/widgets/README.md

@@ -0,0 +1,3 @@
+# Widgets
+
+A Flutter project showcasing Flame's widgets.

doc/examples/widgets/lib/main.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:flame/flame.dart';
+import 'package:dashbook/dashbook.dart';
+
+import 'package:flame/widgets/nine_tile_box.dart';
+
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  final nineTileBoxImage = await Flame.images.load('nine_tile_box.png');
+  final dashbook = Dashbook();
+
+  dashbook.storiesOf('SpritesheetContainer').decorator(CenterDecorator()).add(
+      'default',
+      (ctx) => Container(
+            width: ctx.numberProperty('width', 200),
+            height: ctx.numberProperty('height', 200),
+            child: NineTileBox(
+              image: nineTileBoxImage,
+              tileSize: 16,
+              destTileSize: 50,
+              child: const Center(
+                  child: const Text('Cool label',
+                      style: const TextStyle(color: const Color(0xFFFFFFFF)))),
+            ),
+          ));
+
+  runApp(dashbook);
+}

doc/examples/widgets/pubspec.yaml

@@ -0,0 +1,20 @@
+name: widgets
+description: A Flutter project showcasing Flame's widgets.
+
+version: 1.0.0+1
+
+environment:
+  sdk: ">=2.1.0 <3.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flame:
+      path: ../../../
+  dashbook: ^0.0.2
+
+  cupertino_icons: ^0.1.2
+flutter:
+  uses-material-design: true
+  assets:
+    - assets/images/nine_tile_box.png

lib/widgets/nine_tile_box.dart

@@ -0,0 +1,138 @@
+import 'package:flutter/widgets.dart' as widgets;
+import 'package:meta/meta.dart';
+import '../sprite.dart';
+import 'dart:ui';
+
+class _Painter extends widgets.CustomPainter {
+  final Image image;
+  final double tileSize;
+  final double destTileSize;
+
+  _Painter(
+      {@required this.image,
+      @required this.tileSize,
+      @required this.destTileSize});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final topLeftCorner =
+        Sprite.fromImage(image, x: 0, y: 0, width: tileSize, height: tileSize);
+    final topRightCorner = Sprite.fromImage(image,
+        x: tileSize * 2, y: 0, width: tileSize, height: tileSize);
+
+    final bottomLeftCorner = Sprite.fromImage(image,
+        x: 0, y: 2 * tileSize, width: tileSize, height: tileSize);
+    final bottomRightCorner = Sprite.fromImage(image,
+        x: tileSize * 2, y: 2 * tileSize, width: tileSize, height: tileSize);
+
+    final topSide = Sprite.fromImage(image,
+        x: tileSize, y: 0, width: tileSize, height: tileSize);
+    final bottomSide = Sprite.fromImage(image,
+        x: tileSize, y: tileSize * 2, width: tileSize, height: tileSize);
+
+    final leftSide = Sprite.fromImage(image,
+        x: 0, y: tileSize, width: tileSize, height: tileSize);
+    final rightSide = Sprite.fromImage(image,
+        x: tileSize * 2, y: tileSize, width: tileSize, height: tileSize);
+
+    final middle = Sprite.fromImage(image,
+        x: tileSize, y: tileSize, width: tileSize, height: tileSize);
+
+    // Middle
+    for (var y = destTileSize;
+        y < size.height - destTileSize;
+        y = y + destTileSize) {
+      for (var x = destTileSize;
+          x < size.width - destTileSize;
+          x = x + destTileSize) {
+        middle.renderRect(
+            canvas, Rect.fromLTWH(x, y, destTileSize, destTileSize));
+      }
+    }
+
+    // Top and bottom side
+    for (var i = destTileSize;
+        i < size.width - destTileSize;
+        i = i + destTileSize) {
+      topSide.renderRect(
+          canvas, Rect.fromLTWH(i, 0, destTileSize, destTileSize));
+      bottomSide.renderRect(
+          canvas,
+          Rect.fromLTWH(
+              i, size.height - destTileSize, destTileSize, destTileSize));
+    }
+
+    // Left and right side
+    for (var i = destTileSize;
+        i < size.height - destTileSize;
+        i = i + destTileSize) {
+      leftSide.renderRect(
+          canvas, Rect.fromLTWH(0, i, destTileSize, destTileSize));
+      rightSide.renderRect(
+          canvas,
+          Rect.fromLTWH(
+              size.width - destTileSize, i, destTileSize, destTileSize));
+    }
+
+    // Corners
+    topLeftCorner.renderRect(
+        canvas, Rect.fromLTWH(0, 0, destTileSize, destTileSize));
+    topRightCorner.renderRect(
+        canvas,
+        Rect.fromLTWH(
+            size.width - destTileSize, 0, destTileSize, destTileSize));
+
+    bottomLeftCorner.renderRect(
+        canvas,
+        Rect.fromLTWH(
+            0, size.height - destTileSize, destTileSize, destTileSize));
+    bottomRightCorner.renderRect(
+        canvas,
+        Rect.fromLTWH(size.width - destTileSize, size.height - destTileSize,
+            destTileSize, destTileSize));
+  }
+
+  @override
+  bool shouldRepaint(_) => false;
+}
+
+class NineTileBox extends widgets.StatelessWidget {
+  final Image image;
+  final double tileSize;
+  final double destTileSize;
+  final double width;
+  final double height;
+
+  final widgets.Widget child;
+
+  final widgets.EdgeInsetsGeometry padding;
+
+  NineTileBox({
+    @required this.image,
+    @required this.tileSize,
+    @required this.destTileSize,
+    this.child,
+    this.width,
+    this.height,
+    this.padding,
+  });
+
+  @override
+  widgets.Widget build(widgets.BuildContext context) {
+    return widgets.Container(
+      width: width,
+      height: height,
+      child: widgets.CustomPaint(
+        painter: _Painter(
+          image: image,
+          tileSize: tileSize,
+          destTileSize: destTileSize,
+        ),
+        child: widgets.Container(
+          child: child,
+          padding: padding,
+        ),
+      ),
+    );
+  }
+}

pubspec.yaml

@@ -15,6 +15,7 @@ dependencies:
   convert: ^2.0.1
   flutter_svg: ^0.15.0
   flare_flutter: ^2.0.1
+  meta: ^1.1.8
 
 dev_dependencies:
   flutter_test: