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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容