Android Flutter 混合開發高仿大廠App

子木_lsy發表於2020-06-19

自上篇 Flutter 10天高仿大廠App及小技巧積累總結的續篇，這次更是乾貨滿滿。

這篇文章將概述 Android元件化的架構搭建 及 Flutter 和 Android 如何混合開發 (整個App只有首頁是用原生Android完成，其他頁面都是引入之前的做好的Flutter頁面) ，主宿主程式由 Android 搭建，採用了元件化的架構搭建整個 App ，不同業務，對應不同的 module 工程，業務之間採用介面通訊 (ARouter) ，以 module 的形式混入 Flutter，通過 MethodChannel 和 Flutter 端進行資料通訊等，且這些功能實現原始碼開源，感興趣的小夥伴可以移步至 GitHub。

以下博文會分為4個部分概述：

專案完成的功能預覽
專案元件化結構分析
專案功能詳細概述（所用知識點）
Android Flutter 混合開發

專案完成的功能預覽

首先，我們還是通過一個視訊來快速預覽下專案完成的功能和執行效果，如下

如視訊播放失敗 ?

請移步這裡點選觀看 (點選齒輪 --> 更多播放設定，可以隱藏黑邊)

看完視訊後，其實大部分功能和之前的純flutter專案功能相同，只是首頁新增了4個tab推薦頁面及攜程二樓和佈局改變。

大家也可掃描，安裝體驗：

專案元件化結構分析

專案結構圖預覽

其次，分析梳理下專案結構，專案的結構大致如圖，還有一些細枝末節的沒有體現在圖裡：

專案結構分析

業務工程

把具體獨立的業務都拆分成單獨的 module 減小專案的維護壓力

ft_home: 首頁模組，這個模組其實還可以繼續拆分，可把4個 tab (精選、附近、景點、美食) 頁都拆成模組，這裡我暫時沒有拆分，後續會完成
ft_destination: 目的地模組，其實並沒有建立這個模組，因為直接引入了之前做好的 flutter 頁面
ft_travel: 旅拍模組，同樣也使用了 flutter 頁面
flutter: flutter模組，這個模組是從 flutter_module 中自動生成的，後面介紹到

基礎庫工程

把具體的功能都封裝成獨立的庫供業務模組使用，降低專案的維護成本及程式碼之間耦合性

lib_network: 網路庫，使用 okhttp 外掛二次封裝，業務層簡單的呼叫即可
lib_webview: 開啟網頁的webview庫，使用了 agentweb 外掛二次封裝，業務層只需要一句程式碼即可完成網頁的跳轉
lib_image_loader: 圖片載入庫，使用了 glide 外掛二次封裝，業務層只需一句程式碼即可載入不同引數的圖片
lib_asr: 百度AI語音庫，通過 Android 整合好供 Flutter 端使用
lib_common_ui: 公共UI庫，重複多次使用的頁面集中管理
lib_base: 基礎庫，通過 ARouter 的 service 功能暴露介面提供服務給業務層，當然業務層也可以在這裡暴露介面供外界使用

這裡有一些使用的外掛並沒有在專案結構圖裡體現出來(結構圖空間有限)。

外掛

在這裡把專案使用的外掛整理列舉出來供大家參考：

magicindicator 強大、可定製、易擴充套件的 ViewPager 指示器框架，首頁的4個 tab (精選、附近、景點、美食) 就是用這個實現的。
immersionbar 一句程式碼輕鬆實現狀態列、導航欄沉浸式管理
pagerBottomTabStrip 頁面底部和側邊的導航欄，首頁、目的地、旅拍、我的頁面切換就是用這個實現的。
rxjava/rxandroid 非同步和鏈式程式設計
butterknife view注入外掛，配合Android外掛使用，可快速自動生成 init view的程式碼，不用寫一句 findViewById 的程式碼。
gson json解析，配合Android外掛使用，可快速生成實體類
smartRefreshLayout 智慧下拉重新整理框架，攜程二樓及下拉重新整理載入更多就是用這個實現的
eventbus 釋出/訂閱事件匯流排，優雅的完成元件之間通訊
arouter 依賴注入、路由跳轉、註冊service，優雅的完成模組之間的通訊
okhttp 網路請求外掛
agentweb webview框架，進行簡單的二次封裝可優雅的進行網頁跳轉
glide 高效能、可擴充套件的圖片載入外掛
banner 圖片輪播控制元件

