Flutter(七)：Flutter混合开发--接入现有原生工程(iOS+Android)
<p>在上一篇文章Flutter(六)：Flutter_Boost接入现有原生工程(iOS+Android)中介绍了Flutter_Boost的接入方法，这一篇将介绍Flutter自带的接入方法。</p><h1 id="新建工程">新建工程</h1>
<h3 id="1新建工程">1.新建工程</h3>
<ul>
<li>1.使用Xcode新建flutter_demo_ios（模拟已有工程）</li>
<li>2.使用AndroidStudio新建flutter_demo_android（模拟已有工程）</li>
<li>3.使用AndroidStudio新建flutter_demo_flutter（新的flutter库工程）</li>
</ul>
<p>创建过程可以参考上一篇文章Flutter(六)：Flutter_Boost接入现有原生工程(iOS+Android)，这里就不再展开了。</p>
<p>备注：<br>
1.AndroidSudio需要安装Dart和Flutter插件<br>
2.flutter工程新建时选择<code>Module</code></p>
<p><img src="https://img2022.cnblogs.com/blog/602164/202210/602164-20221013173300630-1922764381.png" alt="" loading="lazy"></p>
<h3 id="2新建完成">2.新建完成</h3>
<p>目录结构如下：</p>
<p><img src="https://img2022.cnblogs.com/blog/602164/202210/602164-20221013173318506-800260924.png" alt="" loading="lazy"></p>
<h1 id="android接入">Android接入</h1>
<h3 id="1settinggradle新增">1.setting.gradle新增</h3>
<pre><code class="language-gradle">setBinding(new Binding())
evaluate(new File(
settingsDir.parentFile,
'flutter_demo_library/.android/include_flutter.groovy'
))
</code></pre>
<h3 id="2app下的buildgradle增加依赖">2.app下的build.gradle增加依赖</h3>
<pre><code class="language-gradle">implementation project(':flutter')
</code></pre>
<p>然后执行<code>gradle sync</code></p>
<h3 id="3跳转代码">3.跳转代码</h3>
<p>在<code>AndroidManifest.xml</code>文件中的<code>application</code>标签中增加:</p>
<pre><code class="language-xml"><activity
android:name="io.flutter.embedding.android.FlutterActivity"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
/>
</code></pre>
<p>跳转代码</p>
<pre><code class="language-kotlin">startActivity(FlutterActivity.createDefaultIntent(currentActivity))
</code></pre>
<h1 id="ios接入">iOS接入</h1>
<h3 id="1修改pod文件">1.修改pod文件</h3>
<pre><code>flutter_application_path = '../flutter_demo_library'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'flutter_demo_ios' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for flutter_demo_ios
install_all_flutter_pods(flutter_application_path)
end
post_install do |installer|
flutter_post_install(installer) if defined?(flutter_post_install)
end
</code></pre>
<p>执行<code>pod install</code>，podhelper.rb 脚本会把你的 plugins， Flutter.framework，和 App.framework 集成到你的项目中。</p>
<h3 id="2修改appdelegate">2.修改AppDelegate</h3>
<pre><code class="language-swift">import UIKit
import Flutter
import FlutterPluginRegistrant
@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
lazy var flutterEngine = FlutterEngine(name: "my flutter engine")
override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: ?) -> Bool {
// Override point for customization after application launch.
flutterEngine.run()
GeneratedPluginRegistrant.register(with: self.flutterEngine)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
</code></pre>
<h3 id="3修改viewcontroller中的跳转代码">3.修改ViewController中的跳转代码</h3>
<pre><code class="language-swift">let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
self.navigationController?.pushViewController(flutterViewController, animated: true)
</code></pre>
<p>ViewController记得还需要<code>import Flutter</code>，至此iOS接入完毕，使用模拟器也可以正常执行。</p>
<h1 id="问题集锦">问题集锦</h1>
<h2 id="android">Android</h2>
<h3 id="1caused-by-orggradleapiinvalidusercodeexception-build-was-configured-to-prefer-settings-repositories-over-project-repositories-but-repository-maven-was-added-by-plugin-class-flutterplugin">1、Caused by: org.gradle.api.InvalidUserCodeException: Build was configured to prefer settings repositories over project repositories but repository 'maven' was added by plugin class 'FlutterPlugin'</h3>
<p>原因：Android项目和Flutter项目的Gradle配置不一样<br>
解决方案：<br>
1、只是demo的话，把Flutter/.android/根目录下的setting.gradle和build.gradl拷贝到Android/根目录下，替换Android项目自带的<br>
2、如果是老的工程，可以参考Flutter 混合开发组件化与工程化架构</p>
<h3 id="2解决flutter-交互页面可见之前会有一个短暂的延迟">2.解决Flutter 交互页面可见之前会有一个短暂的延迟</h3>
<p>原因：每一个 FlutterActivity 默认会创建它自己的 FlutterEngine。每一个 FlutterEngine 会有一个明显的预热时间。这意味着加载一个标准的 FlutterActivity 时，在你的 Flutter 交互页面可见之前会有一个短暂的延迟。</p>
<p>解决方案：想要最小化这个延迟时间，你可以在抵达你的 FlutterActivity 之前，初始化一个 FlutterEngine，然后使用这个已经预热好的 FlutterEngine。</p>
<p>在Application加入代码:</p>
<pre><code class="language-kotlin">class MyApplication : Application() {
lateinit var flutterEngine : FlutterEngine
override fun onCreate() {
super.onCreate()
// Instantiate a FlutterEngine.
flutterEngine = FlutterEngine(this)
// Start executing Dart code to pre-warm the FlutterEngine.
flutterEngine.dartExecutor.executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
)
// Cache the FlutterEngine to be used by FlutterActivity.
FlutterEngineCache
.getInstance()
.put("my_engine_id", flutterEngine)
}
}
</code></pre>
<p>跳转代码：</p>
<pre><code class="language-kotlin">startActivity(FlutterActivity
.withCachedEngine("my_engine_id")
.build(this))
</code></pre><br><br>
来源：https://www.cnblogs.com/anywherego/p/16789036.html
頁:
[1]