Flutter:安装流程与环境配置

原创:有趣知识点摸索型文章
创作不易,请珍惜,之后会持续更新,不断完善
个人比较喜欢做笔记和写总结,毕竟好记性不如烂笔头哈哈,这些文章记录了我的IOS成长历程,希望能与大家一起进步
温馨提示:由于简书不支持目录跳转,大家可通过command + F 输入目录标题后迅速寻找到你所需要的内容


安装过程

官网下载 Flutter SDK。我的电脑是M1芯片,所以选择了后面那个。

这里官网提示说如果你要在 Apple 芯片的 Mac 电脑上使用,你还需要安装 Rosetta 2 环境来让一些辅助工具得以需要,你可以通过手动运行下面的命令来安装:

sudo softwareupdate --install-rosetta --agree-to-license

下载好的flutter文件如下,直接就是解压好的。

将下载好的文件放到自己指定的文件夹下,我放在了我桌面的FlutterHelper文件夹下面。

配置环境变量以及镜像。在终端进入到根目录下:

cd ~

使用vim打开这个.bash_profile的文件,在这个文件里面添加配置。

vim ~/.bash_profile

打开后需要输入I键进入编辑模式,然后将把下面的三个环境变量添加进去。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/xiejiapei/Documents/FlutterHelper/flutter/bin:$PATH

前面两行是设置FLutter的镜像,为了解决国内访问flutter慢的问题,一定要添加,不然就无法使用。第三行是设置Flutter的环境变量,其中/Users/xiejiapei/Documents/FlutterHelper 是我的FlutterHelper文件夹的地址,需要换成自己的文件地址,如果不清楚自己的文件地址可以如下图所示直接将文件拖到终端即可。

编辑完成后按esc键退出编辑模式,接着按下shift + : 键进入到底部命令模式,在这里进行vim的存储和退出,而后输入wq保存编辑结果并退出vim

配置完成,使用soucre重新加载:

source ~/.bash_profile

验证一下flutter环境有没有配置成功:

flutter -h

看到如下如的打印信息就是配置成功了。

flutter doctor命令检查一下flutter的环境配置。

flutter doctor

出现如下界面证明我们Flutter SDK已经安装成功了。

上面的=X!都需要去处理。这里提示我们没有安装Android Studio,于是我们前往安卓的官网下载。

下载完成后一直点击下一步进行安装即可。感觉最新版的Android Studio页面还蛮漂亮的,比两年前要好看很多了。

点击 SDK Manager 查看 Android SDK 的所在目录。Android Studio 会自动帮你下载SDK到此目录下。

进入终端重新打开bash_profile文件,配置 Android SDK 的环境变量。以下四个环境变量代表的意思依次是Android SDK的环境变量、Android 的模拟器路径、Android tools 的路径、Android 平台的工具路径。/Users/xiejiapei是根目录下的路径,open ~open /Users/xiejiapei的效果相同,这里需要将xiejiapei换成自己的用户名,其实就是上面在Android Studio所看到的SDK路径。

export ANDROID_HOME=/Users/xiejiapei/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/emulator

加载配置文件使刚才配置生效:

source .bash_profile

Android Studio添加Flutter。打开Android StudioPlugins,在搜索栏中输入flutter,找到相应的插件,而后Install。当跳出安装Dart插件的提醒界面时,记得点击Yes进行安装。安装完毕之后点击Restart IDE按钮重启Android Studio

再此进行检查:

flutter doctor

报如上两个错误。第一个错误的意思是没有安装cmdline-tools,于是我们在Android Studio的设置中找到其进行安装即可。

接着按照下面一条错误的提示运行如下命令同意相关协议。

flutter doctor --android-licenses

然后会有一系列是否接受协议的问题,全部选择是即可。

再此进行检查:

flutter doctor

哈哈哈终于没有任何问题了,大功告成!

现在打开Android Studio,选择New Flutter Progect 创建第一个flutter工程。

这里要求我们输入 Flutter SDK的路径,将刚开始我们下载的FlutterHelper文件下的flutter的地址搬出来即可。

接着就会进入创建新的Flutter项目的流程,在这里我们可以配置Flutter项目的名称、项目地址和其支持的发布平台和开发语言。注意这里的项目名称需要全小写,并且使用下划线分割单词。并且这里的项目地址中的最后一个单词就是我们的项目所在的文件夹名称。

然后项目就创建好了,接下来只需要选择支持的发布平台运行项目即可。

选用 iPhone 模拟器运行效果如下:

运行效果看起来还不错。


配置环境

a、在bash文件中配置Flutter环境变量
export PATH=/Users/xiejiapei/flutter/bin:$PATH
export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
export FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter
export FLUTTER_ROOT=/Users/xiejiapei/flutter
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PATH=/usr/local/Cellar/node@10/10.15.2/bin:$PATH 

b、MacOS 的 zsh 和 bash 切换

bash 的环境变量是.bash_profile文件。zsh 的环境变量是.zshrc文件。如果从 bash切换到 zsh,但想保留 bash 所设置的环境变量,可在 .zshrc文件末尾添加 source ~/.bash_profile 保存退出,并重启终端即可使用 bash 的环境变量。

zsh: command not found: flutter
xiejiapei@xiejiapeis-iMac ~ % source ~/.bash_profile

zsh 切换回 bash

chsh -s /bin/bash

使用系统自带的 zsh,输入密码成功切换,重启终端即可使用 zsh

chsh -s /bin/zsh

c、android studio 显示 No Device

在终端运行以下命令,配置android sdk路径。

flutter config --android-sdk /Users/xiejiapei/Library/Android/sdk

d、其他问题

在终端运行以下命令进行检查,按照错误提示进行更正。

flutter doctor --android-licenses

e、安装Flutter依赖包
flutter run 或者 flutter packages get
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

相关阅读更多精彩内容

友情链接更多精彩内容