基本就是這些了，應該沒有漏的，外掛的詳細使用，請進入各外掛的 GitHub 主頁。

在此，把我專案的外掛引入程式碼及版本管理的 gradle 程式碼貼出來，如下：

外掛引入程式碼：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])

    implementation rootProject.depsLibs.appcompat
    implementation rootProject.depsLibs.legacy
    implementation rootProject.depsLibs.recyclerview
    implementation rootProject.depsLibs.constraintlayout
    implementation rootProject.depsLibs.cardview

    //tab指示器
    implementation rootProject.depsLibs.magicindicator
    //沉浸式
    implementation rootProject.depsLibs.immersionbar
    //導航欄
    implementation rootProject.depsLibs.pagerBottomTabStrip
    //rxjava
    implementation rootProject.depsLibs.rxjava
    //rxandroid
    implementation rootProject.depsLibs.rxandroid
    //view 注入
    implementation rootProject.depsLibs.butterknife
    //view 注入
    annotationProcessor rootProject.depsLibs.butterknifeCompiler
    //gson
    implementation rootProject.depsLibs.gson
    //banner
    implementation rootProject.depsLibs.banner
    //smartRefreshLayout 上下拉重新整理
    implementation rootProject.depsLibs.smartRefreshLayout
    implementation rootProject.depsLibs.refreshHeader
    implementation rootProject.depsLibs.refreshHeaderTwoLevel
    implementation rootProject.depsLibs.refreshFooter
    //eventbus
    implementation rootProject.depsLibs.eventbus
    //arouter庫
    implementation(rootProject.depsLibs.arouterapi) {
        exclude group: 'com.android.support'
    }
    annotationProcessor rootProject.depsLibs.aroutercompiler

    //引入home模組
    implementation project(':ft_home')
    //引入圖片載入庫
    implementation project(':lib_image_loader')
    //引入網路庫
    implementation project(':lib_network')
    //webview
    implementation project(':lib_webview')
    //引入基礎ui庫
    implementation project(':lib_common_ui')
    //base庫
    implementation project(':lib_base')
    //引入flutter模組
    implementation project(':flutter')
    //引入百度AI語音庫
    implementation project(':lib_asr')
}
複製程式碼

版本管理程式碼 (統一管理版本號) :

