Android 原生工程集成Flutter混合開發

---

第一步 創建Flutter工程

在Android工程根目錄的上一級目錄創建Flutter工程，保證Flutter工程與Android工程在同一級。

• cd Android工程根目錄的上一級
• 創建Flutter工程：flutter create -t module flutter工程名

C:\Android\FlutterInAndroid\AndroidDemo>cd ..
C:\Android\FlutterInAndroid>flutter create -t module flutter_demo

第二步 編譯Flutter工程

cd到Flutter工程目錄下的.android目錄，執行gradlew腳本

• 注意：點後面是反斜槓

C:\Android\FlutterInAndroid>cd flutter_demo
C:\Android\FlutterInAndroid\flutter_demo>cd .android
C:\Android\FlutterInAndroid\flutter_demo\.android>.\gradlew flutter:assembleDebug

第三步 在Android工程中加入Flutter Module的依賴

首先，修改Android項目根目錄下的setting.gradle：

include ':app'
//加入下面配置
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_demo/.android/include_flutter.groovy'
))

然後，修改app下的build.gradle：

android {
    ...
    defaultConfig {
        ...
        minSdkVersion 16//至少16
        ...
    }
    ...
    //添加下面配置
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}
...
dependencies {
    ...
    //加入下面配置
    implementation project(':flutter')
}

第四步 在Android工程中創建Flutter的View

/**
*   創建view
*/
View flutterView = Flutter.createView(MainActivity.this, getLifecycle(), "r1");

/**
*   創建Fragment
*/
Fragment flutterFragment = Flutter.createFragment("r2");

第五步 在Flutter工程中創建Widget

可以通過window的defaultRouteName獲取路由名稱，依此進行判斷並創建不同的Widget給Android工程調用。

void main() => runApp(selectWidget(window.defaultRouteName));

Widget selectWidget(String routeName) {
  switch (routeName) {
    case 'r1':
      return MyFlutterView();
    case 'r2':
      return MyFlutterFragment();
    default:
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Center(
            child: Text(
              'Unknow Route!',
              style: TextStyle(color: Color(0xffff0000)),
            ),
          ),
        ),
      );
  }
}

第六步 讓Flutter模塊支持熱加載

首先在Flutter Module工程目錄下執行flutter attach，開始監聽flutter。

C:\Damon\flutter\FlutterInAndroid\flutter_demo>flutter attach
Waiting for a connection from Flutter on SCL AL00...

然後，在Android工程中運行程序，運行成功後可以在終端輸入小寫r熱加載，大寫R熱重啓。

C:\Damon\flutter\FlutterInAndroid\flutter_demo>flutter attach
Waiting for a connection from Flutter on SCL AL00...
Done.
Syncing files to device SCL AL00... 

Demo下載

Demo下載地址：點擊下載