1---2name: li-lance-android-seraphim-framework-flutter-idiomatic-flutte3description: Idiomatic Flutter4---56# Idiomatic Flutter78## **Priority: P1 (OPERATIONAL)**910Modern Flutter layout patterns and composition techniques.1112- **Async Gaps**: Check `if (context.mounted)` before using `BuildContext` after `await`.13- **Composition**: Extract complex UI into small widgets. Avoid deep nesting or large helper14 methods.15- **Layout**:16 - Spacing: Use `Gap(n)` or `SizedBox` over `Padding` for simple gaps.17 - Empty UI: Use `const SizedBox.shrink()`.18 - Intrinsic: Avoid `IntrinsicWidth/Height`; use `Stack` + `FractionallySizedBox` for overlays.19- **Optimization**: Use `ColoredBox`/`Padding`/`DecoratedBox` instead of `Container` when possible.20- **Themes**: Use extensions for `Theme.of(context)` access.2122## Anti-Patterns2324- ❌ No `if (context.mounted)` after `await` — using BuildContext across async gaps causes crashes25- ❌ `Widget _buildHeader() { … }` helper methods — extract to a `const StatelessWidget` for proper26 rebuild control and DevTools profiling27- ❌ Accessing a controller or state directly in a widget (`_controller.data`) — use BLoC/Signals to28 decouple UI from state29- ❌ `Container(width: 0, height: 0)` for empty space — use `const SizedBox.shrink()`3031---32> Source: [li-lance/android-seraphim-framework](https://github.com/li-lance/android-seraphim-framework) — distributed by [TomeVault](https://tomevault.io).33<!-- tomevault:4.0:skill_md:2026-06-16 -->
Run npx skillmds@latest add tomevault-io/li-lance-android-seraphim-framework-flutter-idiomatic-flutte in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Idiomatic Flutter It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.