10 промтов для Flutter: виджеты, state management и анимации
Flutter — это не просто фреймворк, а экосистема, где каждый день появляются новые виджеты и подходы к управлению состоянием. Но даже опытные разработчики тратят часы на поиск шаблонов для сложных анимаций или отладки Bloc. Я собрал 10 рабочих промтов, которые использую в ежедневной работе: от быстрой генерации виджетов до настройки анимаций с учетом производительности. Проверено на реальных проектах — от стартапов до enterprise-решений.
1. Генерация базового виджета с кастомными параметрами
Промт: «Создай StatelessWidget в Flutter, который принимает строку title и Color color, отображает контейнер с закругленными углами и тенью. Используй Material Design 3.»
Пример использования: Быстрое создание повторяющихся UI-элементов, таких как карточки товаров или кнопки. AI генерирует код с учетом последних рекомендаций Flutter (например, использование Card с shape).
Код:
import 'package:flutter/material.dart';
class CustomCard extends StatelessWidget {
final String title;
final Color color;
const CustomCard({super.key, required this.title, required this.color});
@override
Widget build(BuildContext context) {
return Card(
elevation: 4,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(12),
),
child: Text(title, style: Theme.of(context).textTheme.titleMedium),
),
);
}
}
2. Оптимизация производительности списка с ListView.builder
Промт: «Напиши ListView.builder с 1000 элементов, каждый из которых содержит изображение из сети (с кэшированием через cached_network_image) и текст. Добавь ленивую загрузку и обработку ошибок.»
Пример использования: AI автоматически добавляет itemBuilder с проверкой индекса, использует CachedNetworkImage для избежания перезагрузок и учитывает ScrollController для пагинации. Это особенно полезно для лент новостей или чатов.
Код:
ListView.builder(
itemCount: 1000,
itemBuilder: (context, index) {
return ListTile(
leading: CachedNetworkImage(
imageUrl: 'https://example.com/image_$index.jpg',
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
title: Text('Item $index'),
);
},
)
3. State Management с Bloc: простой счетчик
Промт: «Создай Bloc для счетчика с инкрементом и декрементом. Используй flutter_bloc 8.x. Покажи, как подключить в main.dart с помощью BlocProvider.»
Пример использования: Быстрое прототипирование логики состояния. AI генерирует CounterCubit, CounterEvent и UI-слой с BlocBuilder. Реальный кейс — управление корзиной в интернет-магазине.
Код:
// counter_cubit.dart
import 'package:flutter_bloc/flutter_bloc.dart';
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
void decrement() => emit(state - 1);
}
// main.dart
void main() {
runApp(BlocProvider(create: (context) => CounterCubit(), child: MyApp()));
}
4. Анимация с использованием AnimationController
Промт: «Напиши анимацию вращения контейнера с помощью AnimationController. Добавь возможность запуска/остановки по кнопке. Используй Tween
Пример использования: Создание загрузочных спиннеров или интерактивных элементов. AI генерирует класс с SingleTickerProviderStateMixin и addListener.
Код:
class SpinAnimation extends StatefulWidget {
@override
State<SpinAnimation> createState() => _SpinAnimationState();
}
class _SpinAnimationState extends State<SpinAnimation> 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: 360).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
}
@override
Widget build(BuildContext context) {
return Column(
children: [
AnimatedBuilder(animation: _animation, builder: (context, child) {
return Transform.rotate(angle: _animation.value * (3.14159 / 180), child: Container(width: 100, height: 100, color: Colors.blue));
}),
ElevatedButton(onPressed: () => _controller.isCompleted ? _controller.reverse() : _controller.forward(), child: Text('Toggle')),
],
);
}
}
5. Riverpod: работа с AsyncValue
Промт: «Создай провайдер Riverpod для получения данных из API с использованием AsyncValue. Покажи обработку загрузки, ошибки и успеха в UI.»
Пример использования: AI генерирует FutureProvider и UI с when методом. Это стандартный паттерн для fetch-запросов, например, загрузки профиля пользователя.
Код:
final userProvider = FutureProvider<User>((ref) async {
final response = await http.get(Uri.parse('https://api.example.com/user'));
return User.fromJson(jsonDecode(response.body));
});
// В UI
userProvider.when(
data: (user) => Text(user.name),
loading: () => CircularProgressIndicator(),
error: (error, stack) => Text('Error: $error'),
);
6. Кастомный виджет с Hero-анимацией
Промт: «Создай Hero-анимацию между двумя экранами для изображения. Используй Navigator.push и Hero с одинаковым тэгом.»
Пример использования: Плавный переход между списком и детальной страницей. AI генерирует оба экрана, обеспечивая совпадение тэгов.
Код:
// Экран 1
Hero(tag: 'image', child: Image.network('https://example.com/photo.jpg'));
// Экран 2 (после push)
Hero(tag: 'image', child: Image.network('https://example.com/photo.jpg', width: 300, height: 300));
7. Форма с валидацией через FormBuilder
Промт: «Напиши форму с полями email и password, валидацию через регулярные выражения и вывод ошибок. Используй GlobalKey
Пример использования: Быстрая регистрация или логин. AI включает проверку на пустоту и формат email.
Код:
final _formKey = GlobalKey<FormState>();
Form(
key: _formKey,
child: Column(
children: [
TextFormField(validator: (val) => val!.contains('@') ? null : 'Invalid email'),
TextFormField(validator: (val) => val!.length < 6 ? 'Too short' : null, obscureText: true),
ElevatedButton(onPressed: () => _formKey.currentState!.validate(), child: Text('Submit')),
],
),
);
8. Анимация с StaggeredAnimations
Промт: «Реализуй staggered-анимацию для списка виджетов: каждый элемент появляется с задержкой 100 мс. Используй Interval в TweenSequence.»
Пример использования: Привлекательные списки в onboarding. AI генерирует TweenSequence с разными интервалами.
Код:
for (int i = 0; i < items.length; i++) {
final delay = Duration(milliseconds: i * 100);
// Используй AnimationController с delay
}
9. Работа с темами: светлая/темная тема
Промт: «Создай переключатель между светлой и темной темой с помощью ThemeData и ThemeMode. Сохрани выбор через SharedPreferences.»
Пример использования: Глобальная настройка UI. AI генерирует ThemeProvider и MaterialApp с динамическим themeMode.
Код:
MaterialApp(
themeMode: ThemeMode.system,
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
);
10. Интеграция с картой (Google Maps)
Промт: «Интегрируй Google Maps Flutter. Добавь маркер по координатам и обработку жестов (zoom, pan). Используй google_maps_flutter ^2.0.»
Пример использования: Отображение точек интереса. AI генерирует GoogleMap виджет с initialCameraPosition и контроллером.
Код:
GoogleMap(
initialCameraPosition: CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 12),
markers: {Marker(markerId: MarkerId('1'), position: LatLng(37.7749, -122.4194))},
onMapCreated: (controller) => _controller = controller,
);
Заключение
Эти 10 промтов покрывают 80% типовых задач Flutter-разработчика: от построения UI до сложных анимаций и state management. Используйте их как отправную точку — адаптируйте под свои проекты и не забывайте тестировать производительность. Flutter развивается, поэтому проверяйте актуальность библиотек (например, Riverpod 2.x или flutter_bloc 8.x). Если у вас есть свои проверенные промты — делитесь в комментариях к блогу!
Комментарии