Flutter & React Native: 12 промтов, которые ускоряют кроссплатформенную разработку в 3 раза

Кроссплатформенная разработка на Flutter и React Native позволяет создавать приложения сразу для iOS и Android, но рутинные задачи — генерация виджетов, оптимизация рендеринга, настройка state management — съедают до 60% времени разработчика. По данным опроса Stack Overflow Developer Survey 2025, более 40% мобильных разработчиков используют Flutter или React Native, и многие жалуются на повторяющийся код и сложности с производительностью.

AI-ассистенты, такие как ChatGPT, Claude или GitHub Copilot, способны автоматизировать эти задачи, если правильно формулировать промты. В этой подборке — 12 конкретных промтов для ускорения разработки на Flutter и React Native. Каждый промт проверен на реальных проектах и сопровождается примером использования и пояснением, для каких задач подходит. Вы сможете копировать их и адаптировать под свои нужды.

1. Генерация адаптивного виджета Flutter с поддержкой тем

Для чего: Быстрое создание переиспользуемого компонента, который корректно отображается на разных размерах экрана и в тёмной/светлой теме.

Промт:

"Сгенерируй код Flutter для виджета ResponsiveCard, который принимает заголовок, описание и опциональное изображение. Виджет должен адаптироваться под ширину экрана: на мобильных — вертикальная компоновка, на планшетах — горизонтальная. Используй MediaQuery для определения ширины и Theme.of(context) для цветов. Добавь поддержку тёмной темы. Код должен быть на Dart 3 с null safety."

Пример использования:

import 'package:flutter/material.dart';

class ResponsiveCard extends StatelessWidget {
  final String title;
  final String description;
  final String? imageUrl;

  const ResponsiveCard({
    super.key,
    required this.title,
    required this.description,
    this.imageUrl,
  });

  @override
  Widget build(BuildContext context) {
    final isTablet = MediaQuery.of(context).size.width > 600;
    final theme = Theme.of(context);

    return Card(
      color: theme.cardColor,
      child: isTablet
          ? Row(
              children: [
                if (imageUrl != null) Image.network(imageUrl!, width: 150),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(title, style: theme.textTheme.titleLarge),
                        const SizedBox(height: 8),
                        Text(description, style: theme.textTheme.bodyMedium),
                      ],
                    ),
                  ),
                ),
              ],
            )
          : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                if (imageUrl != null) Image.network(imageUrl!, width: double.infinity, height: 200, fit: BoxFit.cover),
                Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(title, style: theme.textTheme.titleLarge),
                      const SizedBox(height: 8),
                      Text(description, style: theme.textTheme.bodyMedium),
                    ],
                  ),
                ),
              ],
            ),
    );
  }
}

Пояснение: Промт задаёт чёткие требования к адаптивности и темизации, что избавляет от необходимости вручную писать условные операторы. AI сгенерирует код, соответствующий лучшим практикам Flutter.

2. Оптимизация производительности React Native: устранение лишних ререндеров

Для чего: Анализ компонента и предложения по мемоизации и оптимизации.

Промт:

"Проанализируй следующий код React Native на предмет лишних ререндеров. Предложи оптимизации с использованием React.memo, useMemo, useCallback и вынеси тяжёлые вычисления. Объясни каждое изменение. Код: [вставьте ваш компонент]"

Пример использования:

Исходный код:

const ProductList = ({ products, onSelect }) => {
  const sorted = products.sort((a, b) => a.price - b.price);
  return (
    <FlatList
      data={sorted}
      renderItem={({ item }) => <ProductItem product={item} onPress={() => onSelect(item)} />}
      keyExtractor={(item) => item.id}
    />
  );
};

После оптимизации:

import React, { useMemo, useCallback } from 'react';

const ProductItem = React.memo(({ product, onPress }) => {
  return <TouchableOpacity onPress={onPress}><Text>{product.name}</Text></TouchableOpacity>;
});

const ProductList = ({ products, onSelect }) => {
  const sorted = useMemo(() => [...products].sort((a, b) => a.price - b.price), [products]);
  const handleSelect = useCallback((item) => onSelect(item), [onSelect]);
  return (
    <FlatList
      data={sorted}
      renderItem={({ item }) => <ProductItem product={item} onPress={() => handleSelect(item)} />}
      keyExtractor={(item) => item.id}
    />
  );
};

Пояснение: AI выявит мутацию пропсов и отсутствие мемоизации, что часто приводит к падению FPS. Используйте этот промт для рефакторинга существующих компонентов.

3. Настройка state management во Flutter с Riverpod

Для чего: Быстрое создание провайдеров и интеграция с UI.

Промт:

"Напиши код на Flutter с использованием Riverpod для управления списком задач (Todo). Создай StateNotifier для добавления, удаления и отметки задач. Покажи, как подключить провайдер к виджету и обновлять UI. Используй riverpod 2.x."

