如何在原生项目中集成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应用中主要步骤如下:

相关推荐
恋猫de小郭3 小时前
Android 17 + OkHttp 5.5.0 ,全新 ECH 下你的 HTTPS 域名可以请求时被安全隐藏
android·前端·flutter
「、皓子~1 天前
海狸IM 2.1 正式发布
flutter·微服务·golang·electron·开源软件·im·海狸im
里欧跑得慢1 天前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
恋猫de小郭1 天前
AI 时代,一个优化 Flutter 的重复代码工具 Deslop
android·前端·flutter
ljt27249606613 天前
Flutter笔记--envied
前端·笔记·flutter
加农炮手Jinx3 天前
Flutter for OpenHarmony 实战:flutter_animate 声明式动画让 UI 灵动如原生
flutter·ui·华为·harmonyos·鸿蒙
里欧跑得慢3 天前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
里欧跑得慢3 天前
Flutter 三方库 function_tree — 鸿蒙应用开发中的动态数学公式解析与计算神器,实现鸿蒙深度适配下的复杂函数逻辑运行时求值实战(适配鸿蒙 HarmonyOS Next ohos)
android·前端·安全·flutter·华为·harmonyos
吃西瓜的年年3 天前
vue3原理思维导图
vue.js·笔记·flutter