ext {
    android = [
            compileSdkVersion: 29,
            buildToolsVersion: "29.0.0",
            minSdkVersion    : 19,
            targetSdkVersion : 29,
            applicationId    : 'net.lishaoy.android_ctrip',
            versionCode      : 1,
            versionName      : '1.0',
            multiDexEnabled  : true,
    ]

    depsVersion = [
            appcompat            : '1.1.0',
            legacy               : '1.0.0',
            recyclerview         : '1.0.0',
            constraintlayout     : '1.1.3',
            cardview             : '1.0.0',
            magicindicator       : '1.5.0',
            immersionbar         : '3.0.0',
            pagerBottomTabStrip  : '2.3.0X',
            glide                : '4.11.0',
            glidecompiler        : '4.11.0',
            butterknife          : '10.2.1',
            butterknifeCompiler  : '10.2.1',
            rxjava               : '3.0.0',
            rxandroid            : '3.0.0',
            okhttp               : '4.7.2',
            okhttpLogging        : '4.7.2',
            gson                 : '2.8.6',
            banner               : '2.0.10',
            smartRefreshLayout   : '2.0.1',
            refreshHeader        : '2.0.1',
            refreshFooter        : '2.0.1',
            refreshHeaderTwoLevel: '2.0.1',
            eventbus             : '3.2.0',
            agentweb             : '4.1.3',
            arouterapi           : '1.5.0',
            aroutercompiler      : '1.2.2',

    ]

    depsLibs = [
            appcompat            : "androidx.appcompat:appcompat:${depsVersion.appcompat}",
            legacy               : "androidx.legacy:legacy-support-v4:${depsVersion.legacy}",
            recyclerview         : "androidx.recyclerview:recyclerview:${depsVersion.recyclerview}",
            constraintlayout     : "androidx.constraintlayout:constraintlayout:${depsVersion.constraintlayout}",
            cardview             : "androidx.cardview:cardview:${depsVersion.cardview}",
            magicindicator       : "com.github.hackware1993:MagicIndicator:${depsVersion.magicindicator}",
            immersionbar         : "com.gyf.immersionbar:immersionbar:${depsVersion.immersionbar}",
            pagerBottomTabStrip  : "me.majiajie:pager-bottom-tab-strip:${depsVersion.pagerBottomTabStrip}",
            glide                : "com.github.bumptech.glide:glide:${depsVersion.glide}",
            glidecompiler        : "com.github.bumptech.glide:compiler:${depsVersion.glidecompiler}",
            butterknife          : "com.jakewharton:butterknife:${depsVersion.butterknife}",
            butterknifeCompiler  : "com.jakewharton:butterknife-compiler:${depsVersion.butterknifeCompiler}",
            rxjava               : "io.reactivex.rxjava3:rxjava:${depsVersion.rxjava}",
            rxandroid            : "io.reactivex.rxjava3:rxandroid:${depsVersion.rxandroid}",
            okhttp               : "com.squareup.okhttp3:okhttp:${depsVersion.okhttp}",
            okhttpLogging        : "com.squareup.okhttp3:logging-interceptor:${depsVersion.okhttpLogging}",
            gson                 : "com.google.code.gson:gson:${depsVersion.gson}",
            banner               : "com.youth.banner:banner:${depsVersion.banner}",
            smartRefreshLayout   : "com.scwang.smart:refresh-layout-kernel:${depsVersion.smartRefreshLayout}",
            refreshHeader        : "com.scwang.smart:refresh-header-classics:${depsVersion.refreshHeader}",
            refreshHeaderTwoLevel: "com.scwang.smart:refresh-header-two-level:${depsVersion.refreshHeader}",
            refreshFooter        : "com.scwang.smart:refresh-footer-classics:${depsVersion.refreshFooter}",
            eventbus             : "org.greenrobot:eventbus:${depsVersion.eventbus}",
            agentweb             : "com.just.agentweb:agentweb:${depsVersion.agentweb}",
            arouterapi           : "com.alibaba:arouter-api:${depsVersion.arouterapi}",
            aroutercompiler      : "com.alibaba:arouter-compiler:${depsVersion.aroutercompiler}",
    ]
}
複製程式碼

專案功能詳細概述（所用知識點）

這裡主要對首頁功能及知識點進行概述，由於其他頁面是引入了之前的 Flutter 頁面，具體功能在 Flutter 10天高仿大廠App及小技巧積累總結已經介紹過了，在這就不再闡述。

首頁重點概述以下功能的實現：

下拉重新整理、攜程二樓
搜尋appBar
漸變色網格導航
banner元件
多狀態的tab指示器 (滾動固定頂部)

下拉重新整理、攜程二樓

首先，看看具體的效果圖，如圖：

下拉重新整理和攜程二樓是使用 smartRefreshLayout 外掛完成的，實現程式碼如下：

