前言

Flutter 作爲Google出品的一個新興的跨平臺移動客戶端UI開發框架，正在被越來越多的開發者和組織使用，包括阿里的鹹魚、騰訊的微信等。
在日常開發中，Android Native端與Flutter端通信交互的應用場景十分常用
今天，我將全面講解Android Native端與Flutter端通信的交互的方式，旨在讓你熟練掌握Android Native端與Flutter端的通信交互，包括：原理、架構、通信方式等，希望你們會喜歡。

1. 通信原理

1.1 通信架構

Android 與 Flutter之間的通信消息傳遞媒介：平臺通道（PlantformChannel）

平臺通道（PlantformChannel）主要包括三種：（下面會詳細介紹）

基本信息通道（BasicMessageChannel）
方法通道（MethodChannel）
數據流通道（EventChannel）

1.2 整體設計

1.3 詳細說明

數據載體：ByteBuffer
傳遞媒介：BinaryMessenger。在Android側，BinaryMessenger是一個接口，在FlutterView中實現了該接口，通過JNI來與系統底層通信。在Flutter側，BinaryMessenger是一個類，該類的作用 = 與類window通信，而類window才真正與系統底層溝通
消息傳遞方式：異步
線程切換：在系統底層實現，系統底層屏蔽了線程切換、數據拷貝等大量複雜操作，使得Android側與flutter側能方便通信

更加詳細的底層原理可參考：鹹魚團隊的技術文章

2. 通信交互方式

2.1 簡介

Flutter定義了三種類型的通信交互傳遞方式，對應三種平臺通道（PlantformChannel）：

基本信息通道（BasicMessageChannel）
方法通道（MethodChannel）
數據流通道（EventChannel）

2.2 設計原理

三種通道各有用途，但設計上相近，均有三個重要成員變量：

附錄：Flutter定義了兩種Codec：MessageCodec、MethodCodec，介紹如下：

2.3 應用場景

針對Flutter給出的三種通道方式，我們對於Android 與 Flutter相互通信的應用場景主要包括：

基本信息通道（BasicMessageChannel）：用於傳遞字符串&半結構化的信息
方法通道（MethodChannel）：用於傳遞方法調用（method invocation）
數據流通道（EventChannel）：用於數據流（event streams）的通信

下面，我將詳細講解。

3. 準備工作

在講解上述三種通道前，我們需要將Flutter集成到當前的Android目錄中

步驟1：創建 flutter module 模塊

// 步驟1： cd到Android 工程目錄

// 步驟2：命令行執行
flutter create -t module 模塊名稱
// 示例：flutter create -t module flutter_plugin

打開項目工程目錄會發現，Flutter作爲Module集成到Android工程中

步驟2：添加flutter module模塊到當前項目

// 步驟1：在項目根目錄的settings.gradle中添加：
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        "AndroidxFlutter/flutter_plugin/.android/include_flutter.groovy"
))
// 注：”工程名/flutter模塊名/.android/include_flutter.groovy“

// 步驟2：在app/build.gradle文件中的dependencies添加 flutter依賴
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
 
    ......
 
    implementation project(':flutter')
}

