本文會隨著FlutterBoost的發(fā)布不斷更新。

寫本篇文章的目的：FlutterBoost的README和FlutterBoost所給的demo有出入，照著README是無法成功集成的。官方demo是已經(jīng)集成完畢后的狀態(tài)，所以我參考了demo，嘗試如何一步一步集成，中間也遇到了一些問題，所以想記錄一下，同時也希望對別人有所幫助。在此過程中請教了flutter boost 開源貢獻小組中的許多大佬，他們也都熱心給出了許多建議，在此表示感謝。

注意：本篇文章并不涉及FlutterBoost的原理。

本文基于你已經(jīng)安裝好了flutter并進行了相關(guān)的配置。如何安裝配置請參考起步:安裝Flutter。

先看看集成后的效果

運行效果.gif

接下來開始

flutter boost 目前已經(jīng)支持flutter 1.9版本，對應的flutter 版本是：v1.9.1-hotfixes。

flutter boost分支是：feature/flutter_1.9_upgrade。

flutter boost androidx 分支是：feature/flutter_1.9_androidx_upgrade。如果你的項目需要支持 androidx的話，需要選擇使用這個分支 。

切換flutter到stable分支。

這里說一下，flutter也是一個git倉庫。我們可以用git命令或者Sourcetree等圖形化工具查看。

首先在命令行運行flutter channel stable，切換到stable分支。然后運行flutter pub get。然后看一下stable分支最新的提交。

stable_channel.png

我是使用Sourcetree來查看flutter倉庫的。可以看到當前處于stable分支的v1.9.1+hotfix.6節(jié)點。

創(chuàng)建Android原生工程

android_project.png

android_project_structure.png

我們創(chuàng)建好的Android原生工程結(jié)構(gòu)如上圖所示，注意我們是使用了androidx的。

使用Android Studio 創(chuàng)建一個flutter module工程

create_flutter_module_step1.png

選擇 File->New->New Flutter Project

create_flutter_module_step2.png

create_flutter_module_step3.png

create_flutter_module_step4.png

注意我們創(chuàng)建的是一個 Flutter Module，并且我們使用了androidx。創(chuàng)建好的flutter module結(jié)構(gòu)如下所示。

flutter_module_structure.png

Flutter Module 集成 Flutter Boost

現(xiàn)在我們要在創(chuàng)建好的Flutter Module中集成Flutter Boost。這里注意一點，因為我們的Android 原生項目和Flutter Module都使用了androidx,所以我們要使用Flutter Boost對應的flutter_1.9_androidx_upgrade分支。當時沒注意這一點，也是一直報錯，請教了flutter boost 開源貢獻小組中的許多大佬才解決。

廢話少說，打開Flutter Module的pubspec.yaml文件，添加Flutter Boost依賴。

dependencies:
  flutter:
    sdk: flutter
  flutter_boost:
    git:
      url: 'https://github.com/alibaba/flutter_boost.git'
      ref: 'feature/flutter_1.9_androidx_upgrade'

添加完畢以后在命令行里運行flutter pub get。到現(xiàn)在Flutter Module 集成 Flutter Boost已經(jīng)完成，接下來的工作就是原生項目集成Flutter Module和Flutter Boost。

Android 原生項目集成Flutter Module和Flutter Boost

Android 原生項目集成Flutter Module和Flutter Boost就是以依賴module的方式把Flutter Module和Flutter Boost引進來。可以參考Android 原生項目集成Flutter。

首先在Android 原生項目的app的build.gradle文件中添加如下聲明

android {
    //...
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}

如果不加這個東西，會導致許多編譯錯誤。例如：

Transform artifact lifecycle-common-java8.jar (androidx.lifecycle:lifecycle-common-java8:2.0.0) with DexingTransform

然后在Android 原生項目根目錄的settings.gradle文件中添加如下聲明

include ':app'                                     // 這一行應該存在
setBinding(new Binding([gradle: this]))                                 
evaluate(new File(                                                      
  settingsDir.parentFile,                                               
  'flutter_module/.android/include_flutter.groovy'                        
))       

注意：如果你是從github上clone我的代碼，需要改成如下所示，切記切記。

include ':app'                                     // 這一行應該存在
setBinding(new Binding([gradle: this]))                                 
evaluate(new File(                                                      
  settingsDir.parentFile,                                               
  'FlutterBoostFlutterModule/.android/include_flutter.groovy'                        
))       

添加完畢以后，同步一下工程。同步完畢以后工程目錄如下所示。

project_structrue_after_change_settings.png

然后點擊Android studio 工具欄上的Project Structure按鈕為Android 原生項目app添加依賴。

tool_bar_project_structure.png

select_app_add_moduel.png

app_add_modules.png

點擊OK，同步工程以后，我們發(fā)現(xiàn)在app的build.gradle文件中加入了這兩行，說明我們集成Flutter Module和Flutter Boost成功。

success_integrate.png

使用Flutter Boost

現(xiàn)在我們已經(jīng)把項目依賴搞定了，接下來就是使用了。首先我們把官方給的demoflutter_1.9_androidx_upgrade克隆下來，因為我們需要用到其中代碼，就不自己寫了，直接從官方demo中拷貝過來。

從官方demo中拷貝Android 原生部分的代碼、資源文件等

官方demo.png

克隆下來以后使用AndroidStudio打開，目錄結(jié)構(gòu)如上所示。

首先我們拷貝Android 原生部分的代碼、資源文件到我們的Android 項目中。

copy_android_code.png

拷貝完畢后有幾點需要注意：

• 在AndroidManifest.xml文件中指定使用MyApplication。
• 將拷貝的Activity在AndroidManifest.xml文件中聲明。
• 需要將NewBoostFlutterActivity也在AndroidManifest.xml文件中聲明，這一點一定要注意。

Android 原生項目的AndroidManifest.xml文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dmw.useflutterboost">

    <application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
            android:name=".NativePageActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize" />

        <activity
            android:name=".FlutterFragmentPageActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/page_loading" />

        </activity>

        <!--聲明com.idlefish.flutterboost.containers.NewBoostFlutterActivity-->
        <activity
            android:name="com.idlefish.flutterboost.containers.NewBoostFlutterActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/page_loading" />

        </activity>

    </application>

</manifest>

從官方demo中拷貝flutter部分的代碼、資源文件等

copy_flutter_code.png

到此集成結(jié)束，我們運行一下運行Android 原生項目看看是什么樣子。

運行Android 原生項目

運行效果.gif

到此，我們的集成工作已經(jīng)完畢，我們可以在此基礎(chǔ)上修改文件，添加一些文件等等看看效果來研究Flutter Boost的原理等等。

主工程項目地址：FlutterBoostMyApplication
Flutter model地址： FlutterBoostFlutterModule

參考鏈接

• Flutter Boost
• Android 原生項目集成Flutter
• Flutter混合開發(fā)二-FlutterBoost使用介紹