Добавьте Flutter View в родное приложение для iOS

Давайте рассмотрим, как добавить представления Flutter в нативные представления iOS, такие как UIViewController.

Фон

Я знаю, что мы все любим флаттер, но не всегда возможно сразу перенести все приложение во Flutter. В качестве решения мы можем добавить проект Flutter в виде библиотеки или модуля в наше существующее нативное приложение. Благодаря функции добавления в приложение мы можем сделать это и даже больше!

Это также полезно, когда мы хотим реализовать одно и то же в приложениях для Android и iOS. В этом случае нет необходимости писать отдельный код для обеих платформ. Вы можете создать одно представление во Flutter, а затем использовать его на обеих платформах как отдельный модуль.

Вы можете ознакомиться с официальной документацией, если вы не знакомы с этой концепцией.

Контур

Сегодня мы собираемся реализовать простое демонстрационное приложение на iOS, которое будет иметь две страницы Flutter, на первой странице мы покажем список пользователей, а второй экран будет экраном сведений о пользователе.

Мы встроим модуль флаттера в наше приложение для iOS в виде пакета библиотеки.

Я разделил статью на 4 логических шага, чтобы облегчить понимание.

Создать модуль флаттера
Сгенерируйте iOS Framework из модуля
Интеграция и встраивание фреймворка в нативное приложение
Откройте флаттер-представление как UIViewController.

Хорошо, давайте начнем!

1. Создайте модуль Flutter

Начнем с того, что если вы еще не установили Flutter SDK в своей системе, самое время это сделать. Перейдите по этой ссылке, чтобы найти инструкции по настройке флаттера на вашем компьютере.

Все готово? Большой !!!

Давайте сначала начнем с создания модуля Flutter из существующего проекта Flutter.

Из интерфейса командной строки перейдите в каталог, в котором вы хотите сохранить модуль Flutter в своем проекте, а затем выполните следующую команду с помощью инструмента Flutter CLI:

flutter create -template module --org com.demo flutter_lib

Эта команда создаст модуль флаттера со скрытыми папками .android и .ios. Эти папки создаются автоматически, поэтому не вносите никаких изменений.

Затем запустите flutter pub get в каталоге flutter_lib.

Мы закончили с настройкой. Теперь давайте добавим экран в файл main.dart модуля.

Мы не собираемся рассматривать реализацию флаттера.

Вот наше приложение модуля флаттера. Полный исходный код доступен на GitHub. Вы можете скопировать его отсюда в свой файл дротика.

В итоге у нас будет приложение, подобное приведенному ниже.

2. Сгенерируйте iOS Framework из модуля

Теперь давайте начнем интегрировать модуль флаттера в наше собственное приложение для iOS.

В нашем файле main.dart внутри flutter_lib/lib мы уже определили функцию точки входа, которую будем вызывать из нашего модуля Native.

Эта функция точки входа выглядит примерно так:

@pragma("vm:entry-point")
void nativeLoad() async {
    WidgetsFlutterBinding.ensureInitialized();
    runApp(MyApp());
}

Эта функция будет вызываться из приложения iOS. Таким образом, любой вид, запущенный при вызове этой функции, будет интегрирован в приложение iOS. Мы увидим его использование ниже.

Теперь давайте сгенерируем фреймворк iOS из модуля Flutter.

Согласно документации по флаттеру, у нас есть много способов создать фреймворк iOS и встроить его в нативный проект, но здесь мы собираемся использовать его второй вариант под названием Встроить фреймворк в Xcode.

Давайте сначала сгенерируем фреймворк iOS. Запустите эту команду из каталога flutter_lib.

flutter build ios-framework

Он создаст 3 отдельных каталога фреймворка, как показано ниже.