// 步驟3：在app/build.gradle文件中的android添加如下代碼
android{
....
compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

{

至此，Flutter已經集成到當前Android工程項目中

4. 詳解講解（含Demo）

下面，我將手把手帶你們詳細分析上述三個通道，並結合示例Demo

通道1：基本信息通道（BasicMessageChannel）

作用：傳遞字符串 & 半結構化的信息

步驟1：自定義BasicMessageChannel工具類

（Native端）BasicMessageChannelPlugin.java

創建BasicMessageChannel對象（需傳入FlutterView、channel name和codec）
註冊Channel對象處理的Handler
定義要發送到Flutter的消息的函數
接受到Flutter消息時進行迴應接受的函數

// 此處以發送的數據類型是String爲例
public class BasicMessageChannelPlugin implements BasicMessageChannel.MessageHandler<String> {

    private Activity activity;
    private BasicMessageChannel<String> messageChannel;

    // 步驟1：創建BasicMessageChannelPlugin實例
    static BasicMessageChannelPlugin registerWith(FlutterView flutterView) {
        return new BasicMessageChannelPlugin(flutterView); 
    }

    private BasicMessageChannelPlugin(FlutterView flutterView) {
        this.activity = (Activity) flutterView.getContext();
        // 創建BasicMessageChannel對象（需傳入FlutterView、channel name和codec）
        this.messageChannel = new BasicMessageChannel<String>(flutterView, "BasicMessageChannelPlugin", StringCodec.INSTANCE);
        // 註冊處理的Handler
        messageChannel.setMessageHandler(this);
    }

    // 步驟2：向Flutter發送消息
    // 傳入參數：需發送的消息 & 回調處理
    void send(String str, BasicMessageChannel.Reply<String> reply) {
        messageChannel.send(str, reply);
    }

    // 步驟3：複寫回調函數：接受到Flutter消息時進行迴應
    @Override
    public void onMessage(String s, BasicMessageChannel.Reply<String> reply) {
        // s即爲Flutter發送過來的消息
        System.out.println("Native：收到了"+s);
        // 接受到Flutter信息後，採用reply實例將返回值返回到Flutter層
        reply.reply("Native確認了" + s);
    }
}

步驟2：定義Flutter要發送到Native端的消息 & 接受消息的函數方法，及其對應消息內容

（Flutter端）main.dart

/**
 *  導入庫
 **/
import 'package:flutter/material.dart'; // Material UI組件庫
import 'dart:ui';

import 'package:flutter/services.dart'; // 引入後可以使用window對象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native傳來的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

/// 該方法用於判斷原生界面傳遞過來的路由值，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 當route值爲flutterView時顯示
      return FlutterContactPage();

    default:  // 默認的路由值爲 '/'，所以在default情況也需返回頁面，否則dart會報錯
      return Container(
        child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.red,
      );
  }
}

class FlutterContactPage extends StatelessWidget {
  // 註冊對應的channel，即自定義的BasicMessageChannel
  // 注：要保證channel name、codec與原生層一致
  BasicMessageChannel<String> _messageChannel =
  BasicMessageChannel("BasicMessageChannelPlugin", StringCodec());

  @override
  Widget build(BuildContext context) {

    // 向Native發送消息
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Page'),
      ),
      body: RaisedButton(// 爲了展示使用按鈕，通過channel傳輸消息出去，同時將原生層返回的消息打印出來
        onPressed: () {
          _messageChannel
              .send('Flutter發起第二次握手') // 發送的消息
              .then((str) { // Native針對該消息返回的消息
            print('Flutter:收到了 $str');
          });
        },
        child: Text('Send Message to Native'),
      ),
    );

    // 接受Native發送過來的消息
    _messageChannel.setMessageHandler((message) => Future<String>(() {
      print("Flutter：接受到了：" + message); // message即爲Native發送過來的消息
      return "Flutter確認的"+ message; // Flutter針對Native發送的消息進行返回
    }));
  }
}

步驟3：（Native端）連接Native和Flutter的中間層

MainActivity.java

創建FlutterView組件
創建 & 註冊MethodChannel
發送到Flutter的消息 & 接受消息的消息內容
發起要調用Flutter端的請求

public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;
    private BasicMessageChannelPlugin mBasicMessageChannelPlugin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 通過Flutter.createView()創建FlutterView組件方式
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");

        // 將Flutter視圖添加到原生布局中的Fragment中(爲了方便顯示，此處採用按鈕觸發形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                addContentView(flutterView, layoutParams); // 將flutter添加到佈局中
                mBasicMessageChannelPlugin = BasicMessageChannelPlugin.registerWith(flutterView); // 關聯通道
                // 向Flutter發送消息
                mBasicMessageChannelPlugin.send("Native發起第一次握手",new BasicMessageChannel.Reply<String>(){
                    @Override
                    public void reply(String s){
                        System.out.println("Native：收到了" + s);
                    }
                });
            }
        });
    }
}

示意圖

通道2：方法通道（MethodChannel）

作用：傳遞方法調用（method invocation），即Native與Flutter相互調用對方的方法（具備返回值）

步驟1：自定義MethodChannel工具類（Native端）

MethodChannelPlugin.java：

創建MethodChannel實例（傳入channel name）
註冊需處理的對應Handler
定義要通知Flutter端調用的方法
接受Flutter端要調用的方法

