跨平台移动开发 Flutter 初体验安装flutter安装VSCode新建Flutter工程Tips

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

image

安装flutter

官网flutter.io

当然跟着我做也一样

安装sdk

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

一次执行下面几条命令

git clone -b beta https://github.com/flutter/flutter.git

export PATH=`pwd`/flutter/bin:$PATH

flutter 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}/tools
export 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 就行了

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网开发者交流社区

SpringBoot配置文件的加载位置

21320
来自专栏惨绿少年

ansible服务部署与使用

第1章 ssh+key实现基于密钥连接(ansible使用前提) 说明:    ansible其功能实现基于SSH远程连接服务 使用ansible需要首先实现...

56300
来自专栏Coding迪斯尼

java开发操作系统:不锁死控制台的加载用户进程

13920
来自专栏Porschev[钟慰]的专栏

Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识

前言   前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识!   主要是些基础的东西...   如何去创建...

36170
来自专栏吴柯的运维笔记

如何用Rysnc实现数据同步?

Rsync(remote sync) 是UNIX及类UNIX平台一款数据镜像备份软件,它不像FTP等其他文件传输服务那样需要进行全备份,Rsync可以根据数据...

421130
来自专栏IMWeb前端团队

让chrome插件在手机上跑起来

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 创建一个chrome的插件,并让这个插件能够作为一个app,运行在终...

22450
来自专栏Android干货

Android项目实战(二十四):项目包成jar文件,并且将工程中引用的jar一起打入新的jar文件中

292100
来自专栏北京马哥教育

用 30 个实例完全解读 TOP 命令

19250
来自专栏BestSDK

37个TOP实例命令,超过一半你肯定都没见过

1. Top 命令输出 首先,让我们了解一下输出。top命令会显示系统的很多信息。我们需要理解不同部分输出的意义:默认运行时,top命令会显示如下输出: ? 前...

33860
来自专栏向治洪

openfire环境搭建

1、下载源代码:http://www.igniterealtime.org/downloads/source.jsp ? 2、把源代码解压出的openfire_...

23250

扫码关注云+社区

领取腾讯云代金券