Flutter — это фреймворк от Google для создания кроссплатформенных приложений на языке Dart. По данным официальной документации (flutter.dev), Flutter используют такие компании, как Google, Alibaba и BMW. Однако даже опытные разработчики тратят до 30% времени на написание шаблонного кода и поиск решений для виджетов, state management и анимаций. В этой статье я собрал 10 готовых промтов, которые помогут вам ускорить разработку: от создания базовых виджетов до настройки Bloc и Riverpod. Каждый промт снабжён примером и пояснением — просто скопируйте и адаптируйте под свой проект.
1. Промт для генерации StatelessWidget с кастомным фоном
Задача: Быстро создать виджет с заданным цветом фона и отступами.
Промт: «Создай StatelessWidget на Dart/Flutter. Название — CustomBackgroundWidget. Он принимает параметры: Color backgroundColor (по умолчанию Colors.blue), EdgeInsets padding (по умолчанию EdgeInsets.all(16.0)), Widget child. Виджет должен отображать child на фоне backgroundColor с отступами padding. Используй Container и BoxDecoration.»
Пример использования:
class CustomBackgroundWidget extends StatelessWidget {
final Color backgroundColor;
final EdgeInsets padding;
final Widget child;
const CustomBackgroundWidget({
Key? key,
this.backgroundColor = Colors.blue,
this.padding = const EdgeInsets.all(16.0),
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: backgroundColor),
padding: padding,
child: child,
);
}
}
Этот промт экономит время на написание стандартных конструкций. Подходит для прототипирования и модульных UI-компонентов.
2. Промт для StatefulWidget с TextField и валидацией
Задача: Создать форму ввода с проверкой email.
Промт: «Напиши StatefulWidget с именем EmailInputField. Он содержит TextEditingController _controller, метод _validateEmail (регулярное выражение для email) и показывает ошибку под полем, если email невалидный. Используй TextFormField с validator.»
Пример использования:
class EmailInputField extends StatefulWidget {
@override
_EmailInputFieldState createState() => _EmailInputFieldState();
}
class _EmailInputFieldState extends State<EmailInputField> {
final _controller = TextEditingController();
String? _validateEmail(String? value) {
final regex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
if (value == null || !regex.hasMatch(value)) {
return 'Введите корректный email';
}
return null;
}
@override
Widget build(BuildContext context) {
return TextFormField(
controller: _controller,
validator: _validateEmail,
decoration: InputDecoration(labelText: 'Email'),
);
}
}
Промт помогает избежать ошибок с регулярками и стандартизировать валидацию.
3. Промт для анимации с AnimatedContainer
Задача: Плавное изменение размера и цвета контейнера по нажатию.
Промт: «Создай StatefulWidget AnimatedBox. При нажатии на контейнер его ширина меняется с 100 на 200 пикселей, цвет — с красного на синий. Используй AnimatedContainer с duration 500 мс. Добавь кнопку для переключения.»
Пример использования:
class AnimatedBox extends StatefulWidget {
@override
_AnimatedBoxState createState() => _AnimatedBoxState();
}
class _AnimatedBoxState extends State<AnimatedBox> {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => setState(() => _isExpanded = !_isExpanded),
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
width: _isExpanded ? 200 : 100,
height: 100,
color: _isExpanded ? Colors.blue : Colors.red,
),
);
}
}
AnimatedContainer — один из самых простых способов добавить анимацию без явного AnimationController.
4. Промт для анимации с AnimationController и Tween
Задача: Создать анимацию вращения иконки.
Промт: «Напиши StatefulWidget SpinningIcon. Используй AnimationController с duration 2 секунды и Tween
Пример использования:*
class SpinningIcon extends StatefulWidget {
@override
_SpinningIconState createState() => _SpinningIconState();
}
class _SpinningIconState extends State<SpinningIcon> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
_animation = Tween<double>(begin: 0, end: 3.14159 * 2).animate(_controller);
}
@override
Widget build(BuildContext context) {
return Column(
children: [
AnimatedBuilder(
animation: _animation,
builder: (context, child) => Transform.rotate(
angle: _animation.value,
child: Icon(Icons.star, size: 50),
),
),
ElevatedButton(
onPressed: () {
if (_controller.isAnimating) _controller.stop();
else _controller.repeat();
},
child: Text('Toggle Spin'),
),
],
);
}
}
Этот промт даёт полный контроль над анимацией и подходит для сложных эффектов.
5. Промт для стейт-менеджмента с Provider
Задача: Реализовать счётчик с использованием ChangeNotifier и Provider.
Промт: «Создай класс CounterModel extends ChangeNotifier с полем int count и методами increment() и decrement(). Затем напиши виджет CounterScreen, который использует Provider
Пример использования:
class CounterModel extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
void decrement() {
_count--;
notifyListeners();
}
}
// В main.dart: runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (_) => CounterModel())], child: CounterScreen()))
Provider — это стандарт для управления состоянием в Flutter, рекомендованный командой Flutter (см. flutter.dev).
6. Промт для стейт-менеджмента с Riverpod
Задача: Создать простой список задач с Riverpod.
Промт: «Напиши провайдер StateProvider
Пример использования:
final todoListProvider = StateProvider<List<String>>((ref) => []);
class TodoScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final todos = ref.watch(todoListProvider);
return Column(
children: [
Expanded(child: ListView.builder(itemCount: todos.length, itemBuilder: (_, i) => Text(todos[i]))),
TextField(onSubmitted: (value) => ref.read(todoListProvider.notifier).state = [...ref.read(todoListProvider), value]),
],
);
}
}
Riverpod — это более современная альтернатива Provider, с лучшей поддержкой тестирования.
7. Промт для стейт-менеджмента с Bloc (Cubit)
Задача: Реализовать переключатель темы с Cubit.
Промт: «Создай Cubit ThemeCubit с состоянием ThemeMode (light/dark). Методы: setLight(), setDark(). Виджет ThemeSwitcher использует BlocBuilder для отображения текущей темы и кнопки переключения. Подключи BlocProvider в main.dart.»
Пример использования:
class ThemeCubit extends Cubit<ThemeMode> {
ThemeCubit() : super(ThemeMode.light);
void setLight() => emit(ThemeMode.light);
void setDark() => emit(ThemeMode.dark);
}
// В виджете: BlocBuilder<ThemeCubit, ThemeMode>(builder: (context, theme) => Switch(...))
Bloc (Cubit) популярен в крупных проектах, таких как приложения от Google.
8. Промт для работы с HTTP-запросами (Dio)
Задача: Выполнить GET-запрос и отобразить данные.
Промт: «Напиши сервис ApiService с методом fetchUsers() с использованием Dio. Обработай ошибки через try-catch. В виджете UsersScreen используй FutureBuilder для отображения списка пользователей или индикатора загрузки.»
Пример использования:
class ApiService {
final Dio _dio = Dio();
Future<List<User>> fetchUsers() async {
try {
final response = await _dio.get('https://jsonplaceholder.typicode.com/users');
return (response.data as List).map((json) => User.fromJson(json)).toList();
} catch (e) {
throw Exception('Ошибка загрузки: $e');
}
}
}
Dio — самая популярная HTTP-библиотека для Dart, с поддержкой интерцепторов и таймаутов.
9. Промт для анимации с Hero
Задача: Создать плавный переход между экранами для изображения.
Промт: «Создай два экрана: первый содержит Hero с тегом 'image1' и Image.network, второй — тот же Hero с увеличенным изображением. Используй Navigator.push для перехода.»
Пример использования:
// Экран 1: Hero(tag: 'image1', child: Image.network('https://example.com/photo.jpg', width: 100))
// Экран 2: Hero(tag: 'image1', child: Image.network('https://example.com/photo.jpg', width: 300))
Hero-анимация встроена во Flutter и не требует дополнительных библиотек.
10. Промт для создания кастомного Paint (CustomPainter)
Задача: Нарисовать круг с градиентом через CustomPainter.
Промт: «Создай класс GradientCirclePainter extends CustomPainter. Он рисует круг с радиальным градиентом (от центра к краям). Используй Canvas.drawCircle с Paint, где shader — RadialGradient. Добавь виджет GradientCircle, который использует CustomPaint.»
Пример использования:
class GradientCirclePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..shader = RadialGradient(colors: [Colors.yellow, Colors.red]).createShader(Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: size.width/2));
canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/2, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
CustomPainter даёт полный контроль над графикой, но требует понимания Canvas API.
Заключение
Эти 10 промтов покрывают основные потребности Flutter-разработчика: от простых виджетов до продвинутых анимаций и state management. Сохраните эту подборку — она сэкономит вам часы поиска в документации. А если хотите глубже изучить тему, загляните в блог asibiont.com/blog — там я разбираю сложные кейсы с Bloc и Riverpod. Какой промт вам пригодился больше всего? Напишите в комментариях!
Комментарии