public class MethodChannelPlugin implements MethodChannel.MethodCallHandler {

    private Activity activity;
    private MethodChannel channel;

    // 1. 創建MethodChannel實例（傳入channel name）
    public static MethodChannelPlugin registerWith(FlutterView flutterView) {
        MethodChannel channel = new MethodChannel(flutterView, "MethodChannelPlugin");
        MethodChannelPlugin methodChannelPlugin = new MethodChannelPlugin((Activity) flutterView.getContext(), channel);
        channel.setMethodCallHandler(methodChannelPlugin);// 2. 註冊處理的Handler
        return methodChannelPlugin;
    }

    private MethodChannelPlugin(Activity activity, MethodChannel channel) {
        this.activity = activity;
        this.channel = channel;

    }
    // 2. 用於調用Flutter端方法，無返回值
    // method爲需調用的方法名
    public void invokeMethod(String method, Object o) {
        channel.invokeMethod(method, o);
    }

    // 3. 用於調用Flutter端方法，有返回值
    // method爲需調用的方法名、返回值在result內
    public void invokeMethod(String method, Object o, MethodChannel.Result result) {
        channel.invokeMethod(method, o, result);
    }

    // 4. 複寫onMethodCall（）：根據Flutter的要求，調用Native方法
    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        switch (methodCall.method) {
            case "FlutterInvokeFlutter":// Flutter要求Native調用的方法是FlutterInvokeFlutter

                System.out.println("Native收到了Flutter的請求方式是："+methodCall.method);
                System.out.println("Native收到了Flutter的請求參數是："+methodCall.arguments);
                result.success("Native收到了Flutter的請求方法：" + methodCall.method);// 給flutter端的返回值
                break;
            default:
                result.notImplemented(); // 若無找到對應的方法名，則通過該方法返回異常
                break;
        }
    }
}

步驟2：（Flutter端）定義要通知Native調用的方法 & 接受Native端要調用的方法

main.dart

/**
 *  導入庫
 **/
import 'package:flutter/material.dart'; // Material UI組件庫
import 'dart:ui';

import 'package:flutter/services.dart'; // 引入後可以使用window對象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),
      // Native傳來的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 該方法用於判斷原生界面傳遞過來的路由值，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 當route值爲flutterView時顯示
      return FlutterContactPage();

    default: // 默認的路由值爲 '/'，所以在default情況也需返回頁面，否則dart會報錯
      return Container(
        child: Center(
            child: Text(
          '路由值 = deafult',
          style: TextStyle(fontSize: 20.0, color: Colors.black),
        )),
        color: Colors.red,
      );
  }
}

class FlutterContactPage extends StatelessWidget {
  // 註冊對應的MethodChannel
  // 注：要保證channel name、codec與原生層一致
  MethodChannel _methodChannel = MethodChannel("MethodChannelPlugin");

  @override
  Widget build(BuildContext context) {
    // 1. 根據Native端的要求，調用對應方法
    _methodChannel.setMethodCallHandler((handler) => Future<String>(() {
          print("Native端要調用的方法和參數是：${handler}");
          // 監聽native發送的方法名及參數
          switch (handler.method) {
            case "AndroidInvokeFlutter": // Native要求Flutter調用的方法是send（）
              _send(handler.method, handler.arguments); //handler.arguments表示native傳遞的方法參數
              break;
          }
          return "Flutter確認消息";
        }));

    // 2. 通知Native端要調用哪個方法
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Page'),
      ),
      body: RaisedButton(
        // 爲了展示所以使用按鈕，通過channel告訴Native要調用哪個方法
        onPressed: () {
          _methodChannel
              .invokeMethod("FlutterInvokeFlutter", "carsonho") // 參數1=告訴Native要調用的方法名，參數2 = 傳遞的參數
              .then((result) { // invokeMethod().then() 來處理正常結束的邏輯（獲得返回值）
            print('$result'); 
                 // 成功：通過result.success 返回值
                // 異常：通過 result.error 返回異常信息，可通過catchError 處理異常
          });
        },
        child: Text('Send Message to Native'),
      ),
    );
  }

  // 需發送的方法
  void _send(method, arg) {
    print('Flutter根據Native端的要求調用了方法$method');
    print('該方法的參數是：$arg');
  }
}

