在原生App中嵌入Flutter

本文参考文档Add Flutter to existing apps。

首先有一个可以运行的原生项目
第一步:新建Flutter module

Terminal进入到项目根目录,执行flutter create -t module ‘module名字’例如:flutter create -t module flutter-native

执行完毕,就会发现项目目录下生成了一个module

第二步:同步Flutter module依赖

进入到新生成的Flutter module目录下的.android目录下,命令是cd .android/,然后执行gradlew flutter:assembleDebug,mac下./gradlew flutter:assembleDebug

这过程根据网络情况,可能有点长。

结束之后在.android/Flutter/build/outputs/aar/目录下会生成flutter-debug.aar

第三步:设置JDK版本

在app的build.gradle文件中加入:

compileOptions { sourceCompatibility 1.8 targetCompatibility 1.8 }
第四步:依赖Flutter module

在settings.gradle中加入

include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'FlutterNativeApplication/flutter_native/.android/include_flutter.groovy'
))

注意:最后一个参数最好写全路径!

在app/build.gradle中

dependencies {
    ……
    implementation project(':flutter')
}

到此准备过程结束,写代码测试一下,我使用的是Fragment方式。当然也有View的方式。

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
        setContentView(R.layout.activity_main)
        val tx = supportFragmentManager.beginTransaction()
        tx.replace(R.id.content, Flutter.createFragment("route"))
        tx.commit()
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>

</android.support.constraint.ConstraintLayout>

更多Flutter资料分享欢迎Android工程师朋友们加入安卓开发技术进阶互助:856328774免费提供安卓开发架构的资料(包括Fultter、高级UI、性能优化、架构师课程、 NDK、Kotlin、混合式开发(ReactNative+Weex)和一线互联网公司关于Android面试的题目汇总。
![](https://img-blog.csdnimg.cn/img_convert/9c9552f38a0e777e0991f3366ceb5be4.webp?x-oss-process=image/format,png)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter是一种跨平台的移动应用开发框架,可以使用Dart语言编写代码,并在Android和iOS等多个平台上运行。在Flutter,可以使用原生视图进行开发,以便实现更高级的功能或满足特定的需求。 拷贝原生视图是指将原生平台上的视图组件(如Android上的View或iOS上的UIView)复制到Flutter应用使用。这样做的好处是可以充分利用原生平台的特性和功能,同时保持Flutter应用的跨平台性。 在Flutter进行原生视图的拷贝,通常需要使用Flutter提供的插件或包来实现。这些插件或包可以帮助开发者将原生视图嵌入Flutter应用,并提供访问原生平台的接口。 具体的操作步骤可能会因为不同平台和插件的差异而有所不同,但一般来说,大致可以分为以下几个步骤: 1. 导入插件或包:根据所需的功能和平台选择合适的插件或包,并在Flutter项目导入。 2. 配置插件或包:根据需要,配置插件或包,并在Flutter项目的主配置文件进行必要的设置。 3. 创建原生视图:使用插件或包提供的方法,在Flutter应用的代码创建原生视图对应的组件,并指定需要传递给原生平台的参数和回调函数。 4. 添加原生视图:将创建的原生视图组件添加到Flutter应用的界面的适当位置,以便显示和使用。 5. 处理交互:根据需要,实现与原生视图的交互,包括接收原生平台传递的事件和数据,并根据业务逻辑进行处理。 需要注意的是,在使用原生视图的同时,还需要兼顾Flutter框架的特性和约束,确保原生视图与Flutter应用其他部分的协调和一致性。 通过拷贝原生视图,我们可以在Flutter应用实现更复杂、更灵活的功能,同时利用Flutter框架的优势,实现跨平台的移动应用开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值