官方文檔-> 點(diǎn)擊

本文只針對(duì)Android客戶端集成操作，以下是親自試手，按照官方文檔有些小改動(dòng)。

已有項(xiàng)目相關(guān)環(huán)境：

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,進(jìn)入到你項(xiàng)目的根目錄

cd some/yourproject

2. 然后輸入以下命令創(chuàng)建flutter module

//my_flutter為你的module名字
flutter create -t module my_flutter

3. 切換到flutter module的android目錄下，并讓flutter進(jìn)行debug

cd .android/

./gradlew flutter:assembleDebug

這樣就生成了flutter-debug.aar(路徑：'.android/Flutter/build/outputs/aar/.')。

4. 確認(rèn)你的宿主App的build.gradle配置有：

 compileOptions {
     sourceCompatibility 1.8
     targetCompatibility 1.8
 }

5. 讓宿主App以來flutter module，打開根項(xiàng)目settings.gradle

include ':app'

setBinding(new Binding([gradle:this]))
//YourProjecyName 為你項(xiàng)目的文件名，按照官方文檔的寫法，會(huì)找不到對(duì)應(yīng)的路徑，少了一個(gè)層級(jí)
evaluate(new File(
        settingsDir.parentFile,
        'YourProjecyName/my_flutter/.android/include_flutter.groovy'
))

6. 項(xiàng)目同步成功后需要在app的build.gradle文件中添加flutter的依賴。

//官網(wǎng)的方式
dependencies{
    implementation project(':flutter')
}
//上面的方式各種報(bào)錯(cuò)，無法找到對(duì)應(yīng)的module

//換了種方式

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

終于整個(gè)項(xiàng)目跑通了，去app內(nèi)的文件內(nèi)，也能引入flutter相關(guān)的Api。大功告成。

Flutter加入到項(xiàng)目中

有兩種方式可以將flutter的視圖添加到原生項(xiàng)目中：

以下是flutter入口函數(shù)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項(xiàng)目中的葉脈你路由名字
        supportFragmentManager.beginTransaction().replace(R.id.container, Flutter.createFragment("route1"))
                .commit()
    }

2. 添加flutterView

 //route1 為flutter項(xiàng)目中的葉脈你路由名字
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);