Flutter 初探原生混合开发

news2024/11/20 18:37:50

转载请注明出处:https://blog.csdn.net/kong_gu_you_lan/article/details/131320733?spm=1001.2014.3001.5501

本文出自 容华谢后的博客

0.写在前面

现如今跨平台技术被越来越多的开发者提起和应用,从最早的Java到后来的RN、Weex,到现在的Compose、Flutter,大前端已经成为了趋势,很多公司为了节省成本,包括一些大厂已经在Android和iOS平台上使用了Flutter技术,效果还可以,贴近原生但是还会有一些卡顿的问题,好在Flutter目前还在不断的优化更新,希望越来越好吧。

Flutter从2017年发布到现在已经历经了6年,如果你现在创建一个Flutter项目,会发现已经支持了Android、iOS、Linux、MacOS、Web、Windows六大主流的操作系统平台,我以前经常会写一些在Windows上运行的小工具,使用java写的不仅复杂界面也不好看,用Flutter试了试,好像发现了新大陆,在PC上运行十分流畅,还直接支持在其他平台上运行,感觉十分不错,这也让我对未来Flutter的发展抱有期待。

Flutter开发有两种方式,一种是纯Flutter开发,一种是Flutter+原生的开发方式,正如上面所说的,Flutter在PC上运行十分流畅,可能是PC配置比较高的原因,但是在客户端上的运行效果却不如人意,启动有点慢,一些复杂列表有点卡,一些底层功能的API不支持,这就需要原生开发的介入,小部分原生+大部分Flutter开发可能是后续比较主流的一种开发方式。

本文主要讲的是在Android平台上,与Flutter混合开发的一些步骤,一起来看下吧。

1.准备

1.1 先贴下我用的开发环境:

  • 操作系统:Windows 10

  • IDE:Android Studio Flamingo

  • Android SDK:33

  • Gradle:8.0.2

  • JDK:17.0.7

  • Flutter:3.10.4

1.2 下载Flutter SDK

下载地址:https://docs.flutter.dev/get-started/install

是个压缩包,解压到你存放开发环境的目录,然后在AS中打开 File->Settings->Languages&Frameworks,在里面配置一下SDK的路径就可以了。

1.3 配置环境变量

和Jdk一样,为了使用方便,还需要配置下环境变量,设置->关于->高级系统设置->环境变量,找到用户变量,在Path里面新增一个路径 flutter SDK的路径\bin,前面如果有值的话,别忘了在前面加个英文分号进行分割。

1.4 检测flutter状态

为了验证Flutter是否安装成功,打开cmd命令行,输入 flutter doctor 进行检测:

flutter doctor

如果出现上面的提示,是因为Android证书的问题,再输入 flutter doctor --android-licenses 进行修复:

不支持Jdk 1.8版本

可能会出现这样的错误,这个是因为JDK版本有点低,现在大部分还是用的1.8版本,安装配置下JDK 17就可以,再运行下flutter doctor,已经可以了:

flutter doctor通过

1.5 安装Flutter插件

在AS中打开 File->Settings->Plugins,安装下面两个插件:

插件

到这里,所有的准备工作就完成了,接下来去创建项目。

2.创建项目

首先创建一个标准的Android项目,在此基础上,打开 File->New->New Flutter Project 创建一个Flutter Module:

创建Flutter Module

注意Project location要选择你当前的工程目录,Project types选择Module,然后CREATE,看下创建好的目录结构:

目录结构

3.项目Flutter配置

打开项目根目录的settings.gradle配置文件,增加下面的配置:

// Flutter配置
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir,
        'flutter_lib/.android/include_flutter.groovy'
))
include ':flutter_lib'

然后再修改下dependencyResolutionManagement,把FAIL_ON_PROJECT_REPOS 改成 PREFER_SETTINGS,增加flutter的maven仓库地址:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        google()
        mavenCentral()
        maven {
            allowInsecureProtocol = true
            url "http://download.flutter.io"
        }
    }
}

找到flutter_lib->.android->Flutter->build.gradle,在android属性增加namespace,这个是Gradle 8.0新增的特性:

android {
    namespace 'com.example.flutter_lib'
    compileSdkVersion flutter.compileSdkVersion
    ndkVersion flutter.ndkVersion
    ...
}

找到主app的build.gradle,在dependencies中引用flutter模块,注意模块名称是flutter,无论你创建的Moudle是什么名字,这里的名字都是flutter:

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

