Flutter入门到进阶(一)-环境搭建ForMac

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

在学习Flutter之前,我们需要先安装Flutter的开发环境,那么我们就从环境的安装开始;

安装环境

本人是Mac电脑,所以此次演示MacFlutter的环境安装;

电脑系统:macOS Big Sur 11.6

Flutter:2.5.1

由于FlutterGoogle开发的编程语言,所以无法只使用Xcode来进行开发,除了Xcode之外,我们还需要安装其他的开发工具,这里有两个常用的:Android StudioVisual Studio CodeAndroid Studio集成了大量的插件,功能更强大,但是占用内存大,比较笨重,所以可以合理选择我们使用的开发工具;

Flutter安装

SDK下载

关于Flutter的安装流程,我们也可以直接参考官方网站,国内可以直接打开;

点击Get started进入install界面,我们选择需要下载的那个平台的:

之后可以一步一步按照流程进行环境安装;

最新的版本为:flutter_macos_2.5.2-stable.zipstable意为稳定的,当然,也可以下载指定版本下载地址

SDK解压缩

压缩包下载完成之后,就可以直接解压缩到某个路径下;

需要注意的是,将其解压缩到opt目录的话,可以多用户访问,但是opt目录有访问权限的问题,可能会造成一些困扰;

配置镜像文件

解压缩之后,因为我们需要用到bin目录下的命令,所以还需要配置环境变量

因为Flutter在运行的时候,需要去官方下载一些所需要的资源,这个时候,我们就需要用到科学工具,但是Flutter比较友好,很人性的在官方直接给出了镜像:入口

新版的Mac电脑终端都是使用的zsh,其配置文件路径为~/.zshrc;

老版本Mac电脑中断使用的是bash,其配置文件路径为~/.bash_profile;

我们需要在配置文件中,进行镜像的配置:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

可能有一部分之前用的老电脑,配置信息放在了bash_profile文件中,现在更新到新系统之后,默认的是zsh,这样的话我们会有两份配置文件,那么我们只需要在zshrc文件最后添加如下指令,就可以直接将bash_profile文件中所有的环境变量引入zshrc中:

if [ -f ~/.bash_profile ]; then 
    . ~/.bash_profile;
fi
复制代码

配置Flutter环境变量

在配置文件中添加配置如下:

#flutter环境变量
export PUB_HOSTED_URL=https://pub.flutter-io.cn #国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn #国内用户需要设置
export PATH=/Users/******/development/flutter/bin:$PATH
复制代码

Flutter的指令在bin目录,所以配置环境变量时要指定到bin目录才行

配置完成之后,重新打开终端,或者直接在终端中输入指令重新载入配置:

# zsh 指令
source ~/.zshrc

# bash 指令
source ~/.bash_profile
复制代码

安卓环境配置

安装Android Studio

前往Android Studio的中国官网下载Android Studio

点击前往下载界面,勾选条款之后,此处有两个下载按钮,分别针对Mac的两种芯片intelM1,请根据电脑芯片下载:

配置SDK

下载完成之后,安装Android Studio,安装过程中,根据安装安装向导安装即可,我们需要安装以下几个SDK

  • Android SDK
  • Android SDK Command-line Tools
  • Android SDK Build-Tools

安装过程无需科学上网;

如果之前安装过Android Studio,那么可以前往偏好设置(快捷键cmd+,)进行SDK的安装:

安装插件

此处,我们需要安装两个插件Flutterdart

可以在偏好设置中的Plugins中进行插件的搜索和安装:

安装完成之后,重新启动Android Studio时我们可以看到创建Flutter项目的入口:

验证

配置完成之后,我们需要进行验证

flutter doctor

终端输入flutter doctor:

flutter doctor -v

出现这两种结果,那么就说明环境配置已经解决了差不多了......

如果有出错信息,那么根据提示解决即可;

其他问题解决

JDK问题解决

即使我们已经安装好了Android Studio,此时还可能出现JDK的版本问题,目前JDK已经是10+的版本,而此处需要1.8版本(好像,貌似是这个版本),所以我们需要指定一个软链接:

cd /Applications/Android\ Studio.app/Contents/jre 
ln -s ../jre jdk 
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
复制代码

许可证问题解决

在进行flutter doctor指令时会发生许可证的问题,解决方案如下:

执行指令:

flutter doctor --android-licenses
复制代码

全部输入YES

猜你喜欢

转载自juejin.im/post/7016527163117535262
今日推荐