zl程序教程

您现在的位置是:首页 >  其他

当前栏目

iOS开发 超详细Flutter开发环境搭建

2023-04-18 14:28:54 时间

1 、安装Flutter

此文章针对针对移动开发者,关于Flutter环境搭建,仅供参考,也可参考官网<https://flutter.dve/>

1.1、下载Flutter SDK

进入Flutter官网<https://flutter.dve/>

 此网站为中国网站,无需翻墙即可进入

进入后,此处便为Flutter SDK下载地址了,根据自己的操作系统选择(本人为MacOS系统,下面以本人电脑为例操作)。

 

此处针对不同电脑芯片提供了两个不同的SDK,想查看自己的电脑芯片类型,点击左上角苹果图标->“关于本机”里查看,这里不再赘述。

下载完成以后,那么接下来就是安装路径了

因为Flutter的SDK中包含了很多命令行工具,我们需要配置环境变量,所以建议你安装到你平时放命令行工具程序的地方!我这里式放在家目录下~/flutter(仅供参考,安装在哪看个人习惯)。

1.2 配置环境变量

1.2.1 配置镜像

因为Flutter在运行时,需要去官网瞎子啊所需资源,那么你就需要镜像服务器,以下是官方文档的友情提示

意为如果你在中国,首先阅读Using Flutter in China,点击进入后可看到配置方式

来到我们的配置文件对shell进行配置,打开终端

如果你使用的是bash,就配置bash.profile文件,如果使用的是zsh,就配置zshrc文件

(如何查看自己使用的是哪个,在终端输入chsh,提示输入开机密码,输入时不显示,输入完直接回车即可) 

 

此处若为shell:/bin/zsh/就是zsh,在.zshrc中配置,如果是shell:/bin/bash/,就是bash,在.bash_profile中配置(此处要退出终端,英文状态下输入i,进入编辑模式,然后按esc,紧接着输入:wq回车即可)。

1.2.2配置shell 

如果是zsh,终端输入vim ~/.zshrc  ,如果是bash,输入vim ~/.bash_profile  再按i进入编辑模式,将下面的代码粘贴进去

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn

$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1.2.3配置flutter环境变量

接下来,将flutter命令行工具的路径配置以下,还是在对应的这个shell文件中,其中这个FLUTTER对应下载的flutter SDK解压后的文件路径

$ export FLUTTER=~/flutter

$ export PATH=$FLUTTER/bin:$PATH

输入完成后,按esc,在输入:wq  即可退出,完成配置。配置完成后,退出重新打开终端,或者输入载入命令使配置生效,载入命令为  source ~/.zshrc 或者source ~/.bash_profile  还是取决于你的zsh还是bash。

完成后,我们可以看看flutter配置是否成功了。flutter有一个doctor检测命令。专门检测的flutter环境配置是否成功的

$ flutter doctor

输入后回车,绿色对号就是配置完成的了,红色叉就是没有配置好的,此处应该还有红色的叉,因为后面还没有配置Android studio或者VS,其实此处,只要不出现command not found: flutter,就算环境变量配置成功了。

接下来,就是配置Android studio或者VS Code了

开发flutter,对于iOS开发者来说,这两个都可以,但是他们的区别在于,VS Code更轻量化,运行的更快,Android studio相对较笨重,而Android studio有更多更方便的插件,选择哪个看你自己,本人倾向于Android studio,下面就以Android studio作为开发工具介绍配置过程。


2、 安装Android studio

2.1下载Android studio

我们先安装Android studio,可以去国内官网<https://developer.android.google.cn/studio>下载

进入首页后,点击此处Download  Android Studio,进入下载页。下拉到底部,勾选同意协议

下面这两个,还是根据自己的电脑芯片类型选择不同版本, 左边是inter芯片版本,右边为苹果芯片版本

 2.2、配置SDK

下载完成后,根据安装向导完成安装。打开Android Studio,按键盘上的command + 逗号,依次点开Appearance & Behavior——>System Setting,点击Android SDK,右侧点击SDK Tools,取消勾选Hide Obsolete Packages,然后勾选图中三个插件下载安装

下载完关掉此页,来到首页 

点击左侧Plugins,右侧搜索框输入flutter搜索,然后点击install下载安装 

完成后会弹出安装Dart插件的临时界面,点击install 

安装完重启,我们就能看到如下界面

 

到这里我们就完成了 Android SDK的配置

此时我们终端输入flutter doctor,检测flutter配置,如出现JDK问题,我们需要如下命令

$ cd /Applications/Android Studio/Contents/jre

$ ln -s ../jre jdk

$ ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk

$ flutter doctor

如再次检测,出现许可证问题,如下图

我们需要如下命令解决

$ flutter doctor --android-licenses

至此,所有关于flutter的配置已经完成,已经可以进行flutter开发了