原创:有趣知识点摸索型文章
创作不易,请珍惜,之后会持续更新,不断完善
个人比较喜欢做笔记和写总结,毕竟好记性不如烂笔头哈哈,这些文章记录了我的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 Studio
的Plugins
,在搜索栏中输入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