# flutter-fix-layout-issues

Разбирает ошибки раскладки Flutter по тексту исключения: overflow, неограниченные constraints, неверный ParentData. Подсказывает, что обернуть и во что.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 39900 установок · ★ 3108
- Автор: flutter
- Лицензия: BSD-3-Clause · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/flutter/agent-plugins/tree/HEAD/skills/flutter-fix-layout-issues/SKILL.md
- Обновлён: 2026-10-21
- HTML: https://affpapa.org/nevibecode/skills/flutter-fix-layout-issues

## Что делает

Скилл опирается на простое правило Flutter: размеры идут снизу вверх, ограничения сверху вниз. Когда эти договорённости нарушаются, в консоли появляется конкретная сигнатура ошибки, и по ней уже понятно, где искать. «Vertical viewport was given unbounded height» — прокручиваемый виджет поставили в `Column`. «An InputDecorator...cannot have an unbounded width» — `TextField` оказался в `Row` без ограничения по ширине. «RenderFlex overflowed» — ребёнок `Row` или `Column` просит больше, чем ему выделили; на экране это жёлто-чёрные полосы.

Дальше идёт чек-лист: запустить приложение в debug-режиме, поймать первое исключение в консоли и не отвлекаться на каскадные «RenderBox was not laid out» — их нужно пропускать и смотреть выше по стеку. Для каждого типа ошибки свой рецепт: обернуть список в `Expanded` или `SizedBox`, текстовое поле — в `Expanded` либо `Flexible`, переполненного ребёнка — в `Expanded` (вписать) или `Flexible` (разрешить быть меньше). После правки — hot reload и проверка, что красный экран или полосы ушли.

Отдельный случай — «Incorrect use of ParentData widget»: `ParentDataWidget` должен быть прямым потомком своего родителя. `Expanded` и `Flexible` живут только внутри `Row`, `Column` или `Flex`, `Positioned` — только внутри `Stack`. Скилл заявлен для Dart и Flutter MCP-инструментов, так что без подключённого MCP-сервера рассчитывать придётся только на текст ошибки и код перед глазами.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add flutter/agent-plugins --skill flutter-fix-layout-issues -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/flutter-fix-layout-issues/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/flutter-fix-layout-issues/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add flutter/agent-plugins --skill flutter-fix-layout-issues -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/flutter-fix-layout-issues/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add flutter/agent-plugins --skill flutter-fix-layout-issues -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/flutter-fix-layout-issues/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install flutter/agent-plugins flutter-fix-layout-issues
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/flutter-fix-layout-issues/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add flutter/agent-plugins --skill flutter-fix-layout-issues -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/flutter/agent-plugins --path skills/flutter-fix-layout-issues
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/flutter-fix-layout-issues/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add flutter/agent-plugins --skill flutter-fix-layout-issues -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/flutter/agent-plugins/tree/HEAD/skills/flutter-fix-layout-issues/SKILL.md

## Когда брать
- Убрать жёлто-чёрные полосы переполнения в `Row` или `Column`
- Починить «Vertical viewport was given unbounded height» у `ListView` внутри `Column`
- Задать ширину `TextField`, который ругается на неограниченную ширину
- Найти настоящую причину ошибки среди каскадных «RenderBox was not laid out»
- Переставить `Expanded` или `Positioned` прямым потомком нужного родителя

## Примеры запросов агенту
- В консоли «RenderFlex overflowed» — найди переполненный виджет и оберни его в `Expanded`
- Поправь вёрстку: `ListView` внутри `Column` даёт unbounded height, нужен `Expanded`
- Разбери стек ошибки и объясни, почему `Positioned` ругается на ParentData

## Похожие
- [vercel-react-native-skills](https://affpapa.org/nevibecode/skills/vercel-react-native-skills.md) — скилл · 255200 установок
- [animate-expo](https://affpapa.org/nevibecode/skills/animate-expo.md) — скилл · 137900 установок
- [mobile-native](https://affpapa.org/nevibecode/skills/mobile-native.md) — скилл · 86600 установок
- [aso](https://affpapa.org/nevibecode/skills/aso.md) — скилл · 75400 установок
- [swiftui-pro](https://affpapa.org/nevibecode/skills/swiftui-pro.md) — скилл · 35200 установок
- [orca-emulator](https://affpapa.org/nevibecode/skills/orca-emulator.md) — скилл · 5800 установок

Из того же набора: [flutter/agent-plugins](https://affpapa.org/nevibecode/by/flutter/agent-plugins.md) — 15 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md