Flutter

Flutter的安装(Mac)

2019-03-12  本文已影响0人  亚洲醋王丶

近几天工作比较闲,就看了下最近很火的Flutter,看完之后瞬间感觉很强大,心痒的不行,就去捣鼓了一番,中间也踩了不少坑,也参考了很多文章,终于配置好了T_T,这里面就总结一下问题吧。

一、介绍

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

二、安装Flutter

vim ~/.bash_profile  打开或者创建用来配置环境变量
export PUB_HOSTED_URL=https://pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
git clone -b beta https://github.com/flutter/flutter.git

在.bash_profile添加如下字段,pwd/flutter是你的flutter路径

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

三、运行Flutter

如果是通过终端(git)安装的,那么当前就是Flutter目录,先运行:

flutter doctor

因为我主用xcode 主要看iOS错误(前提是安装好xcode以及配置好模拟器)
vscode只要安装了就没什么大问题。

网上常见的错误:

brew未安装或者未识别:

还有其它brew问题,终端中的错误都有提示,一步步安装就好,忘了截图了...

我的brew其实已经安装了,只是环境变量出了问题少配置一个,会出现这个错误:
Warning: /usr/local/bin is not in your PATH,只要在.bash_profile中加入一句话OK:

export PATH=/usr/local/bin:$PATH

现在重新在flutter目录下运行 flutter doctor,除了Android,都没问题了,可以尝试去写一个flutter应用了~

image.png

四、vscode示例

打开vscode安装两个插件:

dart code
flutter
image.png image.png

安装好这两个插件后,在vscode创建flutter项目(shift+command+p)

image.png

等待几秒...

image.png

从官方copy过来的代码,运行我没找到快捷键,可能是我vscode配置有点问题,我在终端中演示:
cd到你创建的flutter目录执行:

flutter run

如果用的是模拟器的话都能直接跑起来,但是用真机调试的话要先用xocde打开这个项目,配置后你的App ID后,才能使用指令运行。

终端运行:


image.png

r的话就是热重载了,改完代码后保存,在终端输入r就能看到明显变化,q的话就是重启生效。

放一张模拟器运行效果图:
如果没有运行过xcode的话,就用命令打开模拟器吧:

open -a Simulator
Simulator Screen Shot - iPhone X - 2019-03-12 at 16.54.52.png

初次安装使用就到这里了,如有错误请指正,flutter官网有很详细的文档,慢慢学习吧~

上一篇下一篇

猜你喜欢

热点阅读