Flutter开发环境初始化-Mac系统篇

1,467 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第N天,点击查看活动详情 >>

theme: juejin

个人的开发环境

操作系统

image.png

Android Studio版本

image.png

Xcode版本

image.png

其他补充

  1. 已安装 Git,Flutter 使用 git 进行安装和升级,建议先提前安装好
  2. 已安装 Java 依赖库(这个一般在安装 Android Studio 会自动安装)
  3. 个人使用的是黑苹果

下载Android Studio 开发IDE

Android Studio 官网:转到下载页

安装完成后打开 Android Studio 点击 New Project 会提示你安装 Android SDK 库,直接点下一步即可,然后等待它安装完成。

(这个时候可以去同步下载Flutter的SDK开发包)

image.png 安装AndroidSDK_完成.jpg

安装完 Android SDK 库之后需要找到它的文件夹路径,你可以点击 :

Prefernces -> Appearance -> System Settings ——> Android SDK 你会看到SDK的路径,把这个记录下来待会配置环境变量需要使用到。

如果为空的话说明安装失败或没有安装,你可以重启下 IDE 然后再创建一个项目试试看,一般会提示你安装。

image.png

/Users/superlin/Library/Android/sdk 这个是我电脑上的路径

下载Flutter SDK 安装包

  1. Flutter 官网:转到下载页
  2. 选择自己对应的操作系统平台,我自己使用的是MacOS 3.0.5 x64版本适用于英特CPU,如果你是M1芯片则选择arm64版本
  3. 若要确定你的 Mac 是否是使用了 Apple 芯片处理器,请查阅苹果官网的说明页面: 搭载 Apple 芯片的 Mac 电脑
  4. Flutter SDK 开发包里面已经默认提供 Dart 语言包
image.png

压缩包大概是1.26GB,下载完成后自己解压文件,放到一个固定的位置

我存放的路径: /Users/superlin/Downloads/flutter

image.png

开始配置环境变量

  1. 打开终端执行命令 cd ~ 确保在根目录下
  2. 执行 open .bash_profile 打开环境变量文件
  3. 添加环境变量
export PATH="这里改成你FlutterSDK文件的路径":$PATH 
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

export ANDROID_HOME="这里改成你电脑 Android SDK 的文件夹路径"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools`

我个人的环境变量配置,仅供参考

export PATH=/Users/superlin/Downloads/flutter/bin:$PATH 
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
export ANDROID_HOME="/Users/superlin/Library/Android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools`

保存文件后记得在终端执行 source .bash_profile 使环境变量生效

————配置环境变量这部分就到这里结束了————

输入命令:flutter doctor 进行验证是否配置完成,如果没相应则说明上一步的配置有问题

image.png

使用Android Studio 开发Flutter应用

安装Flutter和Dart插件

需要安装两个插件:

  • Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等).
  • Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等).

步骤:

  1. 启动Android Studio.
  2. 打开插件首选项 (Preferences > Plugins).或者快捷键 commd + , 打开界面
  3. 选择 Marketplace 搜索 FlutterDart 并点击 install.
  4. 安装完后记得重启Android Studio后插件生效.

image.png

开始创建项目

安装完上面两个插件之后,打开Android Studio 界面会新增一个 New Flutter Project 的按钮

image.png

点击按钮后,选择 Flutter ,这里的SDK path 如果为空的话则需要自己导入路径

20220817145236.jpg

点击 Next 然后填写项目的相关信息

注意:只能使用小写字母和数字以及下划线字符,如果用大写会直接报错

20220817145456.jpg

Project name 和 Module name 大写直接报错

20220817145835.jpg

初始化完成,大功告成

完成.jpg

在iOS和Android平台编译运行

  • Android 使用的是 小米Pad4 真机调试
  • iOS 使用的模拟器调试

因为使用的是 Android Studio 只要把安卓设备的USB调试模式打开即可,IDE 会自动识别到终端设备,然后 command + r 运行即可。

如果你想使用 Android 模拟器那么需要创建一台设备,点击右上角的 create device 按钮

(如果你之前已经添加过模拟器的话可以略过后面的内容)

image.png

添加你想要的安卓设备,我这里添加的是 4.7 英寸的 Nexus4

image.png
  • 点击 Next 下一步,下载你想要的 system image (我选择的安卓11)

image.png

等待下载(如果有梯子的话下载速度会比较快)

image.png

添加设备,如果出现报错的情况可能是因为你没有安装对应的 API SDK 版本

image.png image.png

这里我把 Android 9 - Android 12的版本都添加上了(需要下载)

image.png

iOS端编译运行

如果你的 Mac 电脑已经安装了 Xocde,那么只需要打开工程文件下的iOS目录

image.png

点击 Runner.xcworkspace 文件,然后选择相应的模拟器或真机运行即可

image.png

运行iOS端项目成功!!!(这里登录的是公司的开发者账号,证书和配置文件会由Xcode自动生成创建) 如果你想使用 iPhone 真机调试,直接接入 Lighting 线即可。

image.png

————————完结撒花————————