flutter-add-widget-preview
Добавляет интерактивные превью виджетов в проект через систему previews.dart. Применяется при создании новых UI-компонентов или обновлении экранов для обеспечения единообразия дизайна и интерактивного тестирования.
AIflutter
official
Разработка
★ 3k
Что делает навык
Навык добавляет интерактивные превью виджетов в проект Flutter через систему previews.dart, позволяя рендерить компоненты в реальном времени изолированно от основного контекста приложения. Это обеспечивает единообразие дизайна и упрощает интерактивное тестирование UI-компонентов.
Когда применять
- Создание новых UI-компонентов с немедленной визуальной проверкой
- Обновление существующих экранов для обеспечения единообразия дизайна
- Тестирование виджетов в различных темах или конфигурациях без запуска всего приложения
- Быстрая итерация над внешним видом виджетов до их интеграции в основную логику
Как работает
- Импортировать пакет flutter/widget_previews.dart для доступа к аннотациям превью.
- Выбрать целевой элемент: верхнеуровневую функцию, статический метод или публичный конструктор/фабрику, не требующих аргументов и возвращающих Widget или WidgetBuilder.
- Применить аннотацию @Preview к выбранному элементу для генерации превью.
- При необходимости применить несколько аннотаций @Preview к одному элементу для создания разных вариантов отображения.
- Для сложных случаев создать кастомные аннотации, расширив классы Preview или MultiPreview, чтобы внедрить общие свойства (темы, обертки) или динамически изменять конфигурации через метод transform().
Примеры запросов агенту
Добавь интерактивное превью для моего нового виджета ButtonCustom, используя стандартные настройки.
Создай несколько вариантов превью для виджета CardWidget: один с темной темой, другой с светлой.
Настрой кастомную аннотацию @PreviewTheme, которая автоматически применяет мою основную тему ко всем новым превью.
Что понадобится
- Среда разработки Flutter с поддержкой widget_previews.dart
- Доступ к пакету flutter/widget_previews.dart
Описание составлено по SKILL.md навыка, сверено 07.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «flutter-flutter-add-widget-preview» из репозитория:
# https://github.com/flutter/agent-plugins
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r flutter-flutter-add-widget-preview/ ~/.claude/skills/flutter-flutter-add-widget-preview/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.