Flutter开发环境搭建及相关Shell知识

引言

开发环境搭建是一个非常令人苦恼的过程,总会有一些莫名其名的问题出现。既然如此苦恼,不如找点乐子,将这个过程中涉及到的一些概念进一步研究,这样便可学到一些新知识,岂不美哉?本文以MacOS为例,介绍Flutter的安装过程。

SDK下载及环境变量设置

下载及安装

首先去官网下载最新的SDK:[下载链接] ,并根据电脑芯片架构下载最新版本的SDK压缩包到磁盘中。

在这里插入图片描述

接着切换到期望安装SDK的目录,本文将SDK安装到用户目录,命令过程如下:

# 切换到用户目录
cd ~
# 新建SDK目录
mkdir flutter_sdk
# 切换到SDK目录
cd flutter_sdk
# 解压SDK压缩包
unzip ~/Downloads/flutter_macos_arm64_3.16.9-stable.zip
环境变量设置

SDK已经安装到相应目录中,为了在任何目录下都能运行flutter命令,还需要将该目录添加到环境变量当中。

首先,我们需要知道当前使用的Shell发行版本,输入如下命令查看:

echo $SHELL
  • 若是zsh
    • 则打开~/.zshrc
  • 诺是bash
    • 则打开~/.bash_profile

接着,在文件中追加并保存如下命令:

export PATH=~/flutter_sdk/bin:$PATH
  • zshsource ~/.zshrc刷新
  • bashsource ~/.bash_profile刷新

最后,输入echo $PATH命令查看是否有SDK目录。

如果已存在,在命令行任意目录中输入flutter doctor,可以出现如下界面:

在这里插入图片描述

该命令用于检测Flutter的配置环境存在的问题,诸君可根据它的提示去排查问题。

我们还可以进一步设置以下几个环境变量:

# 禁用代理
export NO_PROXY="127.0.0.1,localhost,*.example.com,::1"
# 国内镜像网站,用于下载pub上的依赖包
export PUB_HOSTED_URL=https://pub.flutter-io.cn
# 国内镜像网站,Flutter相关资源的网站
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

最后,你的.zshrc./bash_profile文件中的内容应该像下图这样:

在这里插入图片描述

相关知识补充

Shell

在一开始,我们下载了SDK的压缩包,并在命令行通过cdmkdirunzip等命令完成了安装。

实际上,这个过程就是我们在与Shell(壳)进行交互的过程。Shell是一种应用程序,是用户和系统内核的沟通桥梁。下图很好地阐述了这种关系。
在这里插入图片描述

为什么需要用Shell?我个人认为是因为系统内核较为复杂,直接给普通用户使用的话不太现实,因此早期设计了一种基于文本命令的人机交互程序。随着技术的发展,像GNOME、KDE等图形界面其实也算是一种Shell(广义的),它们都是基于图形的人机交互程序。

我们一般常说的Shell,在狭义上是指基于文本命令的,如bashzsh等。

还需要说明一点,Shell支持编程,也就是说会有变量函数条件语句循环语句等功能,这极大地增强了用户使用Shell的灵活性。以下是一段Shell的脚本代码:

a=10
b=20
if [ $a == $b ]
then
   echo "a 等于 b"
elif [ $a -gt $b ]
then
   echo "a 大于 b"
elif [ $a -lt $b ]
then
   echo "a 小于 b"
else
   echo "没有符合的条件"
fi

bash vs zsh

Shell有很多发行版本,常见的有sh、bash、csh、tcsh、ash、dash、zsh等,各版本在功能、语法上都有可能不同,一般我们用的较多的是bash和zsh,因为:

  • bash是Linux的默认Shell
  • zsh是MacOS的默认Shell

环境变量

前面我们提到Shell支持编程,不得不聊聊编程中一个最基本的概念:变量作用域。

