Кроссплатформенная разработка экономит время, но написание кода для двух платформ всё ещё требует усилий. ChatGPT и другие LLM могут стать вашим вторым пилотом, если знать, как правильно формулировать запросы. В этой подборке — 12 промтов, которые я собрал за годы работы с Flutter и React Native. Они помогут генерировать виджеты, оптимизировать производительность, работать с нативными модулями и тестировать приложения.
Базовые промты
1. Генерация простого виджета Flutter
Задача: Создать переиспользуемый виджет кнопки с кастомным стилем.
Промт:
"Создай виджет Flutter CustomButton, который принимает текст, иконку и колбэк. Кнопка должна иметь закруглённые углы, тень и менять цвет при нажатии. Используй Material 3."
Пример результата:
class CustomButton extends StatelessWidget {
final String text;
final IconData icon;
final VoidCallback onPressed;
const CustomButton({super.key, required this.text, required this.icon, required this.onPressed});
@override
Widget build(BuildContext context) {
return ElevatedButton.icon(
onPressed: onPressed,
icon: Icon(icon),
label: Text(text),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
elevation: 4,
),
);
}
}
2. Создание компонента React Native
Задача: Сгенерировать карточку товара с изображением и кнопкой.
Промт:
"Напиши компонент React Native ProductCard, который отображает изображение, название, цену и кнопку 'Купить'. Используй StyleSheet, поддерживай тёмную тему."
Пример результата:
const ProductCard = ({ image, title, price, onBuy }) => (
<View style={styles.card}>
<Image source={{ uri: image }} style={styles.image} />
<Text style={styles.title}>{title}</Text>
<Text style={styles.price}>{price} ₽</Text>
<Button title="Купить" onPress={onBuy} />
</View>
);
Продвинутые промты
3. Оптимизация производительности списка
Задача: Ускорить рендеринг длинного списка в React Native.
Промт:
"У меня есть FlatList с 1000 элементов, который тормозит. Предложи оптимизации: используй getItemLayout, removeClippedSubviews, мемоизацию. Приведи пример кода."
Пример результата:
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={({ item }) => <MemoizedItem item={item} />}
getItemLayout={(_, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index })}
removeClippedSubviews={true}
initialNumToRender={10}
maxToRenderPerBatch={5}
windowSize={7}
/>
4. Управление состоянием с Riverpod
Задача: Перевести приложение с Provider на Riverpod.
Промт:
"Покажи, как заменить ChangeNotifierProvider на Riverpod для счётчика. Напиши провайдер и виджет, который его использует."
Пример результата:
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() => state++;
}
// В виджете:
Consumer(builder: (context, ref, child) {
final count = ref.watch(counterProvider);
return Text('$count');
})
5. Работа с нативным модулем
Задача: Вызвать нативный код Android из Flutter.
Промт:
"Напиши пример MethodChannel для получения уровня заряда батареи на Android. Покажи код на Dart и Kotlin."
Пример результата:
static const platform = MethodChannel('samples.flutter.dev/battery');
Future<void> getBatteryLevel() async {
final int result = await platform.invokeMethod('getBatteryLevel');
}
class MainActivity: FlutterActivity() {
private val CHANNEL = "samples.flutter.dev/battery"
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
if (call.method == "getBatteryLevel") {
val batteryLevel = getBatteryLevel()
result.success(batteryLevel)
}
}
}
}
6. Анимация перехода
Задача: Создать плавную анимацию появления карточки в Flutter.
Промт:
"Сделай анимацию scale+fade для появления виджета. Используй AnimatedOpacity и Transform.scale."
Пример результата:
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 300),
child: Transform.scale(
scale: _visible ? 1.0 : 0.8,
child: Card(...),
),
)
Экспертные промты
7. Тестирование виджета
Задача: Написать unit-тест для Flutter виджета.
Промт:
"Напиши тест для CustomButton, который проверяет, что при нажатии вызывается колбэк. Используй flutter_test."
Пример результата:
testWidgets('CustomButton calls onPressed', (tester) async {
var pressed = false;
await tester.pumpWidget(MaterialApp(home: CustomButton(text: 'Test', icon: Icons.add, onPressed: () => pressed = true)));
await tester.tap(find.byType(ElevatedButton));
expect(pressed, isTrue);
});
8. Сборка релиза с оптимизацией
Задача: Уменьшить размер APK.
Промт:
"Как уменьшить размер Flutter APK? Предложи шаги: split-per-abi, удаление неиспользуемых ресурсов, proguard."
Пример результата:
flutter build apk --split-per-abi --obfuscate --split-debug-info=./debug-info
9. Интеграция с Firebase
Задача: Добавить аналитику Firebase в React Native.
Промт:
"Покажи, как подключить Firebase Analytics в React Native и логировать событие покупки."
Пример результата:
import analytics from '@react-native-firebase/analytics';
await analytics().logEvent('purchase', { item: 'premium', value: 9.99 });
10. Обработка ошибок сети
Задача: Централизованно обрабатывать ошибки HTTP в Flutter.
Промт:
"Создай класс ApiClient с обработкой ошибок: таймауты, 4xx, 5xx. Используй Dio."
Пример результата:
class ApiClient {
final Dio _dio = Dio();
Future<Response> get(String url) async {
try {
return await _dio.get(url);
} on DioException catch (e) {
if (e.type == DioExceptionType.connectionTimeout) throw Exception('Таймаут');
rethrow;
}
}
}
11. Кэширование изображений
Задача: Ускорить загрузку изображений в React Native.
Промт:
"Как кэшировать изображения в React Native? Предложи react-native-fast-image и пример."
Пример результата:
import FastImage from 'react-native-fast-image';
<FastImage source={{ uri: 'https://example.com/image.jpg', priority: FastImage.priority.normal }} style={{ width: 200, height: 200 }} />
12. CI/CD для мобильного приложения
Задача: Настроить автоматическую сборку.
Промт:
"Напиши GitHub Actions workflow для сборки Flutter APK и запуска тестов."
Пример результата:
name: Flutter CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: subosito/flutter-action@v2
- run: flutter test
- run: flutter build apk
Эти промты помогут сократить рутину и сосредоточиться на логике. Главное — адаптировать их под свой проект и не забывать проверять сгенерированный код. Удачи в разработке!
Комментарии