some/path/MyApp/flutter_lib/build/ios
└── Flutter/
    ├── Debug/
    │   ├── Flutter.xcframework
    │   ├── App.xcframework
    │   ├── FlutterPluginRegistrant.xcframework (only if you have plugins with iOS platform code)
    │   └── example_plugin.xcframework (each plugin is a separate framework)
    ├── Profile/
    │   ├── Flutter.xcframework
    │   ├── App.xcframework
    │   ├── FlutterPluginRegistrant.xcframework
    │   └── example_plugin.xcframework
    └── Release/
        ├── Flutter.xcframework
        ├── App.xcframework
        ├── FlutterPluginRegistrant.xcframework
        └── example_plugin.xcframework

Если вы хотите сгенерировать только один конкретный тип сборки, это также возможно.

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

flutter build ios-framework --no-release --no-profile

flutter build ios-framework --debug

Сделанный? Теперь пойдем дальше.

3. Интегрируйте и встройте фреймворк в нативное приложение.

Сгенерированные динамические платформы должны быть встроены в ваше приложение для загрузки во время выполнения.

Мы можем встроить фреймворк, просто перетащив его в корневой каталог проекта iOS.

Это будет выглядеть так,

Теперь мы должны проверить, что все добавленные фреймворки встроены в проект.

Для этого перейдите в раздел Build Settings › General › Frameworks, Libraries and Embedded Content вашей цели и выберите Embed & Sign в раскрывающемся списке добавленных фреймворков.

Но все же этого недостаточно, мы также должны указать путь поиска добавленного каталога фреймворка.

В настройках сборки цели добавьте “$(SRCROOT)/Debug” к Пути поиска фреймворка (FRAMEWORK_SEARCH_PATHS) или просто перетащите каталог в раздел значений этого параметра.

Вот и все. Теперь вы сможете построить проект без каких-либо ошибок.

4. Откройте флаттер-представление как UIViewController.

Чтобы запустить экран Flutter из существующей iOS, нам придется использовать классы FlutterEngine и FlutterViewController.

Согласно Flutter Doc, —

FlutterEngine служит хостом для виртуальной машины Dart и среды выполнения Flutter, а FlutterViewController подключается к FlutterEngine для передачи входных событий UIKit во Flutter и для отображения кадров, отображаемых FlutterEngine.

Давайте сначала добавим простую кнопку в главный viewController, чтобы мы могли открывать представление Flutter одним нажатием этой кнопки.

Теперь давайте посмотрим, как мы можем открывать флаттер-представления.

а. Создайте FlutterEngine

Давайте сначала изменим файл AppDelegate.swift, чтобы внести необходимые изменения.

Здесь мы сделали следующие изменения —

В соответствии с требованием флаттера мы должны соответствовать протоколу FlutterAppDelegate в классе AppDelegate class.
После этого мы создали экземпляр класса FlutterEngine, аргумент name может быть любым!
В этом проекте мы открываем только одно флаттер-представление, поэтому мы добавили только один flutterEngine, но если вам нужно открыть более одного флаттер-представления, вам придется соответственно создавать отдельные движки.
После этого мы добавили оператор запуска флаттера, здесь для аргументов — withEntrypoint: мы должны передать имя функции entryPoint, которое мы настроили в файле main.dart модуля флаттера.
libraryURI : Передайте путь к файлу dart модуля. В противном случае он просто откроет пустой экран размытия.

Мы должны передать местоположение файла dart с ключевым словом package:, иначе в некоторых случаях он не будет работать должным образом.

б. Откройте представление Flutter как UIViewController

Теперь нам нужно только открыть представление флаттера нажатием данной кнопки входа.

Давайте возьмем @IBAction кнопки входа и добавим код для открытия флаттер-представления в ее блоке, чтобы наш ViewController выглядел так:

Очень легко понять, не так ли?

Это просто получение объекта флаттер-движка из класса AppDelegate и использование его для открытия представления с помощью FlutterViewController..

Вот и все. Теперь вы можете запустить приложение!

Заключение

Это все на сегодня. Надеюсь, вы что-то узнали и у вас есть представление о том, как интеграция модуля флаттера может происходить в приложениях iOS.

Если у вас возникнут какие-либо проблемы, не стесняйтесь спрашивать, добавляя комментарий.