10 промтов для Flutter: от виджетов до анимаций и Bloc/Riverpod
Flutter — это не просто фреймворк для кроссплатформенной разработки. Это экосистема, где каждый день появляются новые виджеты, подходы к управлению состоянием и техники анимации. В 2026 году, когда Dart 3.x стабильно работает с pattern matching и records, а Flutter 3.24+ принёс оптимизации для веба и десктопа, разработчику нужно постоянно учиться. Я собрал 10 промтов, которые реально использую в работе. Они сэкономят часы гугления и помогут писать код быстрее.
1. Генерация кастомного виджета с нуля
Когда нужно быстро создать виджет с определённой логикой, я не пишу его вручную. Я даю промт, описывающий требования, и получаю готовый шаблон.
Промт: «Создай StatelessWidget на Flutter, который принимает title и subtitle, отображает их в карточке с тенью и скруглёнными углами. Добавь опциональный параметр onTap. Используй Material 3 (M3) стилистику. Напиши код на Dart.»
Результат:
import 'package:flutter/material.dart';
class InfoCard extends StatelessWidget {
final String title;
final String subtitle;
final VoidCallback? onTap;
const InfoCard({
super.key,
required this.title,
required this.subtitle,
this.onTap,
});
@override
Widget build(BuildContext context) {
return Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: InkWell(
borderRadius: BorderRadius.circular(12),
onTap: onTap,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: Theme.of(context).textTheme.titleMedium),
const SizedBox(height: 8),
Text(subtitle, style: Theme.of(context).textTheme.bodyMedium),
],
),
),
),
);
}
}
Совет: Всегда уточняйте, используете ли вы Material 2 или Material 3, а также указывайте версию Dart (3.x).
2. Миграция с Provider на Riverpod
Riverpod — стандарт де-факто для state management в 2026 году. Миграция с Provider может быть болезненной. Я использую промт, чтобы получить пошаговую инструкцию.
Промт: «У меня есть проект на Flutter с Provider. Я хочу мигрировать на Riverpod. Напиши пошаговый план миграции для простого счётчика (CounterProvider). Покажи код: старый Provider и новый Riverpod (с использованием ref.watch).»
Результат:
- Старый код (Provider):
class CounterProvider extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() => _count++;
}
- Новый код (Riverpod):
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = StateProvider<int>((ref) => 0);
// В виджете:
final count = ref.watch(counterProvider);
Совет: Используйте StateNotifierProvider, если состояние сложнее примитива. Riverpod 2.x поддерживает code generation, что упрощает работу.
3. Анимация с Hero и AnimatedContainer
Анимации в Flutter — одна из сильнейших сторон фреймворка. Я часто запрашиваю примеры анимаций с конкретными виджетами.
Промт: «Покажи пример анимации на Flutter с Hero и AnimatedContainer. Сделай так, чтобы при нажатии на маленькую картинку она увеличивалась на весь экран, а фон плавно менял цвет. Используя Hero, передай tag.»
Результат:
import 'package:flutter/material.dart';
class HeroExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Hero(
tag: 'image-hero',
child: GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => DetailPage()),
),
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Icon(Icons.star, size: 50),
),
),
),
),
);
}
}
class DetailPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Hero(
tag: 'image-hero',
child: Container(
width: 300,
height: 300,
color: Colors.blue.shade200,
child: Icon(Icons.star, size: 150),
),
),
),
);
}
}
4. State management с Bloc
Bloc — мощный паттерн для сложных приложений. Я использую промт, чтобы сгенерировать структуру Bloc с событиями и состояниями.
Промт: «Создай Bloc для управления списком задач (TodoList). Должны быть события: AddTodo, RemoveTodo, ToggleTodo. Состояние — список задач с полями id, title, isCompleted. Напиши код на Dart с использованием flutter_bloc.»
Результат:
// events/todo_event.dart
part of 'todo_bloc.dart';
abstract class TodoEvent {}
class AddTodo extends TodoEvent { final String title; AddTodo(this.title); }
class RemoveTodo extends TodoEvent { final String id; RemoveTodo(this.id); }
class ToggleTodo extends TodoEvent { final String id; ToggleTodo(this.id); }
// states/todo_state.dart
part of 'todo_bloc.dart';
class TodoState {
final List<Todo> todos;
TodoState(this.todos);
}
// bloc/todo_bloc.dart
import 'package:flutter_bloc/flutter_bloc.dart';
class TodoBloc extends Bloc<TodoEvent, TodoState> {
TodoBloc() : super(TodoState([])) {
on<AddTodo>((event, emit) {
final newTodo = Todo(id: DateTime.now().toString(), title: event.title, isCompleted: false);
emit(TodoState([...state.todos, newTodo]));
});
on<RemoveTodo>((event, emit) {
emit(TodoState(state.todos.where((t) => t.id != event.id).toList()));
});
on<ToggleTodo>((event, emit) {
emit(TodoState(state.todos.map((t) => t.id == event.id ? Todo(id: t.id, title: t.title, isCompleted: !t.isCompleted) : t).toList()));
});
}
}
5. Оптимизация производительности виджетов
Flutter-приложения могут тормозить из-за лишних перестроений. Я прошу AI найти проблемы.
Промт: «Проанализируй этот виджет на Flutter. Укажи, какие части можно оптимизировать: используй const конструкторы, избегай лишних build, примени RepaintBoundary. Вот код: [вставьте код].»
6. Работа с HTTP и JSON
Сетевые запросы — база. Я прошу сгенерировать модель с json_serializable.
Промт: «Создай модель данных для пользователя (User) с полями: id (int), name (String), email (String), createdAt (DateTime). Используй json_serializable и freezed. Напиши код на Dart.»
7. Анимация с Lottie
Lottie — стандарт для анимаций в 2026. Я использую промт для интеграции.
Промт: «Покажи, как добавить Lottie-анимацию в приложение Flutter. Используй пакет lottie версии 3.x. Анимация должна зацикливаться и запускаться по кнопке. Напиши код.»
8. Кастомные темы (Theming)
Темы — это боль. Я прошу сгенерировать полную тему.
Промт: «Создай кастомную тему Flutter с использованием ThemeData. Используй Material 3. Определи цвета: primary — синий, secondary — зелёный, surface — светло-серый. Настрой TextTheme для заголовков и body. Экспортируй как ThemeExtension.»
9. Интеграция с REST API
Полный цикл запроса.
Промт: «Напиши сервис для работы с REST API на Flutter. Используй пакет dio. Реализуй методы: GET /users, POST /users, PUT /users/:id. Обработай ошибки (таймаут, 404, 500). Верни Result
10. Анимация с CustomPainter
Для уникальных UI.
Промт: «Создай анимированный круговой прогресс-бар с помощью CustomPainter. Процент должен плавно изменяться от 0 до 100 при нажатии кнопки. Используй AnimationController.»
Заключение
Эти 10 промтов — мой ежедневный инструментарий. Они помогают не тратить время на шаблонный код, а сосредоточиться на архитектуре и бизнес-логике. Flutter развивается быстро, и AI-ассистенты становятся незаменимыми. Главное — давать чёткие, конкретные запросы, указывая версии пакетов и стилистику (Material 2/3). Попробуйте их в работе, и вы увидите, как ускоряется разработка.
ASI Biont поддерживает подключение к Flutter-проектам через API для автоматической генерации кода — подробнее на asibiont.com/courses
Комментарии