携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第N天,点击查看活动详情 >>
theme: juejin
个人的开发环境
操作系统
Android Studio版本
Xcode版本
其他补充
- 已安装 Git,Flutter 使用
git进行安装和升级,建议先提前安装好 - 已安装 Java 依赖库(这个一般在安装
Android Studio会自动安装) - 个人使用的是黑苹果
下载Android Studio 开发IDE
Android Studio 官网:转到下载页。
安装完成后打开 Android Studio 点击 New Project 会提示你安装 Android SDK 库,直接点下一步即可,然后等待它安装完成。
(这个时候可以去同步下载Flutter的SDK开发包)
安装完 Android SDK 库之后需要找到它的文件夹路径,你可以点击 :
Prefernces -> Appearance -> System Settings ——> Android SDK 你会看到SDK的路径,把这个记录下来待会配置环境变量需要使用到。
如果为空的话说明安装失败或没有安装,你可以重启下 IDE 然后再创建一个项目试试看,一般会提示你安装。
/Users/superlin/Library/Android/sdk 这个是我电脑上的路径
下载Flutter SDK 安装包
- Flutter 官网:转到下载页。
- 选择自己对应的操作系统平台,我自己使用的是MacOS 3.0.5 x64版本适用于英特CPU,如果你是M1芯片则选择arm64版本
- 若要确定你的 Mac 是否是使用了 Apple 芯片处理器,请查阅苹果官网的说明页面: 搭载 Apple 芯片的 Mac 电脑。
- Flutter SDK 开发包里面已经默认提供 Dart 语言包
压缩包大概是1.26GB,下载完成后自己解压文件,放到一个固定的位置
我存放的路径: /Users/superlin/Downloads/flutter
开始配置环境变量
- 打开
终端执行命令cd ~确保在根目录下 - 执行
open .bash_profile打开环境变量文件 - 添加环境变量
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 进行验证是否配置完成,如果没相应则说明上一步的配置有问题
使用Android Studio 开发Flutter应用
安装Flutter和Dart插件
需要安装两个插件:
Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等).Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等).
步骤:
- 启动Android Studio.
- 打开插件首选项 (Preferences > Plugins).或者快捷键 commd + , 打开界面
- 选择 Marketplace 搜索
Flutter和Dart并点击install. - 安装完后记得重启Android Studio后插件生效.
开始创建项目
安装完上面两个插件之后,打开Android Studio 界面会新增一个 New Flutter Project 的按钮
点击按钮后,选择 Flutter ,这里的SDK path 如果为空的话则需要自己导入路径
点击 Next 然后填写项目的相关信息
注意:只能使用小写字母和数字以及下划线字符,如果用大写会直接报错
Project name 和 Module name 大写直接报错
初始化完成,大功告成
在iOS和Android平台编译运行
- Android 使用的是 小米Pad4 真机调试
- iOS 使用的模拟器调试
因为使用的是 Android Studio 只要把安卓设备的USB调试模式打开即可,IDE 会自动识别到终端设备,然后 command + r 运行即可。
如果你想使用 Android 模拟器那么需要创建一台设备,点击右上角的 create device 按钮
(如果你之前已经添加过模拟器的话可以略过后面的内容)
添加你想要的安卓设备,我这里添加的是 4.7 英寸的 Nexus4
- 点击 Next 下一步,下载你想要的 system image (我选择的安卓11)
等待下载(如果有梯子的话下载速度会比较快)
添加设备,如果出现报错的情况可能是因为你没有安装对应的 API SDK 版本
这里我把 Android 9 - Android 12的版本都添加上了(需要下载)
iOS端编译运行
如果你的 Mac 电脑已经安装了 Xocde,那么只需要打开工程文件下的iOS目录
点击 Runner.xcworkspace 文件,然后选择相应的模拟器或真机运行即可
运行iOS端项目成功!!!(这里登录的是公司的开发者账号,证书和配置文件会由Xcode自动生成创建) 如果你想使用 iPhone 真机调试,直接接入 Lighting 线即可。
————————完结撒花————————