diff --git a/doc/README.md b/doc/README.md index 2e3fc9d12..3b4a37113 100644 --- a/doc/README.md +++ b/doc/README.md @@ -54,6 +54,7 @@ And start using it! * Other Modules - [Util](util.md) - [Gamepad](gamepad.md) + - [Widgets](widgets.md) - [Box2D](box2d.md) - [Tiled](tiled.md) - [Debugging](debug.md) diff --git a/doc/examples/widgets.md b/doc/examples/widgets.md new file mode 100644 index 000000000..a86234291 --- /dev/null +++ b/doc/examples/widgets.md @@ -0,0 +1,28 @@ +# Widgets + +One cool feature when developing games with Flutter is the ability to use Flutter's extensive toolset for building UIs, Flame tries to expand that introducing widgets which are specially made with games in mind. + +Here you can find all the available widgets provided by Flame. + +You can also see all the widgets showcased inside a Dashbook sandbox [here](/doc/examples/widgets) + +## Nine Tile Box + +A Nine Tile Box is a rectangle drawn using a grid sprite. + +The grid sprite is a 3x3 grid and with 9 blocks, representing the 4 courners, the 4 sides and the middle. + +The corners are drawn at the same size, the sides are streched on the side direction and the middle is expanded both ways. + +The `NineTileBox` widget implements a Container using that standard. Here you can find an example of its usage: + +```dart +import 'package:flame/widgets/nine_tile_box.dart'; + +NineTileBox( + image: image, // dart:ui image instance + tileSize: 16, // The width/height of the tile on your grid image + destTileSize: 50, // The dimensions to be used when drawing the tile on the canvas + child: SomeWidget(), // Any Flutter widget +) +``` diff --git a/doc/examples/widgets/lib/main.dart b/doc/examples/widgets/lib/main.dart index d135fabe1..5aaa023ed 100644 --- a/doc/examples/widgets/lib/main.dart +++ b/doc/examples/widgets/lib/main.dart @@ -10,7 +10,7 @@ void main() async { final nineTileBoxImage = await Flame.images.load('nine_tile_box.png'); final dashbook = Dashbook(); - dashbook.storiesOf('SpritesheetContainer').decorator(CenterDecorator()).add( + dashbook.storiesOf('NineTileBox').decorator(CenterDecorator()).add( 'default', (ctx) => Container( width: ctx.numberProperty('width', 200),