flutter环境配置和初体验

image.png

一、准备工作

1、升级Macos系统为最新系统
2、安装最新的Xcode
3、电脑上面需要安装brew：https://brew.sh/

二、下载Flutter、配置Flutter环境变量、配置Flutter镜像

1、下载Flutter SDK
flutter官网
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

image.png

2.把下载好的Flutter SDK随便减压到你想安装sdk的目录，如

/Users/zhuge/flutter_mac/flutter

最终效果图：

image.png

3、把Flutter安装目录的bin目录配置到环境变量，然后把Flutter国内镜像也配置到环境变量里面，在终端执行

$vim ~/.bash_profile

插入

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/zhuge/flutter_mac/flutter/bin:$PATH

其中"/Users/zhuge/flutter_mac/flutter"为下载的flutterSDK中的内容拷贝到的目标路径。
按ESC退出编辑界面,保存编辑的信息,需要执行":wq"保存退出。到此环境变量配置完成。

image.png

之后在终端执行下面命令，使环境变量执行生效。

$source ~/.bash_profile

如果出现类似下面的错误

image.png

很有可能是path路径出错的问题，特别需要注意的是"PATH=" 后面没有空格。
打开终端输入以下命令让vim ~/.bash_profile命令能正常运行

export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin

接下来就可以正常使用vim ~/.bash_profile，并且重新编辑配置信息
4、验证flutter环境变量是否配置成功，执行

$flutter -v

或者

$flutter -h

获取flutter的帮助信息，如果出现一些常用的flutter命令,则代表上面的配置执行成功,否则检查下是否拷贝的flutterSDK是否下载完整,我这里下载下来是一百多兆,检查下拷贝到的目标路径是否正确.

三、运行flutter doctor命令检测环境

$flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）

image.png

这里只处理ios部分,上面的提示已经很明显了,只需要按照上面的提示一个个执行下面的

$brew update
$brew install --HEAD usbmuxd
$brew link usbmuxd
$brew install --HEAD libimobiledevice
$brew install ideviceinstaller
$brew install ios-deploy
$brew install cocoapods
$pod setup

如果电脑上面没有安装brew的话,第一步需要安装brew

$/usr/bin/ruby -e  "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

执行最后一个命令时,如果出现了

image.png

网上查阅说是需要执行下面的

$sudo gem install --user-install executable-hooks

但又报错下面信息

image.png

尝试执行

$rvm -v

提示下面信息

image.png

只能重新安装rvm

$curl -L get.rvm.io | bash -s stable
$source ~/.rvm/scripts/rvm 
$rvm -v
$ruby -v 

image.png

执行完一切正常,再次执行pod setup

image.png

再次执行

$flutter doctor

ios模块的红叉已经消失

image.png

在这里环境已经配置结束!

二.创建flutter应用初体验

1.创建一个文件夹用于存放创建的flutter应用,并且cd到此文件夹.接着命令行工具创建flutter应用

$flutter create demo01 

image.png

2.修改flutter SDK目录的权限以及项目的权限(-R代表递归,777代表可读可写可执行)
1>修改flutter项目的权限
首先进入到创建的flutter项目

$ cd /Users/zhuge/flutter_mac/demo/demo01

然后执行关键命令

$sudo chmod -R 777 *

2>修改下载的flutter SDK的权限
首先进入到flutter SDK目录

$ cd /Users/zhuge/flutter_mac

然后执行关键命令

$sudo chmod -R 777 *

如果出现问题,还要修改下载的flutter SDK的权限.
3.用xcode打开项目.如果遇见白屏,只需要卸载重现安装即可(假卡死).（或者在创建的flutter项目目录下使用命令行运行项目$ flutter run）

image.png

三、配置编辑器

利用Vscode开发flutter项目
1.安装Vscode,下载地址：https://code.visualstudio.com/docs/?dv=osx
2.安装Flutter插件
1>启动 VS Code
2>调用 View>Command Palette…
3>输入 ‘install’, 然后选择 Extensions: Install Extensions
4>在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

image.png

image.png

3.安装Dart插件
4.flutter的提示工具Awesome Flutter Snippets

image.png

至此，准备工作已做好！！！

5.此时ios模拟器已开启,并且Vscode能检测到模拟器设备

image.png

Vscode打开已创建的flutter项目,进入调试,执行

$flutter run

在调试中,p:显示网格,r:热加载(也就是重现加载),o:切换安卓和ios不同的操作系统,h:展示帮助信息,q:退出调试预览模式
5.此时模拟器没有开启,Vscode右下角显示"no devices"

image.png

此时需要用Vscode掉起ios模拟器,点击"no devices",选择ios模拟器

image.png

已连接到模拟器,再执行

$flutter run