Android现有的原生项目集成FlutterBoost

本文会随着FlutterBoost的发布不断更新。

写本篇文章的目的:FlutterBoostREADMEFlutterBoost所给的demo有出入,照着README是无法成功集成的。官方demo是已经集成完毕后的状态,所以我参考了demo,尝试如何一步一步集成,中间也遇到了一些问题,所以想记录一下,同时也希望对别人有所帮助。在此过程中请教了flutter boost 开源贡献小组中的许多大佬,他们也都热心给出了许多建议,在此表示感谢。

注意:本篇文章并不涉及FlutterBoost的原理。

本文基于你已经安装好了flutter并进行了相关的配置。如何安装配置请参考起步:安装Flutter

先看看集成后的效果

运行效果.gif

接下来开始

flutter boost 目前已经支持flutter 1.9版本,对应的flutter 版本是:v1.9.1-hotfixes。

flutter boost分支是:feature/flutter_1.9_upgrade。

flutter boost androidx 分支是:feature/flutter_1.9_androidx_upgrade。如果你的项目需要支持 androidx的话,需要选择使用这个分支 。

切换flutter到stable分支。

这里说一下,flutter也是一个git仓库。我们可以用git命令或者Sourcetree等图形化工具查看。

首先在命令行运行flutter channel stable,切换到stable分支。然后运行flutter pub get。然后看一下stable分支最新的提交。

stable_channel.png

我是使用Sourcetree来查看flutter仓库的。可以看到当前处于stable分支的v1.9.1+hotfix.6节点。

创建Android原生工程

android_project.png
android_project_structure.png

我们创建好的Android原生工程结构如上图所示,注意我们是使用了androidx的。

使用Android Studio 创建一个flutter module工程

create_flutter_module_step1.png

选择 File->New->New Flutter Project

create_flutter_module_step2.png
create_flutter_module_step3.png
create_flutter_module_step4.png

注意我们创建的是一个 Flutter Module,并且我们使用了androidx。创建好的flutter module结构如下所示。

flutter_module_structure.png

Flutter Module 集成 Flutter Boost

现在我们要在创建好的Flutter Module中集成Flutter Boost。这里注意一点,因为我们的Android 原生项目和Flutter Module都使用了androidx,所以我们要使用Flutter Boost对应的flutter_1.9_androidx_upgrade分支。当时没注意这一点,也是一直报错,请教了flutter boost 开源贡献小组中的许多大佬才解决。

废话少说,打开Flutter Module的pubspec.yaml文件,添加Flutter Boost依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_boost:
    git:
      url: 'https://github.com/alibaba/flutter_boost.git'
      ref: 'feature/flutter_1.9_androidx_upgrade'

添加完毕以后在命令行里运行flutter pub get。到现在Flutter Module 集成 Flutter Boost已经完成,接下来的工作就是原生项目集成Flutter Module和Flutter Boost。

Android 原生项目集成Flutter Module和Flutter Boost

Android 原生项目集成Flutter Module和Flutter Boost就是以依赖module的方式把Flutter Module和Flutter Boost引进来。可以参考Android 原生项目集成Flutter

首先在Android 原生项目的app的build.gradle文件中添加如下声明

android {
    //...
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}

如果不加这个东西,会导致许多编译错误。例如:

Transform artifact lifecycle-common-java8.jar (androidx.lifecycle:lifecycle-common-java8:2.0.0) with DexingTransform


然后在Android 原生项目根目录的settings.gradle文件中添加如下声明

include ':app'                                     // 这一行应该存在
setBinding(new Binding([gradle: this]))                                 
evaluate(new File(                                                      
  settingsDir.parentFile,                                               
  'flutter_module/.android/include_flutter.groovy'                        
))       

注意:如果你是从github上clone我的代码,需要改成如下所示,切记切记。

include ':app'                                     // 这一行应该存在
setBinding(new Binding([gradle: this]))                                 
evaluate(new File(                                                      
  settingsDir.parentFile,                                               
  'FlutterBoostFlutterModule/.android/include_flutter.groovy'                        
))       

添加完毕以后,同步一下工程。同步完毕以后工程目录如下所示。

project_structrue_after_change_settings.png

然后点击Android studio 工具栏上的Project Structure按钮为Android 原生项目app添加依赖。

tool_bar_project_structure.png
select_app_add_moduel.png
app_add_modules.png

点击OK,同步工程以后,我们发现在app的build.gradle文件中加入了这两行,说明我们集成Flutter Module和Flutter Boost成功。

success_integrate.png

使用Flutter Boost

现在我们已经把项目依赖搞定了,接下来就是使用了。首先我们把官方给的demoflutter_1.9_androidx_upgrade克隆下来,因为我们需要用到其中代码,就不自己写了,直接从官方demo中拷贝过来。

从官方demo中拷贝Android 原生部分的代码、资源文件等

官方demo.png

克隆下来以后使用AndroidStudio打开,目录结构如上所示。

首先我们拷贝Android 原生部分的代码、资源文件到我们的Android 项目中。

copy_android_code.png

拷贝完毕后有几点需要注意:

  • 在AndroidManifest.xml文件中指定使用MyApplication。
  • 将拷贝的Activity在AndroidManifest.xml文件中声明。
  • 需要将NewBoostFlutterActivity也在AndroidManifest.xml文件中声明,这一点一定要注意。

Android 原生项目的AndroidManifest.xml文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dmw.useflutterboost">

    <application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
            android:name=".NativePageActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize" />

        <activity
            android:name=".FlutterFragmentPageActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/page_loading" />

        </activity>

        <!--声明com.idlefish.flutterboost.containers.NewBoostFlutterActivity-->
        <activity
            android:name="com.idlefish.flutterboost.containers.NewBoostFlutterActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
            android:hardwareAccelerated="true"
            android:theme="@style/Theme.AppCompat"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/page_loading" />

        </activity>

    </application>

</manifest>

从官方demo中拷贝flutter部分的代码、资源文件等

copy_flutter_code.png

到此集成结束,我们运行一下运行Android 原生项目看看是什么样子。

运行Android 原生项目

运行效果.gif

到此,我们的集成工作已经完毕,我们可以在此基础上修改文件,添加一些文件等等看看效果来研究Flutter Boost的原理等等。

主工程项目地址:FlutterBoostMyApplication
Flutter model地址: FlutterBoostFlutterModule

参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容