private void initRefreshMore() {
    homeHeader.setRefreshHeader(new ClassicsHeader(getContext()), -1, (int) Utils.dp2px(76)); //設定下拉重新整理及二樓header的高度
    homeHeader.setFloorRate(1.6f); //設定二樓觸發比率
    homeRefreshContainer.setPrimaryColorsId(R.color.colorPrimary, R.color.white); //設定下拉重新整理及二樓提示文字顏色
    homeRefreshContainer.setOnMultiListener(new SimpleMultiListener() {
        @Override
        public void onLoadMore(@NonNull RefreshLayout refreshLayout) {
            loadMore(refreshLayout); //載入更多
        }

        @Override
        public void onRefresh(@NonNull RefreshLayout refreshLayout) {
            refreshLayout.finishRefresh(1600); //設定下拉重新整理延遲
        }

        @Override
        public void onHeaderMoving(RefreshHeader header, boolean isDragging, float percent, int offset, int headerHeight, int maxDragHeight) {
            homeSecondFloorImg.setVisibility(View.VISIBLE);  //隱藏二樓背景圖
            homeSearchBarContainer.setAlpha(1 - Math.min(percent, 1)); //改變searchBar透明度
        }

        @Override
        public void onStateChanged(@NonNull RefreshLayout refreshLayout, @NonNull RefreshState oldState, @NonNull RefreshState newState) {
            if (oldState == RefreshState.ReleaseToTwoLevel) {  //即將去往二樓狀態處理
                homeSecondFloorImg.setVisibility(View.GONE);
                homeHeaderContent.animate().alpha(1).setDuration(666);
            } else if (newState == RefreshState.PullDownCanceled) { //下拉取消狀態處理
                homeHeaderContent.animate().alpha(0).setDuration(666);
            } else if (newState == RefreshState.Refreshing) { //正在重新整理狀態處理
                homeHeaderContent.animate().alpha(0).setDuration(666);
            } else if (oldState == RefreshState.TwoLevelReleased) { // 準備去往二樓完成狀態處理，這裡開啟webview
                WebViewImpl.getInstance().gotoWebView("https://m.ctrip.com/webapp/you/tsnap/secondFloorIndex.html?isHideNavBar=YES&s_guid=feb780be-c55a-4f92-a6cd-2d81e04d3241", true);
                homeHeader.finishTwoLevel();
            } else if (oldState == RefreshState.TwoLevel) { //到達二樓狀態處理
                homeCustomScrollView.setVisibility(View.GONE);
                homeHeaderContent.animate().alpha(0).setDuration(666);
            } else if (oldState == RefreshState.TwoLevelFinish) { //二樓完成狀態處理
                homeCustomScrollView.setVisibility(View.VISIBLE);
                homeCustomScrollView.animate().alpha(1).setDuration(666);
            }
        }

    });

}
複製程式碼

XML 頁面佈局檔案程式碼如下：

<com.scwang.smart.refresh.layout.SmartRefreshLayout
    android:id="@+id/home_refresh_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    app:srlAccentColor="@color/colorPrimary"
    app:srlPrimaryColor="@color/colorPrimary">
    <com.scwang.smart.refresh.header.TwoLevelHeader
        android:id="@+id/home_header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="top">

        <ImageView
            android:id="@+id/home_second_floor_img"
            android:layout_width="match_parent"
            android:layout_height="460dp"
            android:layout_alignTop="@+id/home_header"
            android:scaleType="fitXY"
            android:src="@drawable/second_floor"
            android:visibility="gone"/>
        <FrameLayout
            android:id="@+id/home_header_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/second_floor" />
        </FrameLayout>

    </com.scwang.smart.refresh.header.TwoLevelHeader>
    
    ...

    <com.scwang.smart.refresh.footer.ClassicsFooter
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</com.scwang.smart.refresh.layout.SmartRefreshLayout>
複製程式碼

具體實現詳情，可移步 GitHub 檢視原始碼。

搜尋appBar

搜尋欄的滾動的 placeholder 文字是使用 banner 外掛實現的，點選搜尋框可跳轉到搜尋頁面 (flutter寫的搜尋頁面) ，跳轉頁面後可以把 placeholder 文字帶到 flutter 搜尋頁面。

效果如圖：

