跨平台移动开发 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 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Javascript缓存投毒学习与实战

0x00 起因 不久前@三好学生师傅买了一个wooyun wifi,然后聊到了缓存投毒: ? 然后看到wooyun wifi的这个说明: 默认情况下该功能附带缓...

4255
来自专栏向治洪

openfire环境搭建

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

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

SpringBoot配置文件的加载位置

1452
来自专栏云计算教程系列

CentOS 7如何设置uWSGI和Nginx提供Python应用服务

在本指南中,我们将设置一个由uWSGI提供服务的简单WSGI应用程序。我们将使用Nginx Web服务器作为应用程序服务器的反向代理,以提供强大的连接处理。我们...

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

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

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

3257
来自专栏青玉伏案

Swift3.0服务端开发(三) Mustache页面模板与日志记录

本篇博客主要介绍如果在Perfect工程中引入和使用Mustache页面模板与日志记录系统。Mustache页面模板类似于PHP中的smarty模板引擎或者Ja...

2466
来自专栏Android干货

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

28310
来自专栏你不就像风一样

[原创]颠覆传统网站开发模式的web服务器

以Java web举例,现在的网站系统开发模式,对于web端和服务端的数据交互以及页面渲染,无外乎两种:

1212
来自专栏惨绿少年

ansible服务部署与使用

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

4910
来自专栏Zachary46

Android使用Jenkins自动化构建测试打包apk

Jenkins这东西搭建起来真是一点也不省心啊,看着别人的教程摸着石头过河,配置的东西有点多啊,稍有不慎,就构建不成功啦!即使步骤跟别人一样也会报各种乱七八糟的...

4852

扫码关注云+社区