Flutter从零开始-环境配置

461 阅读3分钟

记录一下自己从零开始学习Flutter的历程以及遇到的问题

  • 系统:macOS
  • 工具:Android Studio
  • 模拟器:Xcode自带的iPhone模拟器

一、下载Flutter SDK

有两种方式:

  • 直接下载zip包(下载的是固定版本、速度快)
cd ~/development
unzip ~/Downloads/flutter_macos_1.17.0-stable.zip
  • 从 GitHub 上的 Flutter repo 获取源代码(并根据需要更改分支或标签)
git clone https://github.com/flutter/flutter.git -b stable

二、配置 flutter 的 PATH 环境变量:

export PATH="$PATH:`pwd`/flutter/bin"

配置全局变量

1,打开或者创建 shell 的 rc 文件

2,在 Linux 和 macOS Mojave 或 Mojave 之前的系统里,是默认使用 Bash 的,所以需要修改 .bashrc 文件,使用vim ~/.bashrc。macOS Catalina 操作系统默认使用 Z Shell,所以需要修改 .zshrc 文,件使用vim ~/.zshrc

3,增加export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"其中的 [PATH_TO_FLUTTER_GIT_DIRECTORY] 是你的Flutter SDK 放置的目录,比如我的SDK放置在/Users/admin/Flutter/flutter,一般默认是在/Users/admin/Downloads/flutter

4,运行 source $HOME/.bash_profile 来刷新当前命令行窗口。

5,通过运行 echo $PATH 来验证 flutter/bin 文件夹是否已经添加到 PATH 环境变量中,如果出现刚才添加的Flutter SDK 路径,比如我的是/Users/admin/Flutter/flutter/bin 说明添加成功

三、运行flutter doctor

运行flutter doctor查看当前环境是否需要安装其他的依赖

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

如果有如上带有x的提示,按照x下面的提示操作安装相关依赖,否则后面会出错

四、设置iOS开发环境

其实就是装好Xcode就行,如果之前是iOS开发,就省略这一步了,但是如果是新安装或者升级了Xcode,一定记得要先把Xcode打开,否则后面运行Flutter示例demo会找不到模拟器

五、配置iOS模拟器

一般在Mac系统环境下,装好xcode之后,会自动安装有模拟器,Android Studio支持连接iOS模拟器的,如果连接不上,就是配置有问题

解决办法

1,终端输入 sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer 然后输入电脑锁屏密码 2,如果xcode是新安装,需要先打开xcdode,xcode第一次运行,会自动配置一些参数,下载最新系统的模拟器

六、创建一个Flutter 应用

安装完Android Studio已经自动创建好了,直接用Android Studio工具打开运行就可以

如果自己用Android Studio创建Flutter项目,一直卡在creating flutter project 窗口:

1,执行 flutter doctor 确认一下依赖是否完全安装,如果提示有x,依据提示操作安装相关依赖

2,如果还是一直卡在 creating flutter project 界面,其实项目已经创建好了,只是在创建项目相关的依赖库出问题,所以这个时候,强制关闭Android Studio:option + command + esc ,然后选择Android Studio强制关闭,然后打开Android Studio,导入刚才创建的项目,运行,这个时候回报错,查看报错原因

3,还有一个终极解决办法:打开flutter的SDK目录,打开fluttre->bin->cache 找到lockfile文件,删掉这个文件,然后重启Android Studio创建Flutter项目

七、真机运行

cd到工程目录下,pod setup完成直接用Xcode打开,然后真机运行