近几天工作比较闲,就看了下最近很火的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
- 下载Flutter
我不建议在官方下载安装包,手动下了几次都都问题,推荐使用git
官网地址: Flutter中文网。
git clone -b beta https://github.com/flutter/flutter.git
- 配置flutter
在.bash_profile添加如下字段，
pwd/flutter是你的flutter路径
export PATH=`pwd`/flutter/bin:$PATH
三、运行Flutter
如果是通过终端(git)安装的,那么当前就是Flutter目录,先运行:
flutter doctor
因为我主用xcode 主要看iOS错误(前提是安装好xcode以及配置好模拟器)
vscode只要安装了就没什么大问题。
网上常见的错误：
brew未安装或者未识别:
- brew install --HEAD libimobiledevice
- brew install ideviceinstaller
- cocoapods未安装
还有其它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官网有很详细的文档,慢慢学习吧~
网友评论