Привет! Flutter позволяет создавать красивые приложения, но рутинная работа с виджетами и анимациями часто отнимает время. Нейросети (ChatGPT, Claude, Gemini) умеют писать код на Dart, если правильно составить промт. В этой статье — 15 проверенных промтов, которые ускорят вашу разработку: от простых UI-компонентов до архитектуры на Bloc и Riverpod. Просто копируйте, вставляйте и получайте рабочий код.
Виджеты
Промт №1. Кастомный виджет для PIN-кода
Промт:
Создай StatefulWidget для ввода PIN-кода во Flutter. В виджете должно быть 4 поля для цифр. При вводе цифры появляется анимированная точка (используй AnimationController), при удалении — точка исчезает. Реализуй автоматический переход к следующему полю и вызов callback при заполнении всех полей. Помести весь код в один файл.
Пример использования: вставьте промт в ChatGPT — получите готовый виджет с анимацией точек.
Пояснение: нейросеть корректно использует FocusNode, TextEditingController и AnimationController.
Промт №2. Эффект стекла (Glassmorphism)
Промт:
Создай во Flutter виджет с эффектом стекла: полупрозрачный контейнер с размытием фона. Используй BackdropFilter с ImageFilter.blur, закругленные углы (ClipRRect), белую полупрозрачную обводку. Добавь параметры: blurSigma, borderRadius, borderColor, opacity. Код должен быть готов к вставке.
Пример использования: применяйте для карточек на ярком фоне.
Пояснение: это популярный дизайн-тренд, и нейросеть знает, как комбинировать виджеты.
Промт №3. Индикатор загрузки на CustomPainter
Промт:
Напиши CustomPainter для анимированного индикатора загрузки во Flutter. Индикатор должен быть в виде кольца с изменяющейся длиной дуги и вращением. Используй AnimationController с repeat(). Настрой параметры: color, size, strokeWidth, speed. Покажи пример использования в Scaffold.
Пример использования: используйте как загрузку на сплэш-экране.
Пояснение: тут нужно уметь работать с Canvas и Paint.
State Management
Промт №4. Bloc для экрана логина
Промт:
Напиши полный код для экрана логина с использованием flutter_bloc. Создай LoginBloc, который принимает события: LoginStarted, LoginSubmitted, LoginLoading, LoginSuccess, LoginFailure. Определи состояния LoginInitial, LoginLoading, LoginSuccess, LoginFailure. В виджете используй BlocProvider и BlocBuilder, добавь валидацию email и пароля. Код должен содержать все файлы.
Пример использования: готовый каркас для авторизации.
Пояснение: четко заданные события и состояния помогают нейросети сгенерировать правильную структуру. Подробнее об этом подходе читайте в официальной документации Bloc.
Промт №5. Бесконечная прокрутка на Riverpod
Промт:
Создай бесконечный список с пагинацией на Riverpod во Flutter. Используй AsyncNotifier, который загружает данные из mock API. Добавь индикатор загрузки при прокрутке вниз и обработку ошибок. Опиши провайдер, виджет списка, метод loadMore. Код должен быть с import'ами.
Пример использования: лента новостей или товаров.
Пояснение: Riverpod отлично работает с асинхронными данными, и нейросеть это учитывает. Больше примеров — на riverpod.dev.
Промт №6. Тёмная тема с Provider
Промт:
Реализуй переключение тёмной и светлой темы во Flutter с помощью Provider. Создай ThemeProvider extends ChangeNotifier, который хранит ThemeMode. Подключи его через MultiProvider. Добавь переключатель в AppBar и кнопку для смены темы. Приведи полный код main.dart.
Пример использования: быстро внедрить тёмную тему.
Пояснение: здесь важно правильно настроить MaterialApp themeMode.
Анимации
Промт №7. Анимация появления списка
Промт:
Создай анимацию появления элементов в ListView.builder. Каждый элемент должен появляться с небольшой задержкой и плавно. Используй AnimationController, FadeTransition и SlideTransition. Оберни каждый элемент в отдельный StatefulWidget, который управляет своей анимацией. Покажи пример с 10 элементами.
Пример использования: красивое появление карточек в ленте.
Пояснение: нейросеть предложит интервалы с Interval(), и вы получите каскадный эффект. Руководство по анимациям есть в официальной документации Flutter.
Промт №8. Кастомный переход навигации
Промт:
Создай кастомный переход между экранами во Flutter с PageRouteBuilder. Анимация должна быть: новый экран выезжает снизу вверх и увеличивается от 0.8 до 1.0. Используй CurvedAnimation. Приведи полный код функции перехода.
Пример использования: нестандартная навигация для уникального UI.
Пояснение: PageRouteBuilder не самый очевидный, но LLM знает его параметры.
Промт №9. Drag-and-Drop
Промт:
Создай список с возможностью перетаскивания элементов во Flutter. Используй ReorderableListView. Элементы — карточки с текстом и иконкой. При перетаскивании добавь тень и анимацию. Покажи, как обрабатывать onReorder.
Пример использования: сортировка задач или плейлистов.
Пояснение: ReorderableListView уже имеет встроенную анимацию, но нейросеть добавит дополнительные детали.
Производительность и тесты
Промт №10. Оптимизация ListView
Промт:
Объясни и покажи, как оптимизировать ListView во Flutter. Используй RepaintBoundary для каждого элемента, const конструкторы, itemExtent, а также разделение больших списков. Напиши пример кода с оптимизированным списком и сравни с неоптимизированным.
Пример использования: для длинных списков в production.
Пояснение: это не только код, но и понимание best practices. См. рекомендации по производительности в документации Flutter.
Промт №11. Юнит-тесты для валидации
Промт:
Напиши юнит-тесты для функции валидации email и пароля в Dart. Email должен проверяться регулярным выражением, пароль — минимум 8 символов и содержать цифру. Используй пакет test. Приведи тесты для успешных и неуспешных случаев.
Пример использования: защитите свой код от регрессий.
Пояснение: нейросеть сгенерирует test group.
Промт №12. Сервис работы с API на Dio
Промт:
Создай сервис для работы с REST API во Flutter, используя Dio. Подключи интерцептор для логирования запросов и обработки ошибок. Реализуй методы get, post, put, delete с возвратом Future. Добавь обработку таймаута. Покажи пример вызова в виджете.
Пример использования: сетевой слой в приложении.
Пояснение: Dio имеет много опций, и промт охватывает основные.
Полезные мелочи
Промт №13. Генерация модели из JSON
Промт:
Преобразуй следующий JSON в Dart-модель с использованием json_serializable. Сгенерируй поля, fromJson/toJson, copyWith, toString. JSON: {'id': 1, 'name': 'John', 'email': 'john@example.com'}
Пример использования: быстрая работа с API.
Пояснение: нейросеть создаст аннотации и методы.
Промт №14. Экран профиля
Промт:
Создай виджет для экрана профиля во Flutter. Включи круглый аватар, имя, email, кнопку «Выйти», список настроек с иконками. Используй Material 3 и Card. Весь код в одном файле, без лишних зависимостей.
Пример использования: шаблон для приложения.
Пояснение: это хорошая отправная точка для типовых экранов.
Промт №15. Разница между Widget, State, Context
Промт:
Объясни простыми словами разницу между Widget, State и BuildContext во Flutter. Приведи аналогию и пример кода, где виджет создает State, а контекст используется для доступа к InheritedWidget.
Пример использования: для новичков.
Пояснение: это не код, а концепция, которую нейросеть излагает доступно.
Заключение
Эти 15 промтов покрывают большинство повседневных задач Flutter-разработчика. Вы можете адаптировать их под свои нужды, добавляя детали. И помните: хороший промт — это половина успеха. Если нейросеть выдала не то, уточните, например, «покажи полный код» или «используй другой подход». А если хотите прокачать навыки промт-инжиниринга, заглядывайте в блог asibiont.com/blog — там много полезных материалов по Flutter и ИИ.
Комментарии