Flutter、Android混合開發實踐

步驟一：新建Android工程

先在android目錄下新建Android project ,選擇新建Android Studio project -> 選擇Empty Activity，api版本選擇4.1（本次實踐的環境為4.1），finish。

步驟二：新建Flutter Module

Flutter Module新建有兩種方式，其一是通過AndroidStudio新建，其二是通過命令列新建。

• 方法一：命令列

開啟終端切換到之前新建的my_flutter目錄下，執行下面命令：

flutter create -t module my_flutter複製程式碼

my_flutter為module的名字，執行完命令等待即可。

• 方法二：使用Android Studio新建

開啟Android Studio選擇新建Flutter project -> 選擇新建Flutter Module，finish。

步驟三：修改工程配置檔案，將Flutter工程引入Android工程

找到android目錄下的build.gradle檔案，將預設庫地址修改為國內阿里雲的maven庫地址，防止不科學上網引起的更新龜速問題。

buildscript {  
  repositories {   
     maven { url 'https://maven.aliyun.com/repository/google' } 
     maven { url 'https://maven.aliyun.com/repository/jcenter' }  
     maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } 
  }  
  dependencies {  
      classpath 'com.android.tools.build:gradle:3.5.3'               
      // NOTE: Do not place your application dependencies here; they belong    
      // in the individual module build.gradle files 
   }
}
allprojects { 
   repositories {  
      maven { url 'https://maven.aliyun.com/repository/google' }  
      maven { url 'https://maven.aliyun.com/repository/jcenter' }  
      maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }  
      }
}複製程式碼

找到android/app目錄下的build.gradle檔案，宣告以下源相容性。

android { 
    cmpileOptions { 
     sourceCompatibility 1.8   
     targetCompatibility 1.8  
    }}  複製程式碼

在根目錄（即android）目錄下的setting.gradle檔案中加入如下程式碼：

include ':app'
rootProject.name='myAndroid'
// 加入下面配置
setBinding(new Binding([gradle: this]))
evaluate(new File( 
         settingsDir.parentFile,  
         'my_flutter/.android/include_flutter.groovy'
)) 複製程式碼

上面程式碼中的“my_flutter”為我新建的Flutter Module名稱，Sync一下專案。

Sync成功後，我們可以看到專案中多了一個my_flutterd的子專案

//Flutter向Native發訊息
private static final String CHANNEL_NATIVE = "com.example.flutter/native";
//Native向Flutter發訊息
private static final String CHANNEL_FLUTTER = "com.example.flutter/flutter";複製程式碼

使用定義好的名字，初始化MethodChannel。注意：MethodChannel初始化方法裡有兩個引數。第一個引數BinaryMessenger messenger，我們可以理解為MethodChannel和Flutter頁面的繫結項，通過FlutterEngine的getDartExecutor()方法我們可以得到構造MethodChannel的第一個引數。第二個引數需要傳入我們之前定義好的唯一命名。

Android接收Flutter發來的訊息

接收Flutter訊息得先初始化一個MethodChannel，且用之前定義好的名字CHANNEL_NATIVE。通過下面程式碼我們可以看到MethodChannel回撥引數有：MethodCall call、MethodChannel.Result result。call可以給我們提供本次Flutter所傳送的方法名(call.method)。result提供了一些方法可以在我們處理完邏輯後，告訴Flutter頁面我們的處理結果，例如result.success()、result.notImplemented()。

MethodChannel nativeChannel = new MethodChannel(flutterEngine.getDartExecutor(), CHANNEL_NATIVE);
        nativeChannel.setMethodCallHandler(new MethodChannel.MethodCallHandler() {
            @Override
            public void onMethodCall(MethodCall call, MethodChannel.Result result) {
                switch (call.method){
                    case "backFirstNative":
                        result.success("收到來自Flutter的訊息");
                        break;
                    default :
                        result.notImplemented();
                        break;
                }
            }
        });複製程式碼

Android給Flutter發訊息

給Flutter發訊息同樣得先初始化一個MethodChannel，且用之前定義好的名字CHANNEL_FLUTTER。使用MethodChannel的方法invokeMethod就可以將本次的訊息傳送到Flutter中去啦！

Map<String, Object> result = new HashMap<>();
result.put("message", @"我是Android的發出去的資訊，我要到Flutter中去");
MethodChannel flutterChannel = new MethodChannel(flutterEngine.getDartExecutor(), CHANNEL_FLUTTER);
// 呼叫Flutter端定義的方法onActivityResult
flutterChannel.invokeMethod("onActivityResult", result);複製程式碼

上面介紹了互動時Android端的程式碼，下面介紹Flutter端的程式碼。如下：