滾動的placeholder文字實現程式碼如下 (搜尋框的實現就不再這裡展示都是一些XML佈局程式碼)：

        homeSearchBarPlaceholder
                .setAdapter(new HomeSearchBarPlaceHolderAdapter(homeData.getSearchPlaceHolderList())) // 設定介面卡
                .setOrientation(Banner.VERTICAL) // 設定滾動方向
                .setDelayTime(3600) // 設定間隔時間
                .setOnBannerListener(new OnBannerListener() {
                    @Override
                    public void OnBannerClick(Object data, int position) {  //點選開啟 flutter 搜尋頁面
                        ARouter.getInstance()
                                .build("/home/search")
                                .withString("placeHolder", ((Home.SearchPlaceHolderListBean) data).getText())
                                .navigation();
                    }
                });
    }
複製程式碼

searchBar的具體功能不過多闡述，和之前的專案一致。

漸變色網格導航

漸變色網格導航基本都是一些 XML 頁面佈局程式碼，只是我把它封裝成了單獨的元件，效果如圖

封裝之後的引入就非常簡單，程式碼如下：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/white">

    <!-- 網格導航 -->
    <net.lishaoy.ft_home.GridNavView
        android:id="@+id/home_grid_nav_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    ...

</LinearLayout>
複製程式碼

具體實現詳情，可移步 GitHub 檢視原始碼。

banner元件

banner元件也是用 banner 外掛實現的，如圖

實現程式碼如下：

private void initBanner() {
    homeBanner.addBannerLifecycleObserver(this)
            .setAdapter(new HomeBannerAdapter(homeData.getBannerList())) //設定介面卡
            .setIndicator(new EllipseIndicator(getContext()))           //設定指示器，如圖的指示器是我自定義的外掛裡並沒有提供
            .setIndicatorSelectedColorRes(R.color.white)                //設定指示器顏色
            .setIndicatorSpace((int) BannerUtils.dp2px(10))             //設定間距
            .setBannerRound(BannerUtils.dp2px(6));                      //設定圓角

}
複製程式碼

多狀態的tab指示器

多狀態的tab指示器的實現需要注意很多細節，因為它是在首頁的 fragment 的 ScrollView 裡嵌入 viewPaper，首先你會發現 viewPaper 不顯示的問題，其次是滾動不流暢的問題，這兩個問題我的解決方案是：

viewPaper 不顯示的問題：使用自定義的 ViewPager 重寫 onMeasure 方法，重新計算高度
滾動不流暢的問題：使用自定義的 ScrollView，重寫 computeScroll 和 onScrollChanged 重新獲取滾動距離

實現效果如圖：

這個功能實現程式碼過多不便在這裡展示，具體實現詳情，可移步 GitHub 檢視原始碼。

Android Flutter 混合開發

這個專案的實現只有首頁是用 Android 原生實現，其他的頁面均是 Flutter 實現的，之前純Flutter專案。

Android 引入 Flutter 進行混合開發，需要以下幾個步驟

建立一個flutter module
編寫flutter程式碼 (建立 flutter 路由)
flutter 和 android 之間相互通訊

下面依次概述這幾部分是如何操作實現的。

建立一個flutter module

這個應該不用過多描述，基本操作大家都會 File --> New --> New Module 如圖：

新建完成之後，android studio 會自動生成配置程式碼到 gradle 配置檔案裡，且生成一個 flutter 的 library 模組。

Tips：新建的時候最好 flutter module 和 android 專案放到同級目錄下；新版的 android studio 才會自動生成 gradle 配置程式碼，老版本貌似需要手動配置

如，沒有生成 gradle 配置程式碼，你需要在根專案的 settings.gradle 檔案裡手動加入如下配置：

setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir, //設定根路徑，根據具體flutter module路徑配置
  'flutter_module/.android/include_flutter.groovy'
))

include ':flutter_module'
複製程式碼

還需在宿主工程 (沒改名的話都是app) 的 build.gradle 引入 flutter，如下：

dependencies {
    ...
    //引入flutter模組
    implementation project(':flutter')
    ...
}
複製程式碼

編寫flutter程式碼

