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 在安装过程中使用国内的镜像:

1
2
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添加到环境变量中

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

更新环境变量

1
source ~/.zshrc

验证配置是否正确

1
2
3
4
5
6
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文件夹的拥有者

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

再次执行flutter doctor正常:

1
2
3
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中的输出环境是否有问题

配置完成!

1
2
3
4
5
{
    "message": "Unauthorized", 
    "error_code": 10000, //错误代码
    "status_code": 401 //401表示未授权
}