网站建设资讯

NEWS

网站建设资讯

添加flutter,添加到主屏幕

Flutter环境配置备忘(2022)

官方连接:

创新互联建站是一家专注于成都做网站、成都网站制作、成都外贸网站建设与策划设计,衢江网站建设哪家好?创新互联建站做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:衢江等地区。衢江做网站价格咨询:18982081108

以上4行作用:

第一行,将flutter的相关命令添加到环境中

第二三行,设置使用flutter社区的仓库,这样在使用flutter get时就不会出错了

第四行,配置flutter的git仓库,用于flutter的版本更新,默认使用github上的仓库速度太慢

将以上4行分别在环境变量中添加即可

注意:推荐使用本例中的社区的源,更新更及时,更全面.以前使用 ,在构建web是出现错误,改成社区源后解决.

错误:

Xcode 项目集成flutter

一、cocopods版本升到1.10.0以上

二、podfile添加这些(flutter_module路径和.git路径相同)

三、命令行cd到 flutter_module 下,执行 flutter pub get 

四、pod下面添加“  install_framework "${PODS_ROOT}/../../flutter_module/.ios/Flutter/App.framework"  ” 

Flutter(六)Android与Flutter混合开发(Hybird)

如果我们目前的项目是Android的,但是接下来我们希望部分页面可以使用Flutter进行开发,甚至我们希望在Native页面中嵌入FlutterUI组件,那么我们该如何实现呢?

假设你现在Android项目的目录的结构是这样的

这时候如果你想创建一个Flutter模块,使得Android模块和Flutter模块之间可以进行交互,我们可以通过Android Studio新建一个Flutter Module,具体过程是:File — New — New Module ,之后选择Flutter Module,指定Project Location的路径为

也就是说,最终你的项目结构会是这样的

接下来在Android Module的 build.gradle 文件中添加flutter依赖

先创建一个Flutter页面

这里比较重要的是 window.defaultRouteName 这个字段,这个字段可以接收从Native传递过来的参数 (下文我们会介绍原生传递参数的方法),也就是说通过这个字段我们就可以进行Flutter页面的路由的分发

我们可以直接在Android的 MainActivity 中启动一个 FlutterActivity ,这里的 initialRoute 方法中传递的参数就对应Flutter层的 window.defaultRouteName

注意:需要在 AndroidManifest.xml 注册 FlutterActivity

自己创建一个 FlutterAppActivity 继承自 FlutterActivity

在 MainActivity 中启动 FlutterAppActivity (另外别忘了在 AndroidManifest.xml 中注册 FlutterAppActivity )

两种启动方式的区别

如果单纯只是想打开一个Flutter页面,两种方式实际上基本没有太大区别,第一种方式也许还会更简单一点。但是,在Flutter开发中,我们往往还需要开发一些Native插件供Flutter调用,如果使用复写 FlutterActivity 的方式更有利于我们在 FlutterActivity 中注册我们的Native插件,所以实际开发中一般推荐使用第二种方式

扩展思考

initialRoute 从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的,但是实际上他就是一个字符串,我们不仅仅可以传递一个路由名称,有时候我们也可以通过这个参数传递一串JSON数据,然后在Flutter端进行解析,这样我们就可以通过这个参数做更多的事情

activity_main.xml

FrameLayout 用于承载Flutter组件

MainActivity.java

使用 FragmentManager 将 FlutterFragment 添加到 FrameLayout 容器中

运行结果

上半部分是原生的TextView,下半部分是Flutter的Text组件

本节主要介绍了Native和Flutter之间的页面跳转,以及同一个页面中Native与Flutter组件的组合。接下来会介绍如何编写Android插件与Flutter进行数据交互

iOS与Flutter混合开发

在现有iOS项目中导入Flutter, 需要在Podfile文件中加入

flutter_application_path = '/Users/../flutter_app_module'

load File.join(flutter_application_path,'.ios','Flutter','podhelper.rb')

并对target添加:

install_flutter_engine_pod

install_all_flutter_pods(flutter_application_path)

从上我们可以看到导入Flutter需要依赖Flutter项目中的'.ios'文件夹下的'podhelper.rb'文件,所以在pod install之前,请确认.ios文件夹存在

也许你一开始存在这个文件,但是在执行flutter clean之后,这个文件不见了,不用惊慌, .ios文件夹基本可以通过以下几种方式生成,自行选择:

1. flutter run

2. flutter pub get

3. flutter create .

.ios文件夹生成之后,回到原生项目pod install即可。

友情提示:

在生成.ios的时候,项目中不要存在其他的内层项目(如下截图),那可能会导致你无法生成.ios或者生成的.ios不包含podhelper.rb这个文件,而最终导致你pod install失败。

愉快的开始coding......


当前名称:添加flutter,添加到主屏幕
URL分享:http://cdweb.net/article/hoiges.html