首先我們在原來的main.dart檔案中做一下擴充套件。定義一個Widget用來顯示Android傳過來的資料，並建立一個按鈕給Android發訊息。同Android端，在main.dart檔案中我們也定義了同名MethodChannel。注意：我們在Widget的initState()方法裡就應該寫上MethodChannel的監聽程式碼。我們可以在Flutter的MethodChannel的回撥方法中通過獲取call.method、call.method.arguments來知道，Android這次想要呼叫我們什麼方法、以及帶來了什麼引數。

class ContentWidget extends StatefulWidget{
  ContentWidget({Key key, this.route,this.message}) : super(key: key);
  String route,message;
  _ContentWidgetState createState() => new _ContentWidgetState();
}
class _ContentWidgetState extends State<ContentWidget>{
  static const nativeChannel = const MethodChannel('com.example.flutter/native');
  static const flutterChannel = const MethodChannel('com.example.flutter/flutter');
  void onDataChange(val) {
    setState(() {
      widget.message = val;
    });
  }
  @override
  void initState(){
    super.initState();
    Future<dynamic> handler(MethodCall call) async{
      switch (call.method){
        case 'onActivityResult':
          onDataChange(call.arguments['message']);
          print('1234'+call.arguments['message']);
          break;
      }
    }
    flutterChannel.setMethodCallHandler(handler);
  }
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Stack(
        children: <Widget>[
          Positioned(
            top: 100,
            left: 0,
            right: 0,
            height: 100,
            child: Text(widget.message,textAlign: TextAlign.center,),
          ),
          Positioned(
            top: 300,
            left: 100,
            right: 100,
            height: 100,
            child: RaisedButton(
                child: Text('開啟上一個原生頁面'),
                onPressed: (){
                  returnLastNativePage(nativeChannel);
                }
            ),
          ),
          Positioned(
            top: 430,
            left: 100,
            right: 100,
            height: 100,
            child: RaisedButton(
                child: Text('開啟下一個原生頁面'),
                onPressed: (){
                  openNextNativePage(nativeChannel);
                }
            ),
          )
        ],
      ),
    );
  }}複製程式碼

上面的程式碼缺少了方法：returnLastNativePage、openNextNativePage。如下：

大家肯定還記得我們之前在Android頁面接收Flutter的回撥後，還能呼叫result.success()來告訴Flutter頁面我們的處理結果。沒錯，我們在下面兩個方法中，非同步獲取這些回撥的資訊並列印。

Future<Null> returnLastNativePage(MethodChannel channel) async{
  Map<String, dynamic> para = {'message':'嗨，本文案來自Flutter頁面，回到第一個原生頁面將看到我'};
  final String result = await channel.invokeMethod('backFirstNative',para);
  print('這是在flutter中列印的'+ result);
}複製程式碼

Future<Null> openNextNativePage(MethodChannel channel) async{
  Map<String, dynamic> para = {'message':'嗨，本文案來自Flutter頁面，開啟第二個原生頁面將看到我'};
  final String result = await channel.invokeMethod('openSecondNative',para);
  print('這是在flutter中列印的'+ result);
}複製程式碼

至此，Android、Flutter可以互通有無了。如果你在編譯的時候發現main.dart中MethodChannel報錯，那麼你一定是沒有正確的引入標頭檔案比如：import 'package:flutter/services.dart'。之前介紹的那些跳轉場景到最後都變成了Android之間的跳轉，以及殼子頁面對Flutter的更新。下面科普一下Android Activity之間跳轉的傳值。有Android基礎的朋友可以直接下跳到最後檢視：解決手機系統虛擬返回按鈕破壞正常頁面的棧順序。

下面簡單介紹Android頁面之間的跳轉。注意：請使用startActivityForResult方法開啟Activity，這樣Activity關閉時onActivityResult方法才能接收到回撥。程式碼如下：

FirstFlutterActivity程式碼：

開啟下一個Activity。

// 跳轉原生頁面                        
Intent jumpToNativeIntent = new Intent(FirstFlutterActivity.this, SecondNativeActivity.class);
jumpToNativeIntent.putExtra("message", (String) call.argument("message"));
startActivityForResult(jumpToNativeIntent, Activity.RESULT_FIRST_USER);
result.success("成功開啟第二個原生頁面");複製程式碼

