Интеграция Flutter в существующее нативное iOS или Android приложение — это мощная стратегия для постепенной миграции, добавления новых фич или создания единой кодовой базы для определенных модулей. Несмотря на кажущуюся сложность, базовое внедрение можно выполнить за 30 минут, следуя четкому алгоритму. Этот гайд проведет вас через ключевые шаги, используя официальный метод add-to-app.
Подготовительный этап занимает первые 5 минут. Убедитесь, что ваша среда разработки готова: установлен Flutter SDK (версия не ниже 3.0), Android Studio/Xcode, и ваше нативное приложение собрано без ошибок. Для Android потребуется minSdkVersion 21 или выше, для iOS — версия 11.0+. Создайте новый Flutter-модуль. Не путайте с полноценным приложением. В терминале, вне директории вашего нативного проекта, выполните: `flutter create --template module my_flutter_module`. Эта команда создаст модуль с особыми настройками, предназначенный для интеграции. Запомните путь к этой директории.
Следующие 10 минут посвятим интеграции в Android-приложение. Откройте ваш Android проект в Android Studio. В файле `settings.gradle` (на уровне проекта) добавьте следующие строки в начало, указав корректный путь к вашему Flutter-модулю:
```
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
'path/to/my_flutter_module/.android/include_flutter.groovy'
))
```
Затем, в `app/build.gradle` добавьте зависимость в блок `dependencies`: `implementation project(':flutter')`. Теперь Flutter-модуль доступен как библиотека. Основной инструмент интеграции — `FlutterEngine` и `FlutterFragment`. В вашей `MainActivity` (или любой другой) создайте экземпляр `FlutterEngine` в `onCreate`: `val flutterEngine = FlutterEngine(this)`. Желательно кэшировать его, чтобы сохранить состояние. Для отображения Flutter-экрана используйте `FlutterFragment` или `FlutterView`. Самый простой способ — заменить контент или открыть новую активность с фрагментом. Пример запуска Flutter-экрана по нажатию кнопки:
```
startActivity(
FlutterActivity.withCachedEngine("my_engine_id").build(this)
)
```
Предварительно двигатель нужно создать и запустить с идентификатором "my_engine_id" в точке инициализации приложения.
Интеграция в iOS-приложение займет еще 10 минут. Откройте ваш `.xcodeproj` или `.xcworkspace`. Лучше использовать CocoaPods для управления зависимостями. Убедитесь, что у вас установлен CocoaPods. В `Podfile` вашего проекта добавьте следующие строки, указав путь к модулю:
```
flutter_application_path = '../path/to/my_flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
```
Затем, для каждого таргета, куда нужно интегрировать Flutter, добавьте строку: `install_all_flutter_pods(flutter_application_path)`. Выполните `pod install`. После этого Flutter будет скомпилирован как набор фреймворков. В коде на Swift вам понадобится `FlutterEngine` и `FlutterViewController`. Создайте синглтон или сохраните движок в `AppDelegate`:
```
let flutterEngine = FlutterEngine(name: "my_engine")
flutterEngine.run()
```
Для отображения экрана создайте `FlutterViewController`, связанный с этим движком, и представьте его модально или вложите в `UINavigationController`. Пример:
```
let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
navigationController?.pushViewController(flutterViewController, animated: true)
```
Последние 5 минут отведем на настройку коммуникации и сборку. Flutter и нативная часть общаются через `MethodChannel`. Это двусторонний мост для вызова методов. В коде Flutter (в `lib/main.dart`) и в нативном коде (Kotlin/Java и Swift/Obj-C) нужно создать каналы с одинаковым именем (например, `"com.example.app/channel"`). Это позволит вам вызывать нативные функции (доступ к датчикам, специфичные API) из Flutter и передавать данные обратно. После настройки каналов выполните полную сборку проекта. Для Android: `./gradlew assembleDebug`. Для iOS: откройте `.xcworkspace` и нажмите Build. Убедитесь, что Flutter-экран открывается, и навигация между нативными и Flutter-частями работает корректно.
Важные нюансы: Первая компиляция займет больше времени, так как Flutter соберет все свои зависимости. Размер приложения увеличится на несколько мегабайт (библиотеки движка). Для продакшена используйте AOT-компиляцию (она настроена по умолчанию при сборке релизных версий). Интеграция через модуль позволяет разрабатывать Flutter-часть отдельно с горячей перезагрузкой, используя команду `flutter attach` из директории модуля, когда нативное приложение запущено. Этот 30-минутный план дает вам работающий гибрид, с которого можно начинать постепенное внедрение Flutter в ваш проект.
Как интегрировать Flutter в существующий нативный проект за 30 минут: пошаговый план
Практическое пошаговое руководство по быстрой интеграции Flutter-модуля в существующие нативные проекты iOS и Android с использованием официального подхода add-to-app.
495
3
Комментарии (6)