跨平台移动开发 Flutter 初体验

作者 : 开心源码 本文共1620个字,预计阅读时间需要5分钟 发布时间: 2022-05-11 共65人阅读

原价一直都是在做iOS的原生开发,Android也是兴趣平平,曾经也是很想学习下RN的,无奈web前台跟js的少量相关内容实在不熟习,直到这次的flutter的出现 让我重新有股学习的冲动。so,本文比较倾向于iOS的调试,所有的内容都是建立在对iOS原生开发比较熟习的基础上。

image

安装flutter

官网flutter.io

当然跟着我做也一样

安装sdk

打开 Terminal 先cd到你需要安装的目录下, 我这里直接在 ~ 个人目录下

一次执行下面几条命令

git clone -b beta  flutter/flutter.gitexport PATH=`pwd`/flutter/bin:$PATHflutter doctor

将flutter增加到环境变量中

vim ~/.brash_profile

//这个肯定要增加 export PATH=/Users/使用户名/xxxxxx/flutter/bin:$PATH
//这个是配置Android相关的 没有Android studio 或者者 只需测试iOS的话 这几个能先不论export ANDROID_HOME="/Users/使用户名/Documents/android_sdk" //android sdk目录,替换为你自己的就可export PATH=${PATH}:${ANDROID_HOME}/toolsexport PATH=${PATH}:${ANDROID_HOME}/platform-tools

执行source ~/.brash_profile

最后检查下echo $PATH 看看 能否已经增加到环境变量中

image

flutter doctor 命令是使用来检查依赖环境

最后结果是这样的

image

按照他的提醒把缺少的内容安装一下,我这里就主要安装iOS相关的几样东西先

 brew install --HEAD libimobiledevice brew install ideviceinstaller brew install ios-deploy

pod 大家应该都有装

但是在安装上面三个东西的时候brew居然给我报错了

/usr/local/include is not writable.

这是什么鬼。。。查了很多方法
最后 处理方法 居然发现 /usr/local/ 目录下居然没有include这个目录,手动增加一个include目录处理!!!

link完成后再运行flutter doctor 看到iOS这块没问题就OK了 (Android暂时不论了)

image

安装VSCode

考虑到对Android studio 不是很熟习,所以这次选择了 vscode

直接在官网下载vscode

image

安装flutter插件

打开vscode
按快捷键 cmd + shift + p 或者者 菜单栏选择 view – command palette

输入 install 选择插件安装

image

先安装 flutter 的语言包 dart

image

接下来继续安装 flutter 插件

image

新建Flutter工程

打开vscode cmd + shift + p 输入 flutter 选择 new project

image

这时候可可以会提醒 找不到 flutter sdk

image

手动导入下 (我是安装在 ~目录下直接选择flutter目录即可以)

输入新建的工程名,选择存放路径

这时候就会自动生成相关工程文件

这是模板工程,选择模拟器就可以直接跑了

先打开模拟器 open -a Simulator

这是最下角即可以选择刚刚打开的模拟器

image

点击debug 直接运行

image

模拟器就跑起来了,效果还不错~

image

Tips

vscode 默认创立的 xcode工程是 OC版本的
假如想要创立swift 版本的话 就不可以通过vscode 来创立

需要直接命令行创立

flutter create -i swift ProjectName

这时候就是使用swift的工程了

image

kotlin 也一样 加参数-a kotlin 就行了

今后会陆续再升级更具体的练手项目,敬请期待吧~~~

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 跨平台移动开发 Flutter 初体验

发表回复