https://github.com/chenasraf/flame_ui
https://github.com/chenasraf/flame_ui
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chenasraf/flame_ui
- Owner: chenasraf
- License: mit
- Created: 2025-05-24T15:21:39.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-11T20:29:34.000Z (about 1 year ago)
- Last Synced: 2025-06-18T03:42:25.775Z (12 months ago)
- Language: Dart
- Size: 326 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Flame UI
A reusable component library for [Flame](https://flame-engine.org/) games, built with modularity and
developer ergonomics in mind.
This package includes stylized UI primitives like text inputs, buttons, modals, lists, and
scrollable layouts — all tailored for Flame.
---
## 📦 Installation
Add this to your main app’s `pubspec.yaml`:
```sh
flutter pub add flame_ui
```
---
## 🚀 Components
Each component is fully documented in its own file. Below is a high-level overview of what’s
available.
---
### `ModalComponent`
A flexible modal window that wraps any component in a styled, scrollable dialog.
- Supports a title, scrollable content, and optional footer.
- Customize layout via padding, title spacing, and content height behavior.
- Optional close icon and callback hooks (`onClose`, `onAfterLoad`).
---
### `RectButtonComponent`
A tappable rectangular button with a customizable label.
- Supports background color, text color, and pressed state color.
- Designed for quick interaction without layout boilerplate.
---
### `TextFieldComponent`
A virtual keyboard–enabled text field powered by an overlayed Flutter `TextField`.
- Supports `Sprite` or `NineTileBox` backgrounds for normal and focused states.
- Customizable text style, hint text, and internal padding.
- Supports external controller and `onChanged` callback.
---
### `GridComponent`
A layout component for arranging children in a uniform grid.
- Fixed-size cells with optional spacing.
- Automatically places components row by row.
---
### `ScrollableAreaComponent`
A vertical scroll container that clips its contents and handles drag gestures.
- Use when your content may overflow vertically (e.g., on small watch screens).
- Dynamically adjusts scroll limits based on content size.
---
### `ListComponent`
A vertical list layout for displaying uniform-height items.
- Supports spacing between items and optional custom width.
- Designed for use with `ListItemComponent` or similar items.
---
### `ListItemComponent`
A reusable list row for text and optional leading/trailing content.
- Displays a title, optional subtitle, icon, and trailing component (like a button).
- Fully styleable with text styles, padding, spacing, and icon sizing.
- Tapable row with `onPressed` callback support.
---
## 🧪 Example
```dart
import 'package:flame_ui/flame_ui.dart';
final input = TextFieldComponent(
position: Vector2(10, 20),
size: Vector2(120, 30),
hintText: 'Enter name',
onChanged: (value) => print(value),
);
final button = RectButtonComponent(
position: Vector2(10, 60),
size: Vector2(120, 30),
label: 'Submit',
onPressed: () => print('Pressed!'),
);
```
---
## 📌 Notes
- All components are Flame `PositionComponent`s and integrate seamlessly with Flame's coordinate
system.
- Many components use `NineTileBox` or `Sprite` backgrounds and require assets to be loaded.
- `TextFieldComponent` needs `game.buildContext` to work (e.g. `GameWidget()` inside a
`MaterialApp`).
---
## 🛠 Roadmap
- [ ] Cursor + selection support in `TextFieldComponent`
- [ ] Prebuilt themes/styles
- [ ] Dropdowns, toggles, and tabs
- [ ] RTL / accessibility support
---
## 📝 License
MIT — use freely, modify generously.