@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    switch (requestCode) {
        case 1:
            if (data != null) {
                // NativePageActivity返回的資料
                String message = data.getStringExtra("message");
                Map<String, Object> result = new HashMap<>();
                result.put("message", message);
                // 建立MethodChannel，這裡的flutterView即Flutter.createView所返回的View
                MethodChannel flutterChannel = new MethodChannel(flutterEngine.getDartExecutor(), CHANNEL_FLUTTER);
                // 呼叫Flutter端定義的方法
                flutterChannel.invokeMethod("onActivityResult", result);
            }
            break;
        default:
            break;
    }}
複製程式碼

SecondNativeActivity程式碼：

xml裡拖了一個id為textView2的textView用來顯示資訊，一個id為button001的button用來返回上個頁面。

public class SecondNativeActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second_native);
        Intent intent = getIntent();
        String content = intent.getStringExtra("message");
        TextView textView = findViewById(R.id.textView2);
        textView.setText(content);
        Button btnOpen = findViewById(R.id.button001);
        btnOpen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent();
                intent.putExtra("message","嗨，本文案來自第二個原生頁面，將在Flutter頁面看到我");
                setResult(RESULT_OK,intent);
                finish();
            }
        });
    }}複製程式碼

解決手機系統虛擬返回按鍵破壞正常頁面的棧順序問題

場景：原生頁面A -> 開啟原生殼子頁面（顯示內容：Flutter頁面B） -> 開啟原生殼子頁面（顯示內容：Flutter頁面C）-> 點選虛擬返回按鈕

現象：原生殼子頁面（顯示內容：Flutter頁面C）直接回到了原生頁面A。

上面的現象和一個不經處理的WebView頁面棧管理如出一轍，那不是我們像要的。我們想達到點選虛擬返回按鍵後，原生殼子頁面（顯示內容：Flutter頁面C）回到 原生殼子頁面（顯示內容：Flutter頁面B）。

思路：如果將點選虛擬返回按鈕的後續操作交給Flutter來處理，那麼就完美。

我們知道點選虛擬返回按鈕的後將會呼叫方法onBackPressed(),此時我們在該方法中給Flutter發訊息（即呼叫"backAction"方法）。

@Override
public void onBackPressed() {
    MethodChannel flutterChannel = new MethodChannel(flutterEngine.getDartExecutor(), CHANNEL_FLUTTER);
    flutterChannel.invokeMethod("backAction", null);
}複製程式碼

Flutter中的處理：

和之前互動的處理類似，我們增加了一個case 'backAction'，這裡要用到Flutter裡的一個方法canPop()。我們知道如果是棧底了還呼叫pop()方法會使程式crash，canPop()就很好的解決了這個問題。當在棧底呼叫canPop()時，會返回給我們一個布林值告訴我們是否可以繼續回退。當我們發現canPop()的結果是false時，說明當前Flutter頁面已經是最後一個頁面，此時我們應該通知Android殼子頁面退回到上一個原生頁面。程式碼如下：

void initState(){
  super.initState();
  Future<dynamic> handler(MethodCall call) async{
    switch (call.method){
      case 'onActivityResult':
        onDataChange(call.arguments['message']);
        print('1234'+call.arguments['message']);
        break;
      case 'backAction':
        if (Navigator.canPop(context)) {
          Navigator.of(context).pop();
        } else {
          nativeChannel.invokeMethod('backAction');
        }
        break;
    }
  }
  flutterChannel.setMethodCallHandler(handler);
}複製程式碼

Android殼子頁面接收到訊息，返回上一個原生頁面

MethodChannel nativeChannel = new MethodChannel(flutterEngine.getDartExecutor(), CHANNEL_NATIVE);
        nativeChannel.setMethodCallHandler(new MethodChannel.MethodCallHandler() {
            @Override
            public void onMethodCall(MethodCall call, MethodChannel.Result result) {
                switch (call.method){
                    case "backFirstNative":
                        result.success("收到來自Flutter的訊息");
                        break;
                    case "backAction":
                        finish();
                        result.success("成功通過虛擬按鍵返回第一個原生頁面");
                        break;
                    default :
                        result.notImplemented();
                        break;
                }
            }
        });複製程式碼

三、打包Flutter工程，以aar的形式供Android呼叫

在Flutter1.12版本中，打包Flutter已經變得十分簡單，在完成Flutter程式碼編寫後，執行命令列：

flutter build aar複製程式碼

或者點選Build -> Flutter -> Build AAR即可

當你使用命令列打包時，打包完成後控制檯會提示你如何使用aar

如上圖所以，就是讓你在想要引用aar的Android工程下，找到android/app/build.gradle檔案。並把上圖中的2、3、4點提到的程式碼加入其中。新增完程式碼後Sync一下，執行工程檢視正確結果。

上面的嘗試都是基於Flutter1.12版本實現，若您的Flutter版本 < 1.12，請先更新Flutter版本。