Flutter混合开发踩坑指北

Stella981
• 阅读 748

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
2年前
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
浩浩 浩浩
3年前
Flutter 2.0 下混合开发浅析
多余的前言Flutter2.0发布时,其中最受大家关注之一的内容就是AddtoApp相关的更新,因为除了热更新之外,Flutter最受大家诟病的就是混合开发体验不好。为什么不好呢?因为Flutter的控件渲染直接脱离了原生平台,也就是无论页面堆栈和渲染树都独立于平台运行,这固然给Flutter带来了较好的跨平台体验
浩浩 浩浩
3年前
【Flutter实战】初识Flutter
1.2初识Flutter1.2.1Flutter简介Flutter是Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过Dart语言开发App,一套代码同时运行在iOS和Android平台。Flutter提供了丰富的组件、接口,开发者可以很快地为Flutter添加native扩展。同时Flu
Stella981 Stella981
2年前
Flutter与Android混合开发及Platform Channel的使用
1.相对于单独开发Flutter应用,混合开发对于线上项目更具有实际意义,可以把风险控制到最低,也可以进行实战上线。所以介绍集成已有项目2.混合开发涉及原生Native和Flutter进行通信传输,还有插件编写,所以介绍两端通信FlutterPlatformChannel的使用WanAndroid客
Stella981 Stella981
2年前
Flutter 笔记
最近开发需要,要接触移动端一些东西,所以看一下flutter。因为移动端经常是要做一样事情就是即要有android平台,又要有ios平台,所以,选择了Flutter。为什么不是ReactNative?因为,Flutter字比较少,而且不用打空格,我喜欢。一、安装1.下载2.解压3.设置path4.开始二、
Stella981 Stella981
2年前
DStack
混合开发这项技术由来已久,目前市面上主流的有Hybird,ReactNative,Weex,Flutter等。其中,Flutter以他独有的实现方式,优秀的性能,成为近两年最火的混合开发方案,我们学而思网校1v1客户端团队也是比较早的开始了Flutter技术的研究,在学而思网校1v1家长端和学而思网校1v1教师端两个App进行了大规模的实践尝试,由此也沉淀出
何婆子 何婆子
3个月前
基于 Flutter 3.x 实战跨平台混合开发
基于Flutter3.x实战跨平台混合开发download》chaoxingit.com/1291/在移动应用开发领域,跨平台混合开发成为一种备受关注的技术趋势。Flutter作为一款由Google推出的开源UI工具包,通过单一代码库支持多个平台,为开发者
程昱 程昱
1个月前
基于 Flutter 3.x 仿抖音跨平台混合开发
基于Flutter3.x仿抖音跨平台混合开发download》quangneng.com/1291/基于Flutter3.x的仿抖音跨平台混合开发详解一、引言随着移动互联网的快速发展,跨平台混合开发技术逐渐受到开发者们的青睐。Flutter作为谷歌推出的一
乐和 乐和
1个月前
基于 Flutter 3.x 仿抖音跨平台混合开发
基于Flutter3.x仿抖音跨平台混合开发download》chaoxingit.com/1291/基于Flutter3.x仿抖音跨平台混合开发:探索未来的移动应用开发随着移动设备的普及和互联网技术的发展,移动应用开发已经成为了一个巨大的市场。为了满足不
韦康 韦康
1个月前
基于 Flutter 3.x 仿抖音跨平台混合开发
基于Flutter3.x仿抖音跨平台混合开发download》quangneng.com/1291/Flutter的主要特点包括:快速开发:Flutter提供了丰富的预构建组件和动画库,可以快速构建精美的用户界面。它还具有热重载功能,可以实时查看代码更改的