flame-engine / flame-engine/flame

Create LayoutComponent classes

Open
#2,302 2 comments 2 reactions 1 assignee Claimed by @st-pasha View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.