步驟3：（Native端）連接Native和Flutter的中間層

MainActivity.java

創建FlutterView組件
創建 & 註冊MethodChannel
Native端定義要求Flutter端調用的方法
發起要調用Flutter端的請求

public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;
    private MethodChannelPlugin mMethodChannelPlugin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. 通過Flutter.createView()創建FlutterView組件方式
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");

        // 將Flutter視圖添加到原生布局中的Fragment中(爲了方便顯示，此處採用按鈕觸發形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                addContentView(flutterView, layoutParams); // 將flutter添加到佈局中
                mMethodChannelPlugin = MethodChannelPlugin.registerWith(flutterView); // 關聯通道
                // Native告訴Flutter要調用的方法是send（）
                mMethodChannelPlugin.invokeMethod("AndroidInvokeFlutter","carsonho");
            }
        });
    }
}

示意圖

通道3：數據流通道（EventChannel）

作用：用於數據流（event streams）的通信，即：

原生層：通過 sink 不斷添加數據 & 發送多個信息到 Flutter 層
Flutter層：接收到數據的變化就會作出新相應的處理，表現爲一個stream

步驟1：自定義EventChannel工具類（Native端）

EventChannelPlugin.java：

創建EventChannel實例（傳入channel name）
定義Native發送數據、停止發送 & 發送失敗函數
複寫Flutter端開始監聽時的回調函數onListen（）
複寫Flutter端不再接受監聽時的回調函數onCancel（）

public class EventChannelPlugin implements EventChannel.StreamHandler {

    private EventChannel.EventSink eventSink;
    private Activity activity;

    // 1. 創建 & 註冊EventChannel
    static EventChannelPlugin registerWith(FlutterView flutterView) {
        EventChannel channel = new EventChannel(flutterView, "EventChannelPlugin");
        EventChannelPlugin plugin = new EventChannelPlugin(flutterView);
        channel.setStreamHandler(plugin);//設置對應Handler
        return plugin;
    }

    private EventChannelPlugin(FlutterView flutterView) {
        this.activity = (Activity) flutterView.getContext();
    }

    // Native端開始發送數據
    void send(Object params) {
        if (eventSink != null) {
            eventSink.success(params);
            System.out.println("sink success");
        }
    }
    // Native端停止發送數據
    void cancel() {
        if (eventSink != null) {
            eventSink.endOfStream();
        }
    }

    // Native端發送數據失敗
    void sendError(String str1, String str2, Object params) {
        if (eventSink != null) {
            eventSink.error(str1, str2, params);
        }
    }

    // 回調時機：Flutter端開始監聽該channel時
    // 說明通道已經建立好，Native可以開始發送數據了
    // 參數1 = Flutter端初始化EventChannel時返回的值，僅此一次
    // 參數2 = 傳數據的載體
    @Override
    public void onListen(Object o, EventChannel.EventSink eventSink) {
        this.eventSink = eventSink; //此處注意時序，必須得該方法回調後，Native端才允許發送數據
        System.out.println( "onListen()：eventSink = " + eventSink);
    }

    // Flutter端不再接收數據時回調
    @Override
    public void onCancel(Object o) {
        System.out.println("onCancel()");
        this.eventSink = null;
    }
}

步驟2：Flutter要展示的佈局（Flutter）

main.dart：

設置展示的佈局
監聽Native什麼時候發送數據
設置正常接受數據、錯誤接受數據等方法回調

/**
 *  導入庫
 **/
import 'package:flutter/material.dart'; // Material UI組件庫
import 'dart:ui';
import 'dart:async';
import 'package:flutter/services.dart'; // 引入後可以使用window對象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),
      // Native傳來的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 該方法用於判斷原生界面傳遞過來的路由值，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 當route值爲flutterView時顯示
      return FlutterContactPage();

    default: // 默認的路由值爲 '/'，所以在default情況也需返回頁面，否則dart會報錯
      return Container(
        child: Center(
            child: Text(
          '路由值 = deafult',
          style: TextStyle(fontSize: 20.0, color: Colors.black),
        )),
        color: Colors.red,
      );
  }
}

