如何在原生项目中集成flutter

两个前提条件:

  • 从flutter v1.17版本开始,flutter module仅支持AndroidX的应用
  • 在release模式下flutter仅支持一下架构:x84_64、armeabi-v7a、arm6f4-v8a,不支持mips和x86;所以引入flutter前需要在app/build.gradle下配置flutter支持的架构
java 复制代码
android {
    
    defaultConfig {

        ndk {
            // armeabi:已经淘汰(0%)
            // armeabi-v7a:曾经主流的架构平台(20%)
            // arm64-v8a:目前主流架构平台(80%)
            abiFilters "armeabi-v7a", "arm64-v8a"
        }
    }
}

1、源代码集成

将flutter集成到现有的Android应用中主要步骤如下:

  • 创建flutter module
  • 为已存在的Android应用添加flutter module依赖(setting.gradle中加入代码)
  • 在需要的module引入
  • 添加Java 8编译选项
  • 在kotlin中调用flutter module
  • 编写dart代码

创建flutter module

//--org后面为域名 flutter_module为module名称

flutter create -t module --org com.example.module flutter_module

生成module的目录结构:

为已存在的Android应用添加flutter module依赖:

打开Android项目的setting.gradle添加如下代码:

bash 复制代码
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))

//可选,作用:可以在当前AS的project下显示flutter_module以方便查看和编写Dart代码
include ':flutter_module'
project(':flutter_module').projectDir = new File('../flutter_module')

在需要的module引入

Kotlin 复制代码
//asproj/app/build.gradle
implementation project(':flutter')

添加Java 8编译选项

因为flutter的Android engine是用来Java8的特性,所以在引入flutter时需要配置你的项目都Java8编译选项(app/build.gradle)

Kotlin 复制代码
android {
    compileOptions {
        sourceCompatibility = 1.8
        targetCompatibility = 1.8
    }
}

在kotlin中调用flutter module,抽取一个基类HiFlutterFragment如下代码:

Kotlin 复制代码
package org.devio.`as`.proj.common.flutter

import android.content.Context
import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import io.flutter.embedding.android.FlutterTextureView
import io.flutter.embedding.android.FlutterView
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.engine.dart.DartExecutor
import kotlinx.android.synthetic.main.fragment_flutter.title
import org.devio.`as`.proj.common.R
import org.devio.`as`.proj.common.ui.component.HiBaseFragment

abstract class HiFlutterFragment : HiBaseFragment() {

    private lateinit var flutterEngine: FlutterEngine

    protected var flutterView: FlutterView? = null

    override fun onAttach(context: Context) {
        super.onAttach(context)
        flutterEngine = FlutterEngine(context)

        flutterEngine.dartExecutor.executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault())
    }

    override fun getLayoutId(): Int {
        return R.layout.fragment_flutter
    }

    fun setTitle(titleStr: String) {
        title.text = titleStr
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        (layoutView as ViewGroup).addView(createFlutterView(activity!!))
    }

    override fun onStart() {
        flutterView!!.attachToFlutterEngine(flutterEngine!!)
        super.onStart()
    }

    override fun onResume() {
        super.onResume()
        //for flutter >= v1.17
        flutterEngine.lifecycleChannel.appIsResumed()
    }

    override fun onPause() {
        super.onPause()
        flutterEngine.lifecycleChannel.appIsInactive()
    }

    override fun onStop() {
        super.onStop()
        flutterEngine.lifecycleChannel.appIsPaused()
    }

    override fun onDetach() {
        super.onDetach()
        flutterEngine.lifecycleChannel.appIsDetached()
    }

    private fun createFlutterView(context: Context): FlutterView {
        //使用FlutterTextureView来进行渲染,以规避fluttersurfaceview压后台回来后界面被复用的问题
        val flutterTextureView = FlutterTextureView(activity!!)
        flutterView = FlutterView(context, flutterTextureView)
        return flutterView!!
    }


}

调试dart代码

1.关闭app(这一步很关键)

2.attach到Android项目中

  • 使用命令行:然后切换到flutter_module目录下运行flutter attach,当有多个设备时用如:flutter attach -d 'emulator-5554'
  • 不使用命令行:

3.启动app

2、maven****仓库集成方式(详细步骤耐心等待)

这种集成方式不需要所有团队成员都安装flutter 环境。只需要 flutter 开发者在开发完功能模块。通知 Native 开发着更新一下依赖。就可以完成功能的更新。这样的话Native 开发者并不会有 flutter 的代码,并不知道具体实现方式。

将flutter集成到现有的Android应用中主要步骤如下:

相关推荐
Geek_Vison16 小时前
保险APP已经用了Flutter,还能接入小程序吗?
flutter·小程序·uni-app·mpaas·小程序容器
FungLeo17 小时前
成为全栈·Flutter App 篇·go_router 与四 Tab App Shell:保留导航状态、深链和登录回跳
flutter·移动开发·成为全栈·go_router·路由设计·深链接
m0_7381858217 小时前
Flutter 鸿蒙化实战:screen_protector 适配 OpenHarmony,防截屏/防泄露
flutter·华为·harmonyos·鸿蒙
梦想的颜色1 天前
【编程实战】AI 时代 APP 开发全栈硬核指南:技术选型 + AI 架构 + 模型落地全维度决策
python·flutter·react native·react.js·ai·桌面应用·milvus
yuanlaile2 天前
2026年全新Flutter 跨平台开发全栈学习资料整理
flutter·getx·鸿蒙 next·flutter开发鸿蒙·flutter入门实战·flutter全栈
恋猫de小郭2 天前
Genkit Dart 1.0 发布,Flutter 原生的 AI Agent 终于完整了
android·前端·flutter
第10086个小白2 天前
flutter桌面端打包方式(Inno Setup Compiler)版本
前端·flutter
陆断枫3 天前
Flutter 3.47 动画引擎盘点:Impeller 全平台,和那些"新特性"
flutter
程序员老刘3 天前
Flet 1.0 思路很好,可惜来晚了
flutter·ai编程·客户端
m0_738185823 天前
Flutter 鸿蒙化实战:qr_code_scanner_plus 适配 OpenHarmony,二维码扫描
flutter·华为·harmonyos·鸿蒙