Оформление Flutter
How to customize your app's theme using Flutter's theming system
AIflutter
official
Другое
Что делает навык
Настройка темы приложения Flutter путем миграции устаревших реализаций Material 2 на Material 3. Нормализует темы компонентов, обновляет устаревшие классы кнопок и адаптирует пользовательский интерфейс для обеспечения кроссплатформенной согласованности.
Когда применять
- Миграция существующего кода Flutter с Material 2 на Material 3
- Обновление устаревших классов кнопок (FlatButton, RaisedButton, OutlineButton)
- Нормализация глобальной темы приложения с использованием ColorScheme.fromSeed
- Адаптация UI-идиом для целевых платформ (iOS, Android, Windows, macOS, Linux, Web)
Как работает
- Проанализировать текущее состояние темы: выявить компоненты Material 2, устаревшие классы кнопок (FlatButton, RaisedButton, OutlineButton) и устаревшие свойства темы (accentColor, color в AppBarTheme).
- Запросить у пользователя основной seed-цвет для новой ColorScheme Material 3 и целевые платформы для приоритизации UI-идиом.
- Применить логику миграции компонентов: заменить BottomNavigationBar на NavigationBar, Drawer на NavigationDrawer, ToggleButtons на SegmentedButton.
- Заменить устаревшие кнопки: FlatButton на TextButton, RaisedButton на ElevatedButton (или FilledButton), OutlineButton на OutlinedButton.
- Настроить глобальную ThemeData с использованием ColorScheme.fromSeed, убедившись, что useMaterial3 равен true, и удалить все ссылки на устаревшие свойства accent (accentColor, accentColorBrightness, accentTextTheme, accentIconTheme).
Примеры запросов агенту
Мигрируй мой проект Flutter с Material 2 на Material 3, используя seed-цвет #6200EE для Android и iOS.
Обнови все устаревшие кнопки в коде: замени FlatButton, RaisedButton и OutlineButton на новые аналоги.
Настрой глобальную тему приложения Flutter на Material 3 с seed-цветом #00796B и оптимизируй UI для Windows и Web.
Что понадобится
- Среда Flutter с Dart
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «flutter-theming» из репозитория:
# https://github.com/flutter/skills
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r flutter-theming/ ~/.claude/skills/flutter-theming/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.