Flutter 上手攻略 (上)

168 阅读1分钟

搭建 Flutter 开发环境

PS: 本攻略电脑系统是 MacOS, Windows 系统有点差异,后面可能补充。

获取 Flutter SDK

1. 去 flutter 官网下载其最新可用的安装包,

flutter.dev/docs/develo…

注意,Flutter 的渠道版本会不停变动,请以 Flutter 官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去 Flutter github 项目下去下载安装包

github.com/flutter/flu…

2. 解压安装包到你想安装的目录,如:

cd ~/development
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip

3. 添加 flutter 相关工具到 path 中:

export PATH=pwd/flutter/bin:$PATH

pwd 是 flutter 文件路经 此代码只能暂时针对当前命令行窗口设置 PATH 环境变量,要想永久将 Flutter 添加到 PATH 中请参考下面更新环境变量 部分。

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装:

flutter doctor

$ hujinlong@hujinlongdeMacBook-Pro > ~ > flutter doctor
$ Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.9.6-pre.48, on Mac OS X 10.15.1 19B88, locale
    zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.40.2)
[✓] Connected device (1 available)

• No issues found!
 hujinlong@hujinlongdeMacBook-Pro > ~ >

因为我已经安装过了,所以上面需要的都已经打勾。 我们安装上面的提示安装 Xcode 与 Android Studio 二个开发工具。VS Code 是可选。

安装 Xcode

这个比较简单,直接在 App Store 下载安装就可以了。 安装好后,打开一次 Xcode,确保 Xcode 许可协议是通过。

安装 Android Studio

developer.android.google.cn/studio/

官网下载安装,这个比较不容易安装。安装完后,打开安装 Flutter 插件.

菜单栏 Android Studio > Preferences... 打开 找到 Plugins -> Marketplace 在 Search 查找 Flutter , 然后安装就可以了。

配制 Dart SDK

Languages & Frameworks > Dart -> Dart SDK path: 输入 /Users/hujinlong/flutter/bin/cache/dart-sdk

配制 Flutter SDK

Languages & Frameworks > Flutter -> Flutter SDK path: 输入 /Users/hujinlong/flutter

重启后,就可以使用 Android Studio 编写 Flutter 应用程序。

重新运行 flutter doctor 提示 Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses 执行下面,不停的同意 Y 通过许可协议

flutter doctor --android-licenses

安装 VS Code (可选)

code.visualstudio.com

官网下载安装, 安装完后打开 VS Code。

在左边 EXTENSIONS 中 安装 Flutter, Awesome Flutter Snippets, Flutter Widget Snippets 插件.

这样,就可以使用 VS Code 开发 Flutter 应用程序了。

在打开 菜单栏->查看->命令面板, 输入 Flutter,可以看到 Flutter 相应的操作,

01.png

安装后相应的依赖后,重新运行

flutter doctor

可能会现

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

一般的错误会是 xcode 或 Android Studio 版本太低、或者没有 ANDROID_HOME 环境变量等,请按照提示解决。

我们更新环境变量, 添加到 MacOS 的启动文件里面

vim $HOME/.bash_profile 进入 Vim 的操作,按 i 进行编辑, 输入以下内容,相应 SDK 地址请代换自己的。编辑完后,按 esc 退出编辑。然后输入 :wq 保存退出。 Vim 其它操作命令请自行百度.

export ANDROID_HOME="/Users/hujinlong/Library/Android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/hujinlong/flutter/bin:$PATH

02.png

运行 source $HOME/.bash_profile 刷新当前终端窗口.

注意: 如果你使用的是 zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile

通过运行 flutter/bin 命令验证目录是否在已经在 PATH 中: echo $PATH

重新运行 flutter doctor,如果没有 X 就可以了。可以开发 flutter APP 了。

参考资料

Flutter 官方中文网 (flutter.cn/docs/get-st…)