🐕 🤵🏻 👨🏽‍🏭 Kotlin + Flutter UI上的iOS和Android应用程序 🈹 🧜 🕦

参赛作品

大家好前段时间，我决定同时为Android和iOS创建我的项目。自然地，出现了关于技术选择的问题。几周后，我查看了流行的堆栈，然后选择了Kotlin / Native。自从我是一名Android开发人员以来，我就很熟悉Kotlin了很长一段时间，但是对Swift的了解并不多，我想让大多数代码都适用于这两个平台。因此，这个问题立即出现，但是如何为iOS编写UI。快速浏览一下市场，发现那里有Flutter，它允许您同时为两个平台编写UI。实际上，这个故事开始了。

本文介绍Flutter作为UI和Kotlin进行核心逻辑构建的经验。 重要提示：猫下有很多图片和有关如何组装项目的说明

第一部分

在Kotlin上创建共享库

选择Kotlin Mobile共享库
下一个
指定我们的工作文件夹，这里我为项目创建了一个单独的文件夹。由于我将有4个不同的项目，因此将它们放在一个位置更方便
仍然需要在sdk.dir中指定sdk.dir的路径， sdk.dir开始构建项目，我的路径是/Users/vlad/Library/Android/sdk
项目结构，将包名称从sample habr.example更改sample habr.example
是时候开始发布了，调用wrapper 。之后，.gradlew .gradlew将出现在我们的项目中，并且可以在终端上使用它。
从终端./gradlew publishToMavenLocal
之后，在本地Maven存储库中，我们将有4个文件夹，这些文件夹将位于我们的库中

第二部分

创建一个Android应用程序

创建一个Android项目

这里的一切都是标准的。

在撰写本文时，该项目的生成具有“中断的”依赖关系，因此我们在jre7的末尾将其删除，我们得到koltin-stdlib ，之后该项目开始构建
打开build.gradle并将mavenLocal添加mavenLocal repositories部分。 重要！ repositories部分应该在allprojects而不是在allprojects中
现在我们可以将我们的库添加为依赖项
implementation 'habr.example:commonLibrary-jvm:0.0.1'
我们打开activity_main.xml并在main_activity_text TextView ID中指定main_activity_text
在MainActivity.kt只需在此TextView设置文本
太好了，至此，我们有了一个可以使用我们库中的hello()函数的Android应用程序
模拟器上的hello（）

第三部分

创建一个iOS项目

选择单视图应用
填写基本信息，然后选择文件夹。选择我们其他项目的文件夹根目录很重要，因为Xcode将在其中创建一个带有项目名称的子文件夹。
首先，添加CocoaPods 。为此，请在项目文件夹中运行pod init ，在Xcode关闭项目Xcode然后运行pod install 。我们看到安装成功完成
重要！ CocoaPods不建议将/Pods文件夹添加到.gitignore ，但是我还是这样做了。由于添加了flutter ，我们将为每个build重新配置依赖项。到目前为止，我更喜欢这种解决方案，而不是阻塞.git
通过文件Awesome App.xcworkspace打开项目
我们打开终端，在其中转到我们的./gradlew linkDebugFrameworkIos文件夹，然后运行./gradlew linkDebugFrameworkIos 。之后， iOSFramework出现在我们的build文件夹中iOSFramework
选择目标
对于这个目标，我们添加二进制
选择添加其他
指定您在步骤6中收到的framework的路径（ commonLibrary.framework ）
现在在项目中应显示此framework
转到Build Settings并禁用Enable Bitcode
现在，您需要指定确切的位置来查找我们的framework ，打开“ Framework Search Path
指定路径"${PODS_ROOT}/../../commonLibrary" 。确保选择recursive 。当然，如果您更准确地配置路径，则可以不这样做。但是，由于这仅仅是项目的开始，因此对于我们来说确保整个工作都能正常进行很重要。然后我们可以改变方式
我们需要确保在Xcode每个build中Xcode我们的framework使用gradle 。开放Build Phases
添加一个新的Script Phase
添加脚本代码。
```
 cd "${PODS_ROOT}/../../commonLibrary" echo $(pwd) ./gradlew linkIos 
```
在这里，我们只需转到库的项目文件夹并运行./gradlew linkIos 。仅在控制台中需要显示echo $(pwd)调用，才能显示我们到哪个特定文件夹
在target dependencies之后，我们将build phase推到了最顶层
现在打开ViewController并从库中添加对我们函数的调用
我们启动我们的项目，看看

太好了，这意味着我们已将Kotlin库正确连接到iOS项目。
剩下的就是在我们的应用程序中添加颤动（作为编写UI的框架），然后您就可以开始开发产品了

第4部分

将Flutter添加到Android应用

然后在github上的一篇文章对我有很大帮助

转到我们所有项目所在的根文件夹，然后执行flutter create -t module flutter_ui
打开settings.gradle并将flutter-module启用为子项目
打开build.gradle文件并添加我们的项目，具体取决于
MainActivity.kt为FlutterActivity
添加App.kt ，在其中我们将在应用程序启动时初始化Flutter
更改清单并说我们现在有一个Application类
确保添加java8 ，否则将无法启动
我们在JVM日志的Hello中看到了UI，这意味着我们将UI放在Flutter上，并将主库放在Kotlin / Native上
在MainActivity.kt中添加一个方法，我们将从Flutter中调用该方法。在这里，在Flutter的事件中，我们从kotlin-library返回了hello()
并将代码添加到main.dart ，该代码将iOS/Android-应用程序的iOS/Android-调用该方法
我们得到

第5部分

将Flutter添加到iOS App

更新我们的Podfile

 flutter_application_path = File.expand_path("../flutter_ui", File.dirname(path)) eval(File.read( File.join( flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

这很重要 。将$(inherited)添加到framework search paths的第一行。确保检查framework search paths空

当您在some/path/my_flutter/pubspec.yaml更改依赖some/path/my_flutter/pubspec.yaml ，您需要运行从some/path/my_flutter flutter packages get以更新some/path/my_flutter中的依赖podhelper.rb 。之后，从some/path/MyApp运行pod install

仅针对Flutter增加1个Build Phase 。在 Script phase 第3部分中添加的内容之上

 "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

用FlutterAppDelegate AppDelegate我们的AppDelegate
更新ViewController
将ViewController包裹在NavigatorController
现在，应用程序启动。但是，到目前为止，我们在库和颤振之间没有任何联系
使用FlutterMethodChannel添加此链接
太好了，现在iOS应用程序将flutter用于UI ，将kotlin用于主要逻辑。

结论

这里要说的很重要：我不假装您已经学到了新的东西或独特的东西。我只是分享了我的经验，因为为了使所有这些协同工作，我花了大约4个工作日。而且我找不到同时使用Kotlin / Native和Flutter的项目代码示例

最终项目

链接列表对我有帮助，但不是立即

自己扑
本机代码与UI Flutter平台通道之间的关系
将Flutter添加到现有的github应用中
Kotlin Native 本机概述

Kotlin + Flutter UI上的iOS和Android应用程序