关于Flutter和Android混合开发的记录

关于Flutter和Android混合开发的记录,第1张

关于Flutter和Android混合开发的记录

混合开发方式:
一、源码集成
二、产物集成:Flutter 项目单独开发,开发完成后发布成 aar 包或者 IOS的 framework 形式,原生项目依赖 Flutter 输出的制品即可

产物集成 在已有Andriod项目中集成Flutter 1、创建Android项目

步骤忽略。

2、安卓Studio配置Flutter

请参考另一篇文章:安卓studio 配置Flutter

3、创建flutter module

打开安卓项目,Terminal调整位置至项目目录使用命令flutter create -t module {项目名称} 创建Flutter module。
例如:flutter create -t module myflutter
会出现:

Creating project myflutter...
  myflutter.gitignore (created)
  myflutter.idealibrariesDart_SDK.xml (created)
  myflutter.ideamodules.xml (created)
  myflutter.ideaworkspace.xml (created)
  myflutter.metadata (created)
  myflutteranalysis_options.yaml (created)
  myflutterlibmain.dart (created)
  myfluttermyflutter.iml (created)
  myfluttermyflutter_android.iml (created)
  myflutterpubspec.yaml (created)
  myflutterREADME.md (created)
  myfluttertestwidget_test.dart (created)
Running "flutter pub get" in myflutter...                        1,844ms
Wrote 12 files.

到此你会发现项目中多了一个flutter的module如下图:

注意:
在 Flutter 的模块项目中包含有一个隐藏的 .android 和 .ios 目录这个目录下是可运行的 Android 和 iOS 项目,我们的 Flutter 代码还是在 lib 下编写,注意在 .android 和 .ios 目录下都有一个 Flutter 目录,这个是我们 Flutter 的库项目了。也就是 Android 用来生成 aar , IOS 用来生产 framework 的库。如果我们用 flutter create xxx 生成的纯 Flutter 项目是没有这个 Flutter 目录的。

如果不是通过flutter create -t module 名称方式创建的module的话,在flutter module 中的.android中会缺少include_flutter.groovy文件,这就会导致

evaluate(new File(
       // '{xxxxx你的flutter module目录}/.android/include_flutter.groovy'
        'myflutter/.android/include_flutter.groovy'
))

这一步报错

对比如下:
(1)通过flutter create -t module myflutter 创建的Flutter项目组成

(2)直接 create new fluter project

4.将flutter module 提交至git

很多时候的开发都需要团队协作,这就面临着Flutter module的共享,下面以Gitee为例,将Flutter module分享者Git。

(1)修改忽略文件.gitignore

修改Flutter module的.gitignore文件内容如下:

.DS_Store
.dart_tool/

.packages
.pub/

.idea/
.vagrant/
.sconsign.dblite
.svn/

*.swp
profile

DerivedData/

.generated/

*.pbxuser
*.mode1v3
*.mode2v3
*.perspectivev3

!default.pbxuser
!default.mode1v3
!default.mode2v3
!default.perspectivev3

xcuserdata

*.moved-aside

*.pyc
*sync/
Icon?
.tags*

build/
.android/
.ios/
.flutter-plugins

(2)提交代码至Git

使用安卓studio单独打开flutter module,VCS- import Into Version Contral - Share Project On Gitee
提交后登录Gitee官网,招到对应的项目,复制仓库地址。

5. 给原生 Android 项目集成 Flutter Module

其他同事需要共享flutter module的时候,通过以下 *** 作:

1.在原生 Android 项目中添加子模块,将上面创建的 flutter module 项目拉取到原生安卓项目中
引入已有的Flutter module:

git submodule add {你的flutter module的仓库地址}
git submodule update

这时有可能报错:

E:FlutterMuFlutterAndroidProject2>git submodule add https://gitee.com/wen__flower/myflutter.git
fatal: not a git repository (or any of the parent directories): .git

这时候进入到安卓项目文件夹中,右键Git Bash Here 之后输入git init即可。

2.在根目录的 settings.gradle 中添加如下配置

include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
       // '{xxxxx你的flutter module目录}/.android/include_flutter.groovy'
        'myflutter/.android/include_flutter.groovy'
))

3.在原生项目的 app 目录下的 build.gradle 文件中添加 Flutter 库的依赖

dependencies {
  implementation project(':flutter')
}

4.实现基础的跳转

   //默认跳转到Flutter -main页面
    startActivity(FlutterActivity.createDefaultIntent(this));

记得要在清单文件里面注册:

   

但是这时候有个问题就是从原生跳转到Flutter的时候速度很慢
可以采用将页面存起来的方式来加快速度:

class MyApp : Application(){
    lateinit var flutterEngine : FlutterEngine
 
    override fun onCreate() {
        super.onCreate()
        flutterEngine = FlutterEngine(this)
//        可设置初始路由
//        flutterEngine.getNavigationChannel().setInitialRoute("your/route/here");
        flutterEngine.dartExecutor.executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault())
        FlutterEngineCache
                .getInstance()
                .put("AndLangFlutter", flutterEngine)
    }
 
//    释放flutter引擎
    override fun onTerminate() {
        flutterEngine.destroy()
        super.onTerminate()
    }
}

跳转的时候采用:

startActivity(
                FlutterActivity
                    .withCachedEngine("AndLangFlutter")
                    .build(this)
            )

此时运行会报错:Error: No pubspec.yaml file found. 查看flutter module目录也会发现,文件目录不完整。
解决办法:
在安卓项目的Terminal中将目录地址调整至flutter module文件目录,(例如:cd myflutter 回车)
在使用flutter packages get可解决。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5697427.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-17
下一篇 2022-12-17

发表评论

登录后才能评论

评论列表(0条)

保存