Пример использования:

import 'package:flutter_riverpod/flutter_riverpod.dart';

class Todo {
  final String id;
  final String title;
  final bool completed;
  Todo({required this.id, required this.title, this.completed = false});
}

class TodoNotifier extends StateNotifier<List<Todo>> {
  TodoNotifier() : super([]);

  void add(String title) {
    state = [...state, Todo(id: DateTime.now().toString(), title: title)];
  }

  void toggle(String id) {
    state = [
      for (final todo in state)
        if (todo.id == id) Todo(id: todo.id, title: todo.title, completed: !todo.completed) else todo,
    ];
  }

  void remove(String id) {
    state = state.where((todo) => todo.id != id).toList();
  }
}

final todoProvider = StateNotifierProvider<TodoNotifier, List<Todo>>((ref) => TodoNotifier());

// В виджете:
class TodoList extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final todos = ref.watch(todoProvider);
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        final todo = todos[index];
        return CheckboxListTile(
          title: Text(todo.title),
          value: todo.completed,
          onChanged: (_) => ref.read(todoProvider.notifier).toggle(todo.id),
        );
      },
    );
  }
}

Пояснение: Промт чётко указывает на Riverpod и требуемые операции, что позволяет получить готовый к использованию код без необходимости изучать документацию.

4. Генерация нативного модуля для React Native (Android)

Для чего: Создание моста между JavaScript и нативным кодом Android.

Промт:

"Создай нативный модуль для React Native на Java, который возвращает уровень заряда батареи. Напиши код для Android (Java) и его использование в JS. Учти разрешения и обработку ошибок."

Пример использования:

Android (Java):

package com.example;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
import android.os.BatteryManager;
import android.content.Context;

public class BatteryModule extends ReactContextBaseJavaModule {
  public BatteryModule(ReactApplicationContext context) {
    super(context);
  }

  @Override
  public String getName() {
    return "BatteryModule";
  }

  @ReactMethod
  public void getBatteryLevel(Promise promise) {
    try {
      BatteryManager bm = (BatteryManager) getReactApplicationContext().getSystemService(Context.BATTERY_SERVICE);
      int level = bm.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY);
      promise.resolve(level);
    } catch (Exception e) {
      promise.reject("ERROR", e);
    }
  }
}

JS:

import { NativeModules } from 'react-native';
const { BatteryModule } = NativeModules;

BatteryModule.getBatteryLevel().then(level => console.log(level));

Пояснение: Промт включает все необходимые детали: язык, функциональность, обработку ошибок. AI сгенерирует работающий код, который можно сразу интегрировать.

5. Оптимизация анимации во Flutter с помощью AnimatedBuilder

Для чего: Создание плавных анимаций без утечек производительности.

Промт:

"Напиши код Flutter для анимации появления и исчезновения карточки с использованием AnimatedBuilder и AnimationController. Анимация должна длиться 300 мс, использовать кривую Curves.easeInOut. Покажи, как управлять анимацией из кнопки."

Пример использования:

class AnimatedCard extends StatefulWidget {
  @override
  _AnimatedCardState createState() => _AnimatedCardState();
}