編寫flutter程式碼，在 flutter module 裡按照正常 flutter 開發流程編寫 flutter 程式碼即可。 (我專案裡的 flutter 的程式碼是之前專案都寫好的，複製過來，改改包的引入問題，就可以執行了。)

這裡需要注意的是，flutter 有且只有一個入口，就是 main() 函式，我們需要在這裡處理好 flutter 頁面的跳轉問題。

在 android 端，建立 flutter 頁面，程式碼如下：

    Flutter.createView(getActivity(),getLifecycle(),"destination");
複製程式碼

Flutter.createView 需要3個引數 activity 、lifecycle 、route ，這個 route 就是要傳遞到 flutter 端的，當然，它是 String 型別的，我們可以自由發揮傳遞普通字串或 json 字串等。

我們也可以通過其他的方式建立 flutter 頁面，如： Flutter.createFragment() 、 FlutterActivity.withNewEngine()、 FlutterFragment.createDefault() 等。

具體的使用，可前往 Flutter官方文件查閱。

那麼，flutter 端如何接收這個 route 引數，是通過 window.defaultRouteName，此專案裡管理 flutter 端路由程式碼如下：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter model',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'PingFang',
      ),
      home: _widgetRoute(window.defaultRouteName), // 通過 window.defaultRouteName 接收 android 端傳來的引數
    );
  }
}

Widget _widgetRoute(String defaultRouteName) {
    Map<String, dynamic> params = convert.jsonDecode(defaultRouteName); //解析引數
    defaultRouteName = params['routeName'];
    placeHolder = params['placeHolder'];

    switch (defaultRouteName) { // 根據引數返回對應的頁面
        ...
        case 'destination/search':
            return DestinationSearchPage(
                hideLeft: false,
        );
        ...
        default:
            return Center(
                child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Text('not found $defaultRouteName',
                        textDirection: TextDirection.ltr),
                ],
                ),
            );
    }
}
複製程式碼

其實，flutter 端接收這個 route 引數，還有一種方法，就是通過 onGenerateRoute，它是 MaterialApp 裡的一個方法。

程式碼如下：

onGenerateRoute: (settings){ //通過 settings.name 獲取android端傳來的引數
    return _widgetRoute(settings.name);
},
複製程式碼

flutter 和 android 之間相互通訊

flutter 端可以呼叫 android 端的方法及相互傳遞資料是如何實現的，flutter 官方提供了3個方法可以實現，分別是：

EventChannel：單向的持續通訊，如：網路變化、感測器等。
MethodChannel：一次性通訊，一般適用如方法的呼叫。
BasicMessageChannel：持續的雙向通訊。

此專案裡採用了 MethodChannel 方法進行通訊，如：flutter 端呼叫 android 端的AI智慧語音方法以及 flutter 開啟 android 端頁面就是用 MethodChannel 實現的。

flutter 端呼叫 android 端的AI智慧語音方法程式碼如下：

class AsrManager {
  static const MethodChannel _channel = const MethodChannel('lib_asr');
  //開始錄音
  static Future<String> start({Map params}) async {
    return await _channel.invokeMethod('start', params ?? {});
  }
  //停止錄音
    ...
  //取消錄音
    ...
  //銷燬
    ...
}
複製程式碼

flutter 開啟 android 端頁面程式碼如下：

class MethodChannelPlugin {

  static const MethodChannel methodChannel = MethodChannel('MethodChannelPlugin');

  static Future<void> gotoDestinationSearchPage() async {
    try {
      await methodChannel.invokeMethod('gotoDestinationSearchPage'); //gotoDestinationSearchPage 引數會傳到android端
    } on PlatformException {
      print('Failed go to gotoDestinationSearchPage');
    }
  }
    ...
}
複製程式碼

android 接收也是通過 MethodChannel ，具體實現程式碼如下：

public class MethodChannelPlugin implements MethodChannel.MethodCallHandler {

    private static MethodChannel methodChannel;
    private Activity activity;

    private MethodChannelPlugin(Activity activity) {
        this.activity = activity;
    }