4.开始使用

在清单文件中,增加下面的activity标签,注意这个Activity是SDK中自带的,不需要自己手动创建:

<application>
    ...

    <activity
        android:name="io.flutter.embedding.android.FlutterActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize" />
</application>

在MainActivity写个跳转方法进行测试:

val intent = FlutterActivity
    .withNewEngine()
    .initialRoute("home")
    .build(this)
startActivity(intent)

看下效果:

跳转效果

可以看到在点击跳转按钮后,有一个明显的停顿,这是因为初始化Flutter引擎比较慢导致的,那就提前初始化试试,在Application中初始化引擎:

class App : Application() {

    override fun onCreate() {
        super.onCreate()
        // 创建 Flutter 引擎
        val flutterEngine = FlutterEngine(this)
        // 指定要跳转的flutter页面
        flutterEngine.navigationChannel.setInitialRoute("main")
        flutterEngine.dartExecutor.executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault())
        // 这里做一个缓存,可以在适当的时候执行它,例如app里,在跳转前执行预加载
        val flutterEngineCache = FlutterEngineCache.getInstance()
        flutterEngineCache.put("default_engine_id", flutterEngine)
    }
}

然后使用已经提前创建后的引擎再次跳转:

val intent = FlutterActivity
    .withCachedEngine("default_engine_id")
    .build(this)
startActivity(intent)

看下效果,已经非常丝滑了:

优化后跳转效果

5.写在最后

GitHub地址:https://github.com/alidili/FlutterDemo

到这里,Flutter与原生混合开发的基本步骤就介绍完了,如有问题可以给我留言评论或者在GitHub中提交Issues,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/669343.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每日学术速递6.11

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Video-ChatGPT: Towards Detailed Video Understanding via Large Vision and Language Model 标题&#xff1a;Video-ChatGPT&#xff1a;通过大型视觉和语言模型实现详细的视频理…

SCI论文插图怎么做?有这一篇文章就够了

SCI插图的整体要求 SCI杂志种类很多&#xff0c;对插图的要求也各有不同&#xff0c;但是以下几条是通用的&#xff1a; 1. 插图尺寸要符合SCI期刊要求 2. 同篇文稿插图中文字须统一字号及字体 3. 须提交SCI期刊指定文件类型的插图 4. 插图文件命名须符合SCI期…

C++基础(15)——STL常用算法(遍历和查找)

前言 本文介绍了C中STL常用遍历和查找算法。 9.1&#xff1a;常用遍历算法&#xff08;for_each、transform&#xff09; 9.1.1&#xff1a;foreach for_each&#xff1a;遍历容器&#xff0c;transform&#xff1a;搬运一个容器中的数据到另一个容器中 for_each中使用普通…

自建iOS消息推送服务Bark

老苏的 DSM6.17 系统恢复之后&#xff0c;发现丢了一些套件&#xff0c;在安装 phpMyAdmin 套件时&#xff0c;显示需要用到 PHP7.4 但是在套件里搜索却只有 PHP7.3 从 https://archive.synology.cn/download/Package/PHP7.4 下载了最低的 7.4.9-0003 手动安装时居然显示 DSM6.…

Java进程调度的基本过程(详细易理解)