Shell的变量作用域有三种,分别为:

  • 局部变量
    • 只能在函数内部中使用,需要加local关键字,如local a=6
  • 全局变量
    • 在当前Shell进程中全局共享。不需要加任何关键字,如a=6
  • 环境变量
    • 当前Shell进程及其子进程都共享,需要加export关键字,如前文中提到的export PUB_HOSTED_URL=https://pub.flutter-io.cn。可以看出,它也是作用范围最大的。
    • 环境变量并非是永久的,关闭当前Shell进程(关闭命令行窗口)后这些变量就被销毁了。
    • 想要让环境变量持久化,需要将环境变量的定义写在.zshrc./bash_profile中。zsh的Shell进程在启动时会执行.zshrc中的代码,bash的Shell进程在启动时会执行./bash_profile中的代码。
    • 写入环境变量到.zshrc./bash_profile后并不会马上生效,可以重启Shell进程或用source filename命令重新加载这两个文件。
    • 最后再补充一个知识点,source命令是在当前进程中执行脚本文件,因此当前命令行也可以读到环境变量。而sh等命令会建一个子进程执行脚本文件,当前命令行窗口无法读取环境变量,这也是为什么我们写入环境变量到启动文件后都会用source命令的原因。

我们可以通过env查看当前Shell进程的所有环境变量。比较常用环境变量的是$PATH,它为Shell提供了可执行文件的搜索目录。

在前文中,我们设置了环境变量export PATH=~/flutter_sdk/bin:$PATH,就是为了追加SDK的可执行文件目录到$PATH中。当我们在命令行中输入flutter时,Shell会在$PATH提供的目录列表中搜索是否含有名为flutter的可执行文件,有则直接执行。

我们可以通过echo $PATH查看所有目录列表,可以看到SDK的目录已在其中了。

在这里插入图片描述

VSCode安装与配置

经典的轻量级编辑器,可用于Flutter的开发与调试。

从官网下载并安装完后,在扩展中搜索并安装Flutter插件。

在这里插入图片描述

安装完成后,中文用户在查看->命令面板搜索Flutter,选择Flutter: New Project即可新建项目。英文用户在View->Command Palette中执行相同的操作即可。

Xcode安装与配置

1.从App Store最新的Xcode版本。

2.配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer。

3.确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.

模拟器调试

安装完后,即可在VSCode进行调试,其中在模拟器中运行的方法如下图:

在这里插入图片描述

启动模拟器后再点击右上角的运行按钮。

真机调试

若想要进行真机调试,我们还需要安装:

  • homebrew,一种软件包管理器,你甚至可以用它安装Chrome浏览器。
  • libimobiledevice,一个允许开发者通过USB连接与iOS设备进行通信的库。
  • ideviceinstaller,基于libimobiledevice的一个工具,有安装ipa包、卸载应用等功能。
    • 例:安装应用ideviceinstaller -I app.ipa、卸载应用ideviceinstaller -U [bundleID]
  • ios-deploy,一个用于安装和调试iOS应用的命令行工具
  • cocoapods,一个用于管理iOS/MacOS项目中第三方依赖库的工具。

在命令行中输入如下命令即可安装homebrew(要注意网络环境):

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

libimobiledevice、ideviceinstaller、ios-deploy、cocoapods用homebrew安装,命令如下:

brew update
brew install --HEAD libimobiledevice
# brew install 一次可安装多个软件包
brew install ideviceinstaller ios-deploy cocoapods
pod setup

完成上述设置后,还需在项目的iOS目录下找到Runner.xcworkspace,并在TARGETS>Runner>Signing & Capabilities中登录Apple开发者账户及Bundle Identifier。这些都做完后就可以选择真机并运行了!

在这里插入图片描述

Android Studio安装与配置

首先在官网下载并安装Android Studio:[下载地址]

安装完后,还需要安装Android Studio的命令行工具(未安装的话,flutter doctor会有警告提示),下图是安装步骤:

在这里插入图片描述

模拟器调试

首先需要在Android Studio中创建一个模拟器。点击右侧安卓手机按钮>点加号>选择一个模拟设备。
在这里插入图片描述

点击下一步后,还需要下载一个系统镜像。这里有各个版本的系统镜像(安卓14、安卓13、安卓12等),我们只要选择最近一个下载即可。

在这里插入图片描述

以上步骤都完成后,就可以在VSCode的设备列表中选择刚创建的模拟器了并运行了!

在这里插入图片描述

参考资料

Flutter实战 第二版

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值