Flutter混合开发踩坑指北

Stella981
• 阅读 936

2020年这个长假因为新型冠状病毒疫情显得格外不一样,好多小伙伴应该已经闲的长毛了,再坚持一下,相信国家很快就会控制住的。 这两天实在不知道做啥了,开始跟着keep计划健身,为即将来临的工作热身,今天学习了一下Flutter的混合开发知识。 Flutter与Android的原生混合开发学习中遇到一些问题,现在记录如下。 首先看一下如何创建一个Flutter module. 在Android原生项目的同级目录使用如下命令创建一个flutter_module

flutter create -t module flutter_module

之后会有如下的输出:

➜  ~ flutter create -t module flutter_module
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Creating project flutter_module... androidx: true
  flutter_module/test/widget_test.dart (created)
  flutter_module/flutter_module.iml (created)
  flutter_module/.gitignore (created)
  flutter_module/.metadata (created)
  flutter_module/pubspec.yaml (created)
  flutter_module/README.md (created)
  flutter_module/lib/main.dart (created)
  flutter_module/flutter_module_android.iml (created)
  flutter_module/.idea/libraries/Flutter_for_Android.xml (created)
  flutter_module/.idea/libraries/Dart_SDK.xml (created)
  flutter_module/.idea/modules.xml (created)
  flutter_module/.idea/workspace.xml (created)
Running "flutter pub get" in flutter_module...                      4.9s
Wrote 12 files.

All done!
Your module code is in flutter_module/lib/main.dart.

如上就表示创建成功了。

如果用最新版的Flutter SDK,通过上述命令创建的Flutter_module默认支持的是AndroidX,这一点一定要注意。

接下来在Android原生项目中进行导入,

  1. 在settings.gradle中添加如下代码:

    setBinding(new Binding([gradle: this]))

    evaluate(new File( settingsDir.parentFile, //flutter_module即为创建的模块名称 'flutter_module/.android/include_flutter.groovy' ))

2.在app/build.gradle文件中dependencies节点下添加

implementation project(':flutter')

最后,通过Android Studio中的sync now 进行同步就行了,同步完成之后重新运行android原生项目即可。 问题一 原生导入flutter_module后报错AndroidX 解决方法,使原生项目支持Androidx

  1. 在项目的gradle.properties文件添加如下代码,开始androidX支持

    android.useAndroidX=true android.enableJetifier=true

  2. 修改MainActivity的导入文件

    将import android.support.v7.app.AppCompatActivity; 修改为 import androidx.appcompat.app.AppCompatActivity;

3.修改app/build.gradle文件中dependencies

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
修改为
implementation 'androidx.appcompat:appcompat:1.0.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.2'

问题二 报错:Error:com.android.builder.dexing.DexArchiveBuilderException

通过查看flutter_module项目的app/build.gradle文件代码可以看到在Android根节点下有如下代码

compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }

所以在原生项目的app/build.gradle文件的android节点下添加如下代码,即可解决这个问题。

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

相信2020年Flutter和ReactNative在跨平台开发中齐头并进,双雄逐鹿。

欢迎大家关注我的公众号:君伟说。分享开发技术,开源信息以及职场感悟。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
Flutter与Android混合开发及Platform Channel的使用
1.相对于单独开发Flutter应用,混合开发对于线上项目更具有实际意义,可以把风险控制到最低,也可以进行实战上线。所以介绍集成已有项目2.混合开发涉及原生Native和Flutter进行通信传输,还有插件编写,所以介绍两端通信FlutterPlatformChannel的使用WanAndroid客
Stella981 Stella981
3年前
DStack
混合开发这项技术由来已久,目前市面上主流的有Hybird,ReactNative,Weex,Flutter等。其中,Flutter以他独有的实现方式,优秀的性能,成为近两年最火的混合开发方案,我们学而思网校1v1客户端团队也是比较早的开始了Flutter技术的研究,在学而思网校1v1家长端和学而思网校1v1教师端两个App进行了大规模的实践尝试,由此也沉淀出
田楷 田楷
3星期前
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
使用ArkTs开发Flutter鸿蒙平台插件本文讲述如何开发一个Flutter鸿蒙插件,如何实现Flutter与鸿蒙的混合开发,以及双端消息通信。Flutter侧,编写MethodChanneldartconstMethodChannelmethodCha
田楷 田楷
3星期前
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter实战:混合开发鸿蒙Flutter混合开发主要有两种形式。1.基于har将fluttermodule打包成har包,在原生鸿蒙项目中,以har包的方式引入。其优点是主项目开发者可以不关注Flutter实现,不需要安装配置Flutter开发环
田楷 田楷
3星期前
鸿蒙Flutter实战:10-常见问题集合
鸿蒙Flutter实战:10常见问题集合1.学习路径应该是怎样的,需要掌握哪些技术才具备鸿蒙Flutter开发能力1.1学习和掌握Flutter开发技术,这块需要在Flutter社区学历1.2学习鸿蒙基础概念和知识,推荐学习,,,2.MatePad应用适配