美文网首页Flutter
[flutter] 开发环境配置详解

[flutter] 开发环境配置详解

作者: 流火绯瞳 | 来源:发表于2019-08-19 11:08 被阅读5次

1.下载/安装 Flutter SDK

可以在其官网下载SDK,或者在 GitHub flutter下载 Git 仓库;这里我使用 Sourcetree 从其GitHub下载的仓库,仓库位置可以自定义,这里放在了系统根目录下,该路径下面会用到:

/Users/LiuQiqiang/Flutter

2. 配置环境变量

在系统根目录下,找到 .bash_profile文件 ,使用文本编辑器打开,将以下内容,粘贴到文件中:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/LiuQiqiang/Flutter/bin:$PATH

这里的 PATH 为 上面下载的 flutter 的路径

如果没有找到该文件,可以使用终端新建,或者直接使用vim 指令来编辑该文件,如果不存在会自动新建:

// 进入根目录
$ cd ~

// 打开/新建 .bash_profile 文件
vim ~/.bash_profile

然后,按键盘 A 或者 i 进入编辑模式,复制上面文本,粘贴进去,接着按 ESC 退出编辑模式进入指令模式,按住 command + : ,输入 wq,保存并退出。

最后使用下面指令刷新该文件:

source ~/.bash_profile

这时,flutter 指令可以正常在该终端窗口中使用;

全局配置
如果我们关闭了终端,重新打开,或者新开一个终端窗口,会发现 flutter 指令不能使用

command not found: flutter

我们需要将 flutter 的指令在任何窗口中生效,有以下两个方法添加相应指令:

  • 方式一
    找到根目录下的 .zshrc 文件,使用文本编辑器打开,然后在最后面添加以下指令:
source ~/.bash_profile 
  • 方式二
    使用 终端编辑
// 进入根目录
$ cd ~

// 打开/新建 .zshrc 文件
vim ~/.zshrc

同样,按照上面的指令进入编辑模式,添加以下内容:

source ~/.bash_profile

保存退出即可!
重启终端后,就可以在任意终端窗口中使用 flutter 指令。

第一次使用 flutter 指令时,会自动下载 Dart SDK、工具包等相关的内容,等待下载完成即可!

不出错的话会出现下面的内容:

成功

3. 检查环境配置:flutter doctor

配置完成 flutter SDK 之后,我们可以使用下面的指令来检查相关的配置是否生效:

flutter doctor

第一次执行该指令的时候,会自动下载一些工具包,包括 Dart SDK等;运行结束后,控制台会显示相应的环境配置情况:


图中带 ❌ 的都是需要修改的,带✅的都是配置完成的;
这里为配置完成了VS Code;
根据出错的提示,去完善相应的配置。

4. 详细配置

Android licenses
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
  ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
    --android-licenses

根据提示,终端输入指令 flutter doctor --android-licenses 即可;主要是Android 相关的一些协议,输入 y 会车接受即可,会有很多个,挨个接受即可;

Xcode - develop for iOS and macOS
[!] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Android Studio
[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

这里 Android Studio 没有安装相关的插件,打开Android Studio:
在欢迎页 Configure -> Plugins 打开插件管理面板


选择 Marketplace 选项卡,在搜索框内输入 flutter:

下载安装第一个 Flutter。会同时安装 Dart 插件,完成后重启 IDE 即可!
会发现多了个 flutter 工程的创建按钮:


IntelliJ IDEA

电脑安装了 IntelliJ IDEA ,所以在使用 flutter doctor 的时候会有相应的错误提示,很简单,只是缺少了 Flutter 和 Dart 插件:

[!] IntelliJ IDEA Community Edition (version 2019.2)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

打开 IntelliJ IDEA,在欢迎页,右下角,选择 Configure,在弹出列表中选择 Plugins:


在搜索框输入 flutter,这时会查找不到任何插件:


点击 Search in repositories ,在弹出的新窗口中,搜索结果列表选择 Flutter,然后 Install 即可:


此时会连同 Dart 的插件一同下载,完成后,重启 IDE,新建工程,选择 Flutter 工程

所有的完成后,终端重新输入 flutter doctor 指令检查一下即可:

其他

升级flutter版本

flutter upgrade

相关文章

网友评论

    本文标题:[flutter] 开发环境配置详解

    本文链接:https://www.haomeiwen.com/subject/mxsqqctx.html