希望
读书笔记

Flutter初体验-VS Code环境搭建

4 min read

Flutter是Fuchsia的开发框架，是一套移动UI框架，可以快速在iOS、Android以及Fuchsia上构建高质量的原生用户界面。 目前Flutter是完全免费、开源的，GitHub地址。其官方编程语言为Dart，也是一门全新的语言。Flutter Live 2018 上，Google 宣布 Flutter 1.0 正式发布。

官方介绍的特性：

  • 快速开发：Flutter的热重载可以快速地进行测试、构建UI、添加功能并更快地修复错误。

  • 富有表现力，漂亮的用户界面：自带的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果。

  • 响应式框架：使用Flutter的现代、响应式框架，和一系列基础widget，轻松构建您的用户界面。

  • 原生性能：Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。

1、下载Flutter SDK

https://flutter.io/docs/get-started/install/macos

声明 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL 两个环境变量，执行如下两行命令，是为了让 Flutter 在安装过程中使用国内的镜像：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2、配置环境变量

下载sdk后， 我将其解压到了/usr/local/flutter/， 将sdk添加到环境变量中

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

更新环境变量

source ~/.zshrc

验证配置是否正确

flutter docter
shlock: open(/usr/local/flutter/bin/cache/shlock4177): Permission denied
shlock: open(/usr/local/flutter/bin/cache/shlock4179): Permission denied
shlock: open(/usr/local/flutter/bin/cache/shlock4181): Permission denied
shlock: open(/usr/local/flutter/bin/cache/shlock4183): Permission denied
shlock: open(/usr/local/flutter/bin/cache/shlock4185): Permission denied

修改flutter文件夹的拥有者

sudo chown -R $USER /usr/local/flutter

再次执行flutter doctor正常：

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.1 18B75, locale en-CN)

3、配置VS Code

  • 启动VS Code

  • 调用View> Command Palette

  • 输入"install", 选择Extensions: Install Extension action

  • 在搜索库输入"flutter"， 搜索结果中选择"Flutter"， 点击 “Install”

  • 选择"OK"， 重启VS Code

  • 在View>Command Palette中输入doctor， 选择"Flutter: Run Flutter Doctor"， 查看OUTPUT中的输出环境是否有问题

    配置完成！

{
    "message": "Unauthorized", 
    "error_code": 10000, //错误代码
    "status_code": 401 //401表示未授权
}
Last updated on 2018-12-09