flutter/flame
1
0
Fork 0
mirror of https://github.com/flame-engine/flame.git synced 2025-11-04 13:08:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: Update widgets documentation (#3024)

Browse Source 
The documentation regarding the widgets are so outdated and it is very
confusing for a beginner like me. So, I update them to make it easier
for others to follow.

Co-authored-by: Lukas Klingsbo <me@lukas.fyi>
This commit is contained in:
Ahmad Fakhri
2024-02-09 16:33:03 +08:00
committed by GitHub
parent 1d020a525b
commit 04527886cd
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
doc/flame/other/widgets.md
View File

@ -11,7 +11,7 @@ You can also see all the widgets showcased inside a
[here](https://github.com/flame-engine/flame/tree/main/examples/lib/stories/widgets) [here](https://github.com/flame-engine/flame/tree/main/examples/lib/stories/widgets)
## Nine Tile Box ## NineTileBoxWidget
A Nine Tile Box is a rectangle drawn using a grid sprite. A Nine Tile Box is a rectangle drawn using a grid sprite.
@ -21,7 +21,7 @@ middle.
The corners are drawn at the same size, the sides are stretched on the side direction and the middle The corners are drawn at the same size, the sides are stretched on the side direction and the middle
is expanded both ways. is expanded both ways.
The `NineTileBox` widget implements a `Container` using that standard. This pattern is also The `NineTileBoxWidget` implements a `Container` using that standard. This pattern is also
implemented as a component in the `NineTileBoxComponent` so that you can add this feature directly implemented as a component in the `NineTileBoxComponent` so that you can add this feature directly
to your `FlameGame`. To get to know more about this, check the component docs to your `FlameGame`. To get to know more about this, check the component docs
[here](../components.md#ninetileboxcomponent). [here](../components.md#ninetileboxcomponent).
@ -29,9 +29,9 @@ to your `FlameGame`. To get to know more about this, check the component docs
Here you can find an example of how to use it (without using the `NineTileBoxComponent`): Here you can find an example of how to use it (without using the `NineTileBoxComponent`):
```dart ```dart
import 'package:flame/widgets/nine_tile_box.dart'; import 'package:flame/widgets';
NineTileBox.asset( NineTileBoxWidget(
image: image, // dart:ui image instance image: image, // dart:ui image instance
tileSize: 16, // The width/height of the tile on your grid image 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 destTileSize: 50, // The dimensions to be used when drawing the tile on the canvas
@ -50,13 +50,15 @@ in Flutter.
How to use it: How to use it:
```dart ```dart
SpriteButton.asset( SpriteButton(
onPressed: () { onPressed: () {
print('Pressed'); print('Pressed');
}, },
label: const Text('Sprite Button', style: const TextStyle(color: const Color(0xFF5D275D))), label: const Text('Sprite Button', style: const TextStyle(color: const Color(0xFF5D275D))),
sprite: _spriteButton, sprite: _spriteButton,
pressedSprite: _pressedSprite, pressedSprite: _pressedSprite,
height: _height,
width: _width,
) )
``` ```
@ -69,7 +71,7 @@ tree.
This is how to use it: This is how to use it:
```dart ```dart
SpriteWidget.asset( SpriteWidget(
sprite: yourSprite, sprite: yourSprite,
anchor: Anchor.center, anchor: Anchor.center,
) )
@ -84,8 +86,9 @@ SpriteWidget.asset(
This is how to use it: This is how to use it:
```dart ```dart
SpriteAnimationWidget.asset( SpriteAnimationWidget(
animation: _animation, animation: _animation,
animationTicker: _animationTicker,
playing: true, playing: true,
anchor: Anchor.center, anchor: Anchor.center,
) )