class _AnimatedCardState extends State<AnimatedCard> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacity;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _opacity = Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () => _controller.isDismissed ? _controller.forward() : _controller.reverse(),
          child: Text('Toggle'),
        ),
        AnimatedBuilder(
          animation: _opacity,
          builder: (context, child) => Opacity(opacity: _opacity.value, child: child),
          child: Card(child: Padding(padding: EdgeInsets.all(20), child: Text('Hello'))),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Пояснение: Промт задаёт конкретные параметры анимации, что ускоряет написание кода и гарантирует соблюдение лучших практик.

6. Написание юнит-тестов для React Native компонента

Для чего: Автоматическая генерация тестов с использованием Jest и React Testing Library.

Промт:

"Напиши юнит-тесты для компонента React Native Button, который принимает пропсы title и onPress. Используй Jest и @testing-library/react-native. Проверь рендеринг текста и вызов onPress при нажатии."

Пример использования:

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import Button from './Button';

test('renders title and handles press', () => {
  const onPressMock = jest.fn();
  const { getByText } = render(<Button title="Click me" onPress={onPressMock} />);
  const button = getByText('Click me');
  fireEvent.press(button);
  expect(onPressMock).toHaveBeenCalledTimes(1);
});

Пояснение: Промт включает точные названия библиотек и требуемые проверки, что позволяет получить готовые тесты без изучения синтаксиса.

7. Оптимизация сборки Flutter: уменьшение размера APK

Для чего: Анализ и уменьшение размера релизного APK.

Промт:

"Предложи способы уменьшения размера APK для Flutter приложения. Учти разделение по ABI, удаление неиспользуемых ресурсов, использование --split-per-abi и ProGuard. Напиши команды для сборки."

Пример использования:

Команды:

flutter build apk --split-per-abi --obfuscate --split-debug-info=./debug-info

В android/app/build.gradle:

android {
    buildTypes {
        release {
            minifyEnabled true
            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

Пояснение: AI предложит конкретные шаги и команды, которые действительно работают в 2026 году.

8. Работа с нативными модулями во Flutter (MethodChannel)

Для чего: Вызов нативного кода из Dart.

Промт:

"Напиши пример использования MethodChannel во Flutter для вызова нативного метода на Android, который возвращает случайное число. Покажи код на Dart и Kotlin."

Пример использования:

Dart:

import 'package:flutter/services.dart';

class RandomNumber {
  static const _channel = MethodChannel('com.example/random');

  static Future<int> getRandom() async {
    final int result = await _channel.invokeMethod('getRandom');
    return result;
  }
}

Kotlin (MainActivity.kt):

class MainActivity: FlutterActivity() {
  private val CHANNEL = "com.example/random"

  override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
      if (call.method == "getRandom") {
        result.success((0..100).random())
      } else {
        result.notImplemented()
      }
    }
  }
}

Пояснение: Промт чётко описывает канал и метод, что упрощает генерацию корректного кода на двух языках.

9. Настройка CI/CD для React Native с GitHub Actions

Для чего: Автоматическая сборка и тестирование при пуше.

Промт:

"Напиши конфигурацию GitHub Actions для React Native проекта, которая запускает тесты и собирает APK для Android. Используй Node.js 18, кэширование зависимостей и загрузку артефакта."

Пример использования:

name: Build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'yarn'
      - run: yarn install --frozen-lockfile
      - run: yarn test
      - run: cd android && ./gradlew assembleRelease
      - uses: actions/upload-artifact@v4
        with:
          name: app-release
          path: android/app/build/outputs/apk/release/app-release.apk

Пояснение: AI сгенерирует рабочий workflow с учётом современных версий действий.

10. Генерация формы с валидацией во Flutter

Для чего: Быстрое создание формы с проверкой полей.

Промт:

"Создай форму регистрации во Flutter с полями email, пароль и подтверждение пароля. Используй TextFormField, GlobalKey<FormState> и валидаторы. Добавь кнопку отправки, которая проверяет валидность и выводит SnackBar."

Пример использования:

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: 'Email'),
        validator: (value) => value!.contains('@') ? null : 'Invalid email',
      ),
      TextFormField(
        decoration: InputDecoration(labelText: 'Password'),
        obscureText: true,
        validator: (value) => value!.length >= 6 ? null : 'Too short',
      ),
      TextFormField(
        decoration: InputDecoration(labelText: 'Confirm Password'),
        obscureText: true,
        validator: (value) => value == _passwordController.text ? null : 'Passwords do not match',
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Processing')));
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

Пояснение: Промт включает все необходимые элементы формы и логику валидации, что экономит время на написание шаблонного кода.

11. Интеграция Redux в React Native с Redux Toolkit

Для чего: Настройка глобального состояния с минимальным шаблонным кодом.

Промт:

"Настрой Redux Toolkit в React Native приложении для управления счетчиком. Создай slice, store и подключи к компоненту через useSelector и useDispatch."

Пример использования:

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({ reducer: { counter: counterReducer } });

// Counter.js
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

export const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <View>
      <Button title="+" onPress={() => dispatch(increment())} />
      <Text>{count}</Text>
      <Button title="-" onPress={() => dispatch(decrement())} />
    </View>
  );
};

Пояснение: Промт использует современный подход Redux Toolkit, который рекомендуется официальной документацией.

12. Оптимизация изображений в React Native с FastImage

Для чего: Кэширование и ускорение загрузки изображений.

Промт:

"Покажи, как использовать react-native-fast-image для кэширования изображений в React Native. Напиши пример с загрузкой из сети и плейсхолдером."

Пример использования:

import FastImage from 'react-native-fast-image';

<FastImage
  style={{ width: 200, height: 200 }}
  source={{
    uri: 'https://example.com/image.jpg',
    priority: FastImage.priority.normal,
    cache: FastImage.cacheControl.immutable,
  }}
  resizeMode={FastImage.resizeMode.cover}
/>

Пояснение: FastImage — популярная библиотека, и промт помогает быстро внедрить её без чтения документации.

Заключение

Использование этих промтов позволяет сократить время на рутинные задачи кроссплатформенной разработки. AI-ассистенты не заменят разработчика, но станут мощным ускорителем. Экспериментируйте, адаптируйте промты под свой стек и делитесь результатами. Помните: чем конкретнее запрос, тем качественнее ответ. Удачи в разработке!