{"id":28420538,"url":"https://github.com/chenasraf/flame_ui","last_synced_at":"2025-10-16T02:15:26.165Z","repository":{"id":295274545,"uuid":"989668252","full_name":"chenasraf/flame_ui","owner":"chenasraf","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-11T20:29:34.000Z","size":334,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-18T03:42:25.775Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chenasraf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-24T15:21:39.000Z","updated_at":"2025-06-11T20:29:37.000Z","dependencies_parsed_at":"2025-05-24T16:41:04.243Z","dependency_job_id":"0504b47b-23f2-479a-bcfc-ed0f37c6d998","html_url":"https://github.com/chenasraf/flame_ui","commit_stats":null,"previous_names":["chenasraf/flame_ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chenasraf/flame_ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fflame_ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fflame_ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fflame_ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fflame_ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenasraf","download_url":"https://codeload.github.com/chenasraf/flame_ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenasraf%2Fflame_ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261919200,"owners_count":23230298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T03:48:18.695Z","updated_at":"2025-10-16T02:15:26.077Z","avatar_url":"https://github.com/chenasraf.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flame UI\n\nA reusable component library for [Flame](https://flame-engine.org/) games, built with modularity and\ndeveloper ergonomics in mind.\n\nThis package includes stylized UI primitives like text inputs, buttons, modals, lists, and\nscrollable layouts — all tailored for Flame.\n\n---\n\n## 📦 Installation\n\nAdd this to your main app’s `pubspec.yaml`:\n\n```sh\nflutter pub add flame_ui\n```\n\n---\n\n## 🚀 Components\n\nEach component is fully documented in its own file. Below is a high-level overview of what’s\navailable.\n\n---\n\n### `ModalComponent`\n\nA flexible modal window that wraps any component in a styled, scrollable dialog.\n\n- Supports a title, scrollable content, and optional footer.\n- Customize layout via padding, title spacing, and content height behavior.\n- Optional close icon and callback hooks (`onClose`, `onAfterLoad`).\n\n---\n\n### `RectButtonComponent`\n\nA tappable rectangular button with a customizable label.\n\n- Supports background color, text color, and pressed state color.\n- Designed for quick interaction without layout boilerplate.\n\n---\n\n### `TextFieldComponent`\n\nA virtual keyboard–enabled text field powered by an overlayed Flutter `TextField`.\n\n- Supports `Sprite` or `NineTileBox` backgrounds for normal and focused states.\n- Customizable text style, hint text, and internal padding.\n- Supports external controller and `onChanged` callback.\n\n---\n\n### `GridComponent`\n\nA layout component for arranging children in a uniform grid.\n\n- Fixed-size cells with optional spacing.\n- Automatically places components row by row.\n\n---\n\n### `ScrollableAreaComponent`\n\nA vertical scroll container that clips its contents and handles drag gestures.\n\n- Use when your content may overflow vertically (e.g., on small watch screens).\n- Dynamically adjusts scroll limits based on content size.\n\n---\n\n### `ListComponent`\n\nA vertical list layout for displaying uniform-height items.\n\n- Supports spacing between items and optional custom width.\n- Designed for use with `ListItemComponent` or similar items.\n\n---\n\n### `ListItemComponent`\n\nA reusable list row for text and optional leading/trailing content.\n\n- Displays a title, optional subtitle, icon, and trailing component (like a button).\n- Fully styleable with text styles, padding, spacing, and icon sizing.\n- Tapable row with `onPressed` callback support.\n\n---\n\n## 🧪 Example\n\n```dart\nimport 'package:flame_ui/flame_ui.dart';\n\nfinal input = TextFieldComponent(\n  position: Vector2(10, 20),\n  size: Vector2(120, 30),\n  hintText: 'Enter name',\n  onChanged: (value) =\u003e print(value),\n);\n\nfinal button = RectButtonComponent(\n  position: Vector2(10, 60),\n  size: Vector2(120, 30),\n  label: 'Submit',\n  onPressed: () =\u003e print('Pressed!'),\n);\n```\n\n---\n\n## 📌 Notes\n\n- All components are Flame `PositionComponent`s and integrate seamlessly with Flame's coordinate\n  system.\n- Many components use `NineTileBox` or `Sprite` backgrounds and require assets to be loaded.\n- `TextFieldComponent` needs `game.buildContext` to work (e.g. `GameWidget()` inside a\n  `MaterialApp`).\n\n---\n\n## 🛠 Roadmap\n\n- [ ] Cursor + selection support in `TextFieldComponent`\n- [ ] Prebuilt themes/styles\n- [ ] Dropdowns, toggles, and tabs\n- [ ] RTL / accessibility support\n\n---\n\n## 📝 License\n\nMIT — use freely, modify generously.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenasraf%2Fflame_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenasraf%2Fflame_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenasraf%2Fflame_ui/lists"}