    //呼叫方通過 registerWith 來註冊flutter頁面
    public static void registerWith(FlutterView flutterView) {
        methodChannel = new MethodChannel(flutterView, "MethodChannelPlugin");
        MethodChannelPlugin instance = new MethodChannelPlugin((Activity) flutterView.getContext());
        methodChannel.setMethodCallHandler(instance);
    }

    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        if (methodCall.method.equals("gotoDestinationSearchPage")) { // 收到訊息進行具體操作
            EventBus.getDefault().post(new GotoDestinationSearchPageEvent());
            result.success(200);
        } 
        ...
        else {
            result.notImplemented();
        }
    }
}
複製程式碼

android flutter 混合開發基本就是這3個步驟，其他一些細節及具體的流程請參考 GitHub 專案原始碼。

最後附上專案及部落格地址：

專案地址：github.com/persilee/an…
部落格地址：h.lishaoy.net/androidctri…

Flutter 10天高仿大廠App及小技巧積累總結
2020-05-12
FlutterAPP
Flutter混合開發—Android篇
2021-05-25
FlutterAndroid
Flutter、Android混合開發實踐
2020-02-16
FlutterAndroid
Flutter元件化混合開發-Android
2020-01-10
Flutter元件化Android
Flutter + Native混合棧仿餓了麼APP
2020-05-10
FlutterAPP
flutter 混合開發（android 實際操作）
2019-04-19
FlutterAndroid
Flutter - 混合開發
2020-07-12
Flutter
Flutter混合開發
2020-12-12
Flutter
Android與Flutter混合開發-UI互動
2020-02-14
AndroidFlutterUI
Android Flutter混合開發問題總結
2019-09-23
AndroidFlutter
Flutter混合開發玩Android客戶端
2021-03-21
FlutterAndroid客戶端
Flutter開發實戰高仿微信（1）首頁
2020-05-15
Flutter
Flutter混合開發-iOS
2020-04-18
FlutteriOS
Flutter原生混合開發
2019-11-08
Flutter
Android Flutter混合開發問題總結（二）
2019-11-05
AndroidFlutter
Flutter & Native 混合開發
2020-02-21
Flutter
Flutter混合開發—iOS篇
2021-05-14
FlutteriOS
Flutter混合工程開發探究
2018-07-23
Flutter
原生App專案整合flutter混合開發詳細指南
2019-02-21
APPFlutter
Flutter混合Android
2019-04-10
FlutterAndroid
Flutter混合開發(一)：Android專案整合Flutter模組詳細指南
2019-11-07
FlutterAndroid
不得不看的Flutter與Android混合開發
2019-06-16
FlutterAndroid
Flutter完整開發實戰詳解(十四、混合開發打包 Android 篇)
2019-06-03
FlutterAndroid
Flutter 生成執行小程式的混合App開發實踐
2023-02-08
FlutterAPP
Flutter混合開發(三)：Android與Flutter之間通訊詳細指南
2019-11-15
FlutterAndroid
現有Android專案中整合Flutter/Flutter混合開發實戰（一）
2019-02-26
AndroidFlutter
Flutter、iOS混合開發實踐
2020-03-12
FlutteriOS
Flutter 和iOS 混合開發（一）
2019-08-08
FlutteriOS
Flutter混合開發之FlutterFragment使用
2022-01-09
FlutterFragment
Flutter Boost 混合開發框架初探
2021-04-01
Flutter框架
如何進行Flutter混合開發
2018-10-30
Flutter
Flutter混合App實戰
2019-04-08
FlutterAPP
uni-app 混合開發
2022-06-20
APP
Hybrid 混合App開發
2018-05-23
APP
Flutter 1.12混合開發實踐
2020-03-16
Flutter
Flutter混合開發的路由棧管理
2020-01-27
Flutter路由
iOS整合 Flutter 混合工程開發一
2020-04-24
iOSFlutter
混合開發：flutter整合進iOS工程
2019-11-19
FlutteriOS