class FlutterContactPage extends StatefulWidget {
  @override
  _FlutterContactPageState createState() => _FlutterContactPageState();
}

class _FlutterContactPageState extends State<FlutterContactPage> {
  // 註冊對應的MethodChannel
  // 注：要保證channel name、codec與原生層一致
  EventChannel _eventChannelPlugin = EventChannel("EventChannelPlugin");
  StreamSubscription _streamSubscription;

  // 在initState狀態下設置監聽Native端發送
  @override
  void initState() {
    _streamSubscription = _eventChannelPlugin
        .receiveBroadcastStream() // 對應Native端onListen（）的第一個參數，可不傳
        .listen(_onToDart, onError: _onToDartError, onDone: _onDone);
    // 開啓監聽，並分別傳入：
    // _onToDart方法：正常接收到Native數據時調用
    // _onToDartError方法：接收Native數據異常時調用
    // _onDone方法：發送數據完成時調用
    super.initState();
  }

  // Native端發送正常數據回調方法，每一次發送都會調用
  void _onToDart(message) {
    print('正常接收：$message');
  }
  // Native出錯時回調方法
  void _onToDartError(error) {
    print('錯誤接收：$error');
  }
  // 當native發送數據完成時調用的方法
  void _onDone() {
    print("消息傳遞完畢");
  }

  @override
  Widget build(BuildContext context) {
    // 2. 通知Native端要調用哪個方法
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Page'),
      ),
      body: RaisedButton(
        child: Text('begin counting'),
      ),
    );
  }
}

步驟3：連接Native和Flutter的中間層

MainActivity.java：

創建FlutterView組件
創建 & 註冊EventChannel
Native端定義要求Flutter端調用的方法
發起要調用Flutter端的請求

public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;
    private EventChannelPlugin mEventChannelPlugin;
    private int count;
    private Timer mTimer;
    private TimerTask mTimertask;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. 通過Flutter.createView()創建FlutterView組件方式
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");
        // 2. 關聯通道
        mEventChannelPlugin = EventChannelPlugin.registerWith(flutterView);

        // 3. 將Flutter視圖添加到原生布局中的Fragment中(爲了方便顯示，此處採用按鈕觸發形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                addContentView(flutterView, layoutParams); // 將flutter添加到佈局中

                // 4. 爲了方便展示，採用計時器Timer發送一系列數據到Flutter
                count = 0;
                mTimer = new Timer(true);
                mTimertask = new TimerTask() {
                    public void run() {

                        // 回到主線程後Native發送數據
                        Handler mainHandler1 = new Handler(Looper.getMainLooper());
                        mainHandler1.post(new Runnable() {
                            @Override
                            public void run() {
                                mEventChannelPlugin.send(count++);
                            }
                        });

                        // 數到5時停止
                        while (count == 5) {

                            // 回到主線程後Native停止發送數據
                            Handler mainHandler2 = new Handler(Looper.getMainLooper());
                            mainHandler2.post(new Runnable() {
                                @Override
                                public void run() {
                                    mEventChannelPlugin.cancel();
                                }
                            });
                            // 關閉計時器
                            mTimer.cancel();
                            mTimer = null;
                            mTimertask.cancel();
                            mTimertask = null;
                        }
                    }
                };
                // 開啓計時器（發送數據）
                mTimer.schedule(mTimertask, 1, 1000);
            }
        });
    }
}

示意圖

至此，關於Android通過三種通道與Flutter通信講解完畢。
下面，我再用講解一個較爲基礎的場景：在Android中顯示Flutter界面

5. 基礎場景：在Android中顯示Flutter界面

此處分兩種方式：

Flutter界面顯示在Activity ：Flutter.createView（）
Flutter界面顯示在Fragment：使用Flutter.createFragment（）

方式1：顯示在Activity

使用Flutter.createView（），步驟如下：

步驟1：Android端設置好跳轉 & 顯示邏輯

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 1. 通過Flutter.createView()創建FlutterView組件方式
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");
        // 參數說明：
        // 參數1：Activity activity，Activity實例
        // 參數2：final Lifecycle lifecycle:，定義具有Android生命週期的對象
        // 參數3：final String initialRoute:，初始化的視圖路由名稱，後續會根據該路由進行顯示Flutter視圖

        // 2. 將Flutter視圖添加到原生布局中(爲了方便顯示，此處採用按鈕觸發形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                addContentView(flutterView, layoutParams); // 將flutter添加到佈局中
            }
        });
    }
}