目录 一.什么是进程? 二.进程是如何创建的 三.进程如何调度的 优先级: 状态: 记账信息: 上下文: 线程是什么: 为什么要有线程: 坏处: 一.什么是进程? 了解这个问题之前,我们需要先打开我们桌面上的的学习资料 啪的一下,很快啊,点双击学习资料.exe之后,在后台(ctrl…

spring security oauth2 整合 JWT

前言 在这个基础上&#xff0c;进行整合。 spring security oauth2学习 -- 快速入门_本郡主是喵的博客-CSDN博客 1.jwt的一般使用 先把 reids,common-pools 等依赖删掉。 删掉redis的下相关配置 1.1 导入依赖 <!--jjwt--><dependency><groupId>io.json…

正则表达式(2)

文章目录 正则表达式一.正则表达式1.含义2.通配符2.1通配符含义作用2.2常见的通配符 3.元字符&#xff08;字符匹配&#xff09;4.表示次数5.位置锚定6.分组或其他 二.扩展正则表达式1.表示次数2.举例 正则表达式 一.正则表达式 1.含义 &#xff08;1&#xff09;是一种特殊…

基于Java智慧城市实验室主页系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…

一、枚举类型——常量特定方法

Java 的枚举机制可以通过为每个枚举实例编写不同的方法&#xff0c;来赋予它们不同的行为。要实现这一点&#xff0c;你可以在枚举类型中定义一个或多个抽象方法&#xff0c;然后为每个枚举实例编写不同的实现&#xff0c;例如&#xff1a; ConstantSpecificMethod.java import…

使用 TensorFlow.js 将机器学习引入您的 Web 应用程序

如何使用 TensorFlow.js 在您的 Web 应用程序中实施机器学习 原文作者: Abhay Singh Rathore 机器学习 (ML) 不再是一个崇高、遥不可及的概念。借助 TensorFlow.js 等库&#xff0c;开发人员现在可以将 ML 整合到他们的 Web 应用程序中。例如&#xff0c;您可以创建一个系统&am…

革新智造业丨云和恩墨数据智能产品 zAIoT 将工控设备KPI分析性能提升百倍

点击关注 随着智能制造业的迅猛发展&#xff0c;工控设备在生产过程中起到至关重要的作用。为了确保生产效率和产品质量的提高&#xff0c;企业需要对工控设备进行全面的分析和评估。 工控设备KPI是指在生产线/车间设备的运行和维护过程中&#xff0c;需要监控的关键指标参数&a…

Vue----Vue的模板语法

【原文链接】Vue----Vue的模板语法 Vue 模板语法的描述 Vue使用一种基于HTML的模板语法&#xff0c;使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上&#xff0c;所有的Vue模板都是语法层面合法的HTML&#xff0c;可以被符合规范的浏览器和HTML解析器解析 文本插值 …

Java性能权威指南-总结16

Java性能权威指南-总结16 线程与同步的性能线程池与ThreadPoolExecutor设置最大线程数设置最小线程数 线程与同步的性能 能够轻松编写多线程程序也是Java的一个标志性特征。Java性能方面的吸引力显而易见&#xff1a;如果有两个CPU可用&#xff0c;那么一个应用能够完成的工作…

计算机网络笔记(更新中)

本文是个人笔记&#xff0c;都是概念&#xff0c;没基础不建议看。 绪论 计算机网络的定义 最简单的定义&#xff1a;计算机网络是一些互相连接的、自治的计算机的集合因特网&#xff08;Internet&#xff09;是“网络的网络” 计算机网络的组成&#xff08;物理组成&#x…

STM32单片机(七)ADC模拟数字转换器----第一节:ADC模数转换器

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

autoDL上A100运行wiki出错:NVIDIA A100-PCIE-40GB(最后安装好torch+dgl了);学校服务器加2.X版本pytorch

1、A100运行wiki出错&#xff1a;NVIDIA A100-PCIE-40GB with CUDA capability sm_80 is not compatible with the current PyTorch installation. The current PyTorch install supports CUDA capabilities sm_37 sm_50 sm_60 sm_70. If you want to use the NVIDIA A100-PCIE…

CTFshow-pwn入门-pwn26-pwn28

什么是ASLR 大多数的攻击都基于这样一个前提&#xff0c;即攻击者知道程序的内存布局&#xff0c;需要提前知道shellcode或者其他一些数据的位置。因此&#xff0c;引入内存布局的随机化能够有效增加漏洞利用的难度&#xff0c;其中一种技术就是ASLR&#xff08;Address Space…

Qt颜色、文件、字体对话框

项目目录 界面 一、颜色对话框 QColor color QColorDialog::getColor(QColor(255,0,0));qDebug()<<"r"<<color.red()<<" g "<<color.green()<<" b "<<color.blue(); 二、文件对话框 //文件对话框QString…

《网络安全0-100》-网络攻击方式

网络攻击方式 DoS DDoS攻击 DoS攻击和DDoS攻击都是网络攻击的一种&#xff0c;它们的区别如下&#xff1a; DoS攻击(Denial of Service&#xff0c;拒绝服务攻击)&#xff1a;指攻击者通过向目标计算机或网络发送大量的合法请求&#xff0c;占用其网络资源和带宽&#xff0c;…

Java API

目录 1.JSON 2.多线程 3.网络编程 1.JSON &#xff08;1&#xff09;定义&#xff1a; 1.轻量级的文本数据交换格式 2.具有自我描述性【看到某个JSON数据就能知道它的特点】 3.比XML传输速度快【跨平台】 (2)语法规则&#xff1a; 1.语法&#xff1a; 2.构成要素&#xff…