Android Flutter 混合开发高仿大厂 App

code花旦 两个著眼大后端应用领域的控制技术网络平台

译者：季公亥_lsy

镜像：juejin.im/post/6844904194869051405

这首诗将简述 Android模块化的构架构筑 及 Flutter 和 Android怎样混和合作开发 (整座App多于主页是用原生植物Android顺利完成，其它网页都是导入以后的搞好的Flutter网页) ，主寄主流程由 Android 构筑，选用了模块化的构架构筑整座 App ，完全相同销售业务，相关联完全相同的 module 工程建设，销售业务间选用USB通讯 (ARouter) ，以 module 的形式混进 Flutter，透过 MethodChannel 和 Flutter 端展开网络设备等，且那些机能同时实现源代码开放源码，钟爱的爸爸妈妈能点选至 GitHub。https://github.com/persilee/android_ctrip

下列昌明会分成4个部份简述：

工程建设项目顺利完成的机能自动更新

具体来说，他们却是透过两个音频来加速自动更新下工程建设项目顺利完成的机能和运转效用，如下表所示

看完音频后，只不过绝大部份机能和以后的 纯flutter工程建设项目 机能完全相同，而已主页追加了4个tab所推荐网页及携程网一楼和产业布局发生改变。

他们也可扫描器，加装新体验：

工程建设项目模块化内部结构预测

其次，预测梳理下工程建设项目内部结构，工程建设项目的内部结构大致如图，还有一些细枝末节的没有体现在图里：

销售业务工程建设

把具体独立的销售业务都拆分成单独的 module 减小工程建设项目的维护压力

把具体的机能都封装成独立的库供销售业务模块使用，降低工程建设项目的维护成本及代码间耦合性

这里有一些使用的插件并没有在工程建设项目模版里体现出来(模版空间有限)。

在这里把工程建设项目使用的插件整理列举出来供他们参考：

基本就是那些了，应该没有漏的，插件的详尽使用，请进入各插件的 GitHub 主页。

在此，把我工程建设项目的插件导入代码及版本管理的 gradle 代码贴出来，如下表所示：插件导入代码：

 {

])

implementation rootProject.depsLibs.appcompat

    implementation rootProject.depsLibs.legacy

    implementation rootProject.depsLibs.recyclerview

implementation rootProject.depsLibs.constraintlayout

    implementation rootProject.depsLibs.cardview

    implementation rootProject.depsLibs.magicindicator

implementation rootProject.depsLibs.immersionbar

    implementation rootProject.depsLibs.pagerBottomTabStrip

implementation rootProject.depsLibs.rxjava

    implementation rootProject.depsLibs.rxandroid

implementation rootProject.depsLibs.butterknife

    annotationProcessor rootProject.depsLibs.butterknifeCompiler

    implementation rootProject.depsLibs.gson

    implementation rootProject.depsLibs.banner

    implementation rootProject.depsLibs.smartRefreshLayout

implementation rootProject.depsLibs.refreshHeader

    implementation rootProject.depsLibs.refreshHeaderTwoLevel

implementation rootProject.depsLibs.refreshFooter

    implementation rootProject.depsLibs.eventbus

implementation(rootProject.depsLibs.arouterapi) {

    }

annotationProcessor rootProject.depsLibs.aroutercompiler

)

)

)

)

)

)

)

)

}

版本管理代码 (统一管理版本号) :

ext {

    android = [

,

,

,

,

,

,

,

,

    ]

    depsVersion = [

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

    ]

    depsLibs = [

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

    ]

}

工程建设项目机能详尽简述（所制习题）

这里主要对主页机能及习题展开简述，由于其它网页是导入了以后的 Flutter 网页， 具体机能在 Flutter 10天刺绣品小厂App及小技巧积累总结 已经介绍过了，在这就不再阐述。

主页重点简述下列机能的同时实现：

具体来说，看看具体的效用图，如图：

下拉刷新和携程网一楼是使用 smartRefreshLayout 插件顺利完成的，同时实现代码如下表所示：

{

 SimpleMultiListener() {

{

        }

{

        }

{

        }

{

                homeSecondFloorImg.setVisibility(View.GONE);

);

);

);

);

homeHeader.finishTwoLevel();

homeCustomScrollView.setVisibility(View.GONE);

);

                homeCustomScrollView.setVisibility(View.VISIBLE);

);

            }

        }

    });

}

XML 网页产业布局文件代码如下表所示：

    …

具体同时实现详情，可点选 GitHub 查看源代码。

搜索栏的滚动的 placeholder 文字是使用 banner 插件同时实现的，点击搜索框可跳转到搜索网页 (flutter写的搜索网页) ，跳转网页后能把 placeholder 文字带到 flutter 搜索网页。

效用如图：

滚动的placeholder文字同时实现代码如下表所示 (搜索框的同时实现就不再这里展示都是一些XML产业布局代码)：

        homeSearchBarPlaceholder

 OnBannerListener() {

                        ARouter.getInstance()

)

, ((Home.SearchPlaceHolderListBean) data).getText())

                                .navigation();

                    }

});

    }

searchBar的具体机能不过多阐述，和以后的工程建设项目一致。

