將Flutter以Module形式嵌入已有項目

官方文檔-> 點擊

本文只針對Android客戶端集成操做，如下是親自試手，按照官方文檔有些小改動。

已有項目相關環境：

1. minSdkVersion 16
2. gradle 插件v3.1.1
3. gradle 版本 v4.10.1
4. flutter SDK版本 v1.5.4-hotfix.2

集成步驟（Mac os）

1. 打開terminal,進入到你項目的根目錄

cd some/yourproject
複製代碼

2. 而後輸入如下命令建立flutter module

//my_flutter爲你的module名字
flutter create -t module my_flutter
複製代碼

3. 切換到flutter module的android目錄下，並讓flutter進行debug

cd .android/

./gradlew flutter:assembleDebug
複製代碼

這樣就生成了flutter-debug.aar(路徑：'.android/Flutter/build/outputs/aar/.')。 4. 確認你的宿主App的build.gradle配置有：

compileOptions {
     sourceCompatibility 1.8
     targetCompatibility 1.8
 }
複製代碼

5. 讓宿主App以來flutter module，打開根項目settings.gradle

include ':app'

setBinding(new Binding([gradle:this]))
//YourProjecyName 爲你項目的文件名，按照官方文檔的寫法，會找不到對應的路徑，少了一個層級
evaluate(new File(
        settingsDir.parentFile,
        'YourProjecyName/my_flutter/.android/include_flutter.groovy'
))
複製代碼

6. 項目同步成功後須要在app的build.gradle文件中添加flutter的依賴。

//官網的方式
dependencies{
    implementation project(':flutter')
}
//上面的方式各類報錯，沒法找到對應的module

//換了種方式

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

複製代碼

終於整個項目跑通了，去app內的文件內，也能引入flutter相關的Api。大功告成。

Flutter加入到項目中

有兩種方式能夠將flutter的視圖添加到原生項目中：

如下是flutter入口函數main.dart

import 'package:flutter/material.dart';
import 'dart:ui';
import 'package:bear_flutter/ui/WolfPage.dart';

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

Widget _widgetForRoute(String route){
  switch(route){
    case 'route1':
      return WolfPage();
    default:
      return Center(
        child: Text("haha"),
      );
  }
}

複製代碼

1. 添加Flutter fragment

在原生Activity添加FlutterFragment

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_wolf_flutter)
        //route1 爲flutter項目中的葉脈你路由名字
        supportFragmentManager.beginTransaction().replace(R.id.container, Flutter.createFragment("route1"))
                .commit()
    }
複製代碼

2. 添加flutterView

//route1 爲flutter項目中的葉脈你路由名字
View flutterView = Flutter.createView(
      MainActivity.this,
      getLifecycle(),
      "route1"
    );
    FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
    layout.leftMargin = 100;
    layout.topMargin = 200;
    addContentView(flutterView, layout);
複製代碼