Hi Flutter devs,
If you use AI coding assistants (Cursor, Claude Code, Gemini CLI, Copilot) for Flutter development, you know their output usually has common layout and architectural flaws:
**Yellow-and-black RenderFlex overflow stripes:** The agent uses an unconstrained `Text()` directly inside a `Row()`, or forgets to make forms scrollable above virtual keyboards.
**System Navigation Inset Clipping:** It ignores Samsung 3-button navigation bars or the iOS home indicator bar, clipping sticky CTA buttons.
**Hardcoding Mock Data in Widgets:** Instead of building a proper repository/provider architecture, it writes hardcoded lists directly inside widget files.
**No Skeleton Loading or Image Bounds:** It loads unconstrained network images without disk/memory cache limits (`memCacheWidth`), causing OOM crashes on budget devices.
To eliminate these issues in our own Flutter apps at DevFoxx Labs, we wrote a strict Flutter rule and an end-to-end `flutter-production` skill, and we've open-sourced the whole framework.
### The Flutter Production Standard:
#### 1. Screen Protection Rules (`rules/flutter-screen-protection.md`):
* **Mandatory Safe Area:** All `bottomNavigationBar`, sticky bottom bars, and floating CTAs must be wrapped in `SafeArea(top: false, child: ...)`.
* **Zero Overflow at 320px:** No raw `Text` in a `Row`—must use `Expanded` / `Flexible` with `maxLines` and `TextOverflow.ellipsis`. Scaffolds default to `AlwaysScrollableScrollPhysics` with `resizeToAvoidBottomInset: true`.
* **Backend-Driven Dynamic Data:** Strict ban on static production UI data. Models and endpoints must drive the screens, with local constants permitted solely as offline fallbacks.
* **AutoSkeleton & Cached Images:** Mandatory loading skeletons via `auto_skeleton` (with ticker bypass during widget tests) and `CachedNetworkImage` with explicit `memCacheWidth/Height`.
#### 2. The `flutter-production` Skill (`skills/flutter-production/`):
Comes with 37 battle-tested template files extracted from high-traffic production apps:
* **State Management:** Riverpod 2.6+ with `ref.cacheFor` and automatic retry policies.
* **Networking:** Clean `ApiClient` with local caching and offline degradation.
* **Security:** `flutter_secure_storage` session management + local biometric authentication (`local_auth`).
* **Test Matrix:** A ready-to-use `layout_matrix.dart` helper that runs widget tests across 320px, 360px, 390px, and 412px viewports to guarantee 0 overflow warnings.
### How to Use With Your AI Agent:
Clone the repo and run the universal installer:
```bash
git clone https://github.com/dev-karunendu-mishra/devfoxxlabs-agent-standards.git
cd devfoxxlabs-agent-standards
# Windows PowerShell:
.\install.ps1 -All
# macOS / Linux Bash:
./install.sh all
```
Or inject it directly into your existing Flutter project:
```powershell
.\install.ps1 -TargetProject "C:\path\to\your\flutter_project"
```
The repo is open-source under MIT:
🔗 **GitHub:** https://github.com/dev-karunendu-mishra/devfoxxlabs-agent-standards
Check it out and let me know how it handles your Flutter layouts!