渐变色网格导航基本都是一些 XML 网页产业布局代码，而已我把它封装成了单独的模块，效用如图

封装之后的导入就非常简单，代码如下表所示：

    …

具体同时实现详情，可点选 GitHub 查看源代码。

banner模块也是用 banner 插件同时实现的，如图

同时实现代码如下表所示：

{

)

}

多状态的tab指示器的同时实现需要注意很多细节，因为它是在主页的 fragment 的 ScrollView 里嵌入 viewPaper，具体来说你会发现 viewPaper 不显示的问题，其次是滚动不流畅的问题，这两个问题我的解决方案是：

这个机能同时实现代码过多不便在这里展示，具体同时实现详情，可点选 GitHub 查看源代码。

Android Flutter 混和合作开发

这个工程建设项目的同时实现多于主页是用 Android 原生植物同时实现，其它的网页均是 Flutter 同时实现的，以后 纯Flutter工程建设项目。

Android 导入 Flutter 展开混和合作开发，需要下列几个步骤

下面依次简述这几部份是怎样操作同时实现的。

这个应该不用过多描述，基本操作他们都会 File –> New –> New Module 如图：

新建顺利完成之后，android studio 会自动生成配置代码到 gradle 配置文件里，且生成两个 flutter 的 library 模块。

Tips：新建的时候最好 flutter module 和 android 工程建设项目放到同级目录下；新版的 android studio 才会自动生成 gradle 配置代码，老版本貌似需要手动配置

如，没有生成 gradle 配置代码，你需要在根工程建设项目的 settings.gradle 文件里手动加入如下表所示配置：

]))

evaluate(new File(

))

还需在寄主工程建设 (没改名的话都是app) 的 build.gradle 导入 flutter， 如下表所示：

 {

    …

)

    …

}

编写flutter代码，在 flutter module 里按照正常 flutter 合作开发流程编写 flutter 代码即可。(我工程建设项目里的 flutter 的代码是以后工程建设项目都写好的，复制过来，改改包的导入问题，就能运转了。)

这里需要注意的是，flutter 有且多于两个入口，就是 main() 函数，他们需要在这里处理好 flutter 网页的跳转问题。

在 android 端，创建 flutter 网页，代码如下表所示：

);

Flutter.createView 需要3个参数 activity 、lifecycle 、route ，这个 route 就是要传递到 flutter 端的，当然，它是 String 类型的，他们能自由发挥传递普通字符串或 json 字符串等。

他们也能透过其它的方式创建 flutter 网页，如：Flutter.createFragment() 、 FlutterActivity.withNewEngine()、 FlutterFragment.createDefault() 等。

具体的使用，可前往 Flutter官方文档 查阅。

那么，flutter 端怎样接收这个 route 参数，是透过 window.defaultRouteName，此工程建设项目里管理 flutter 端路由代码如下表所示：

=> runApp(MyApp());

{

{

 MaterialApp(

,

,

      theme: ThemeData(

primarySwatch: Colors.blue,

,

      ),

    );

  }

}

{

];

];

        …

:

DestinationSearchPage(

,

        );

        …

:

 Center(

                child: Column(

mainAxisAlignment: MainAxisAlignment.center,

                children: [

,

                        textDirection: TextDirection.ltr),

                ],

                ),

            );

    }

}

只不过，flutter 端接收这个 route 参数，还有一种方法，就是透过 onGenerateRoute，它是 MaterialApp 里的两个方法。

代码如下表所示：

 _widgetRoute(settings.name);

},

flutter 端能调用 android 端的方法及相互传递数据是怎样同时实现的，flutter 官方提供了3个方法能同时实现，分别是：

此工程建设项目里选用了 MethodChannel 方法展开通讯，如：flutter 端调用 android 端的AI智能语音方法以及 flutter 打开 android 端网页就是用 MethodChannel 同时实现的。

flutter 端调用 android 端的AI智能语音方法代码如下：

{

;

{

, params ?? {});

  }

    …

    …

    …

}

flutter 打开 android 端网页代码如下表所示：

{

);

{

 {

} on PlatformException {

);

    }

  }

    …

}

android 接收也是透过 MethodChannel ，具体同时实现代码如下表所示：

{

MethodChannel methodChannel;

 Activity activity;

{

.activity = activity;

    }

{

);

 MethodChannelPlugin((Activity) flutterView.getContext());

methodChannel.setMethodCallHandler(instance);

    }

{

GotoDestinationSearchPageEvent());

);

        } 

        …

 {

            result.notImplemented();

        }

    }

}

android flutter 混和合作开发基本就是这3个步骤，其它一些细节及具体的流程请参考 GitHub 工程建设项目源代码。

最后附上工程建设项目及博客地址：

工程建设项目地址：https://github.com/persilee/android_ctrip博客地址：https://h.lishaoy.net/androidctrip

相关阅读

1 那些初学者实践 Flutter 最常出现的错误2 Flutter 2020首个稳定版 1.17 重磅发布：多个追加特性3 Flutter 合作开发小结 | Tips4 使用Flutter一年后，这是我得到的经验5 Flutter 添加到现有工程建设项目