flame-engine / flame-engine/flame
Create LayoutComponent classes
- Dominant language
- Dart
- Stars
- 10.8k
- Forks
- 1k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 21
Description
# Proposal
`LayoutComponent` will be the base class for a family of utility classes which handle the layout of their children. This would be quite similar to Flutter layout widgets such as `Align`, `Column`, `Center`, `Container`, `Padding`, `SizedBox`, etc.
The purpose of these new components is to assist with constructing UIs within a game: dialogue boxes, HUD, informational screens, in-game UIs such as dialogue or trade windows, etc.
PR #1971 already attempts to add two such layout classes: `Row` and `Column` -- this proposal is to have more of them, all under a single umbrella of `LayoutComponent`.
For example, suppose you're making a game and you want to display current score in the top right corner. Then, you should be able to declare it like this:
```dart
camera.viewport.add(
Padding(
padding: EdgeInsets.all(20),
children: [
Align(
anchor: Anchor.topRight,
child: ScoreComponent(),
),
],
),
);
```
After this, the game would take care to properly position the `ScoreComponent` and move it whenever the game resizes.
## Implementation
`LayoutComponent` would rely on the `onParentResize` lifecycle method (#1421).
The tree structure can be either normal (the target is added as a child of the LayoutComponent), or flat (the target is added to the parent directly, and layout component is a sibling). I'm not sure which option is better here.
Contributor guide
Assessment
This issue has not been assessed yet.