步驟2：在Flutter端中設置好要顯示的佈局

flutter_plugin / lib / main.dart

/**
 *  導入庫
 **/
import 'package:flutter/material.dart'; // Material UI組件庫
import 'dart:ui'; // 引入後可以使用window對象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native傳來的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 該方法用於判斷原生界面傳遞過來的路由值，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 當route值爲flutterView時顯示
      return Container(
        child: Center(child: Text('路由值 = flutterView',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.green,
      );

    default:  // 默認的路由值爲 '/'，所以在default情況也需返回頁面，否則dart會報錯
      return Container(
        child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.red,
      );
  }
}

效果圖

方式2：顯示在Fragment

使用Flutter.createFragment（），步驟如下

步驟1：Android端設置好跳轉 & 顯示邏輯

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 將Flutter視圖添加到原生布局中的Fragment中(爲了方便顯示，此處採用按鈕觸發形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                getSupportFragmentManager().beginTransaction()
                        .add(R.id.fragment_container, Flutter.createFragment("flutterView"))
                        .commit();
                
                btn.setVisibility(View.GONE);
            }
        });
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn"
        android:text="start"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 用於加載 fragment -->
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

步驟2：在Flutter端設置好佈局顯示

flutter_plugin / lib / main.dart

/**
 *  導入庫
 **/
import 'package:flutter/material.dart'; // Material UI組件庫
import 'dart:ui'; // 引入後可以使用window對象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native傳來的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 該方法用於判斷原生界面傳遞過來的路由值，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 當route值爲flutterView時顯示
      return Container(
        child: Center(child: Text('路由值 = flutterView',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.green,
      );

    default:  // 默認的路由值爲 '/'，所以在default情況也需返回頁面，否則dart會報錯
      return Container(
        child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.red,
      );
  }
}

至此，關於Android 與 Flutter的相互通信講解完畢。

6. 總結

本文全面介紹了Android Native端與Flutter端的通信方式。
接下來推出的文章，我將繼續講解Flutter的相關知識，包括使用語法、實戰等，感興趣的讀者可以繼續關注我的博客哦：Carson_Ho的Android博客

請幫頂 / 評論點贊！因爲你們的贊同/鼓勵是我寫作的最大動力！

Android Flutter：手把手教你如何進行Android 與 Flutter的相互通信

前言

目錄

1. 通信原理

1.1 通信架構

1.2 整體設計

1.3 詳細說明

2. 通信交互方式

2.1 簡介

2.2 設計原理

2.3 應用場景

3. 準備工作

步驟1：創建 flutter module 模塊

步驟2：添加flutter module模塊到當前項目

4. 詳解講解（含Demo）

通道1：基本信息通道（BasicMessageChannel）

步驟1：自定義BasicMessageChannel工具類

步驟2：定義Flutter要發送到Native端的消息 & 接受消息的函數方法，及其對應消息內容

步驟3：（Native端）連接Native和Flutter的中間層

示意圖

通道2：方法通道（MethodChannel）

步驟1：自定義MethodChannel工具類（Native端）

步驟2：（Flutter端）定義要通知Native調用的方法 & 接受Native端要調用的方法

步驟3：（Native端）連接Native和Flutter的中間層

示意圖

通道3：數據流通道（EventChannel）

步驟1：自定義EventChannel工具類（Native端）

步驟2：Flutter要展示的佈局（Flutter）

步驟3：連接Native和Flutter的中間層

示意圖

5. 基礎場景：在Android中顯示Flutter界面

方式1：顯示在Activity

步驟1：Android端設置好跳轉 & 顯示邏輯

步驟2：在Flutter端中設置好要顯示的佈局

效果圖

方式2：顯示在Fragment

步驟1：Android端設置好跳轉 & 顯示邏輯

步驟2：在Flutter端設置好佈局顯示

6. 總結

請幫頂 / 評論點贊！因爲你們的贊同/鼓勵是我寫作的最大動力！