# widget-composition

> Claude/Codex skill by [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars · Updated 2026-09-23

Enforces Flutter widget composition — extract named const Widget classes never \`Widget \_buildX()\` methods, lean build() (no I/O/formatting/domain math, precompute in the ViewModel), dumb Views that watch one Notifier and route intents via ref.read, StatelessWidget by default with every controller disposed, lazy \`.builder\` lists, cheapest-widget choices (SizedBox/ColoredBox/Align over Container), a strict key policy (ValueKey for reorderable lists, never GlobalKey), gesture→visible-focusable-fallback wiring, plus structural layout — full-bleed background vs SafeArea content, computed cell sizing, the GridView cross/main-axis spacing trap, EdgeInsetsDirectional, and resizeToAvoidBottomInset/IME handling. Use when building or refactoring any screen or widget, splitting a large build() into components, writing GridView/ListView/LayoutBuilder/SafeArea/Scaffold, wiring onTap/onLongPress/Draggable, choosing a key or data class, or reviewing widget code in a diff.

Tags: agent-skills, ai-agents, best-practices, claude-code, codex, coding-agent, cursor, dart, dartlang, developer-tools, drift, flutter, flutter-architecture, github-copilot, go-router, llm, material-design, mvvm, riverpod, skills

## Install

```sh
git clone https://github.com/zakariaf/Flutter-Skills /tmp/Flutter-Skills && ln -s /tmp/Flutter-Skills/skills/widget-composition ~/.claude/skills/widget-composition
```

## From README

Widget Composition Build every screen from many small, const, single-purpose widget classes. A widget that does one thing rebuilds cheaply, reads clearly, tests in isolation, and can be lifted into a shared component library. The View is dumb: it watches one ViewModel and renders; logic lives in the Notifier, state in immutable value objects, layout in directional structural primitives. Applies to any screen, list, card, or shared component. Read the reference for the task at hand: references/rebuild-mechanics.md — why a class beats a method (Element.updateChild), const canonicalization, the full key policy, and .select for narrowed rebuilds. references/structural-layout.md — edge-to-edge background vs SafeArea content, computed cell sizing, the GridView cross/main-axis trap, directional insets, and IME/resizeToAvoidBottomInset.

## Links

- HTML page: https://omgskills.com/library/zakariaf/flutter-skills/skills/widget-composition/
- GitHub: https://github.com/zakariaf/Flutter-Skills
- Author: [@zakariaf](https://omgskills.com/library/zakariaf/index.md)

## More from this repo

- [accessibility-as-code](https://omgskills.com/library/zakariaf/flutter-skills/skills/accessibility-as-code/index.md) — Enforces accessibility as a correctness property authored into each widget — Semantics(button/label) or...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars
- [adaptive-layout](https://omgskills.com/library/zakariaf/flutter-skills/skills/adaptive-layout/index.md) — Enforces adapting layout by available CONSTRAINTS/size, never device or platform checks — LayoutBuilder +...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars
- [ads-and-iap-monetization](https://omgskills.com/library/zakariaf/flutter-skills/skills/ads-and-iap-monetization/index.md) — Enforces opt-in, rewarded-first monetization over the service seam — a rewarded view grants exactly one benefit and...
   - [@zakariaf](https://omgskills.com/library/zakariaf/index.md) · 61 stars