Android筆記:在原生App中嵌入Flutter

本文參考文檔Add Flutter to existing apps

首先有一個可以運行的原生項目

第一步:新建Flutter module

Terminal進入到項目根目錄,執行flutter create -t module ‘module名字’例如:flutter create -t module flutter-native

執行完畢,就會發現項目目錄下生成了一個module

Android筆記:在原生App中嵌入Flutter

第二步:同步Flutter module依賴

進入到新生成的Flutter module目錄下的.android目錄下,命令是cd .android/,然後執行gradlew flutter:assembleDebug,mac下./gradlew flutter:assembleDebug

這過程根據網絡情況,可能有點長。

結束之後在.android/Flutter/build/outputs/aar/目錄下會生成flutter-debug.aar

Android筆記:在原生App中嵌入Flutter

第三步:設置JDK版本

在app的build.gradle文件中加入:

compileOptions { sourceCompatibility 1.8 targetCompatibility 1.8 }

Android筆記:在原生App中嵌入Flutter

第四步:依賴Flutter module

settings.gradle中加入

include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'FlutterNativeApplication/flutter_native/.android/include_flutter.groovy'
))

注意:最後一個參數最好寫全路徑!

在app/build.gradle中

dependencies {
    ……
    implementation project(':flutter')
}

到此準備過程結束,寫代碼測試一下,我使用的是Fragment方式。當然也有View的方式。

MainActivity.kt ↓

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
        setContentView(R.layout.activity_main)
        val tx = supportFragmentManager.beginTransaction()
        tx.replace(R.id.content, Flutter.createFragment("route"))
        tx.commit()
    }
}

activity_main.xml ↓

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>

</android.support.constraint.ConstraintLayout>

Android筆記:在原生App中嵌入Flutter

最後

好了,文章到這裏就結束瞭如果你覺得文章還算有用的話,不妨把它們推薦給你的朋友。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章