Flutter SDK
1.1、Flutter SDK简介
是什么 ?:an UI toolkit for building beautiful, natively compiled applications for mobile(AndroidiOS), web, and desktop from a single codebase.
开发语言:bashC++
官方主页:https://flutter.io
源码仓库:https://github.com/flutter/flutter
1.2、安装Flutter SDK
step1 : 配置环境变量

设置FLUTTER_STORAGE_BASE_URLPUB_HOSTED_URL两个环境变量的值为如下:

export FLUTTER_STORAGE_BASE_URL="https://mirrors.tuna.tsinghua.edu.cn/flutter"
export PUB_HOSTED_URL="https://mirrors.tuna.tsinghua.edu.cn/dart-pub/"
  • 如果您使用的Shellbash, 并且您的操作系统macOS, 请在~/.bash_profile文件末尾添加上面的配置
  • 如果您使用的Shellbash, 并且您的操作系统不是macOS, 请在~/.bashrc文件末尾添加上面的配置
  • 如果您使用的Shellzsh,请在~/.zshrc文件末尾添加上面的配置

说明:

FLUTTER_STORAGE_BASE_URL环境变量的值是Flutter SDK用到的一些相关软件的下载地址。

https://storage.googleapis.com/flutter_infra/flutter
国内镜像https://mirrors.tuna.tsinghua.edu.cn/flutter

PUB_HOSTED_URL环境变量的值是pub包管理工具的服务器地址。

https://pub.dev/
国内镜像https://mirrors.tuna.tsinghua.edu.cn/dart-pub/

服务器都在美国,所以,我们使用国内镜像

step2 : 安装依赖工具

gitJDKAndroidSDK

step3 : 使用git下载Flutter SDK
git clone https://gitee.com/dengsgo/flutter.git
https://github.com/flutter/flutter.git
国内镜像https://gitee.com/dengsgo/flutter.git

这里使用的也是国内镜像,不用是因为github.com服务器也不在中国, 你要去上下载的话,速度会非常慢。国内镜像是与每天同步一次,足够使用了。

step4 : 进入flutter目录,查看其内容
step5 : 将flutter/bin加入PATH环境变量
export PATH=$PATH:~/flutter/bin
step6 : 检测Flutter SDK环境
flutter doctor

运行效果如下:

第一次执行flutter命令的任何子命令都会执行前面3步骤:

  • 下载Dart SDK
  • building flutter tool
  • 下载Flutter assets

下载Flutter assets的URL就是我们预先设置的FLUTTER_STORAGE_BASE_URL,如果没有预先设置, 这里会卡住。

flutter doctor命令用于检测Flutter SDK是否安装完成,只要前4个绿色的对号都选中,就说明Flutter SDK安装完成了。

1.3、体验Flutter App

安装好Flutter SDK之后,我们真实的体验一下例子程序。例子程序在Flutter SDK安装目录的examples目录里:

这里有不少的例子,我们进入hello_world这个工程看看:

这是一个非常典型的Flutter App的工程结构,pubspec.yaml就是pub包管理工具的配置文件, 我们要运行这个工程,就会使用pub下载一些Flutter的库, 这也就是我们在安装的时候,预先设置了PUB_HOSTED_URL这个环境变量,如果不预先设置的话,这里速度会非常慢。

1.3.1、体验Flutter App在iOS上的效果

1、使用instruments命令启动一个iOS模拟器

instruments -w "iPhone 8 Plus" -t "Blank"

2、使用flutter devices命令查看一下连接的设备:

3、使用flutter run命令运行:

4、运行效果如下:

1.3.2、体验Flutter App在Android上的效果

1、启动一个Android模拟器

2、使用flutter devices命令查看一下连接的设备:

3、使用flutter run -d ${deviceId}命令运行:

4、运行效果如下:

1.6、flutter命令
1.5.1、flutter doctor

flutter doctor用来检测Flutter SDK环境是否建立完整。

示例:

只要前4个绿色的对好都选中,就是OK的。

1.5.2、flutter channel

列出flutterchannel

channel相当于git的分支。 某些channel缺少另外一些channel的功能。

示例:

1.5.3、flutter channel <channelName>

切换到指定的channel

示例:

1.5.4、flutter create [-t <app | package | plugin>] <projectDir>

创建Flutter工程。

-t参数只有在master channel中才有,其他channel中是没有的, 要使用此参数,请先切换到master channel

-t参数的值有3个。

示例:

1.5.4、flutter devices

查看连接的Android设备iOS设备

flutter devices类似于adb devices命令。

示例:

1.5.5、flutter run [-d <deviceId>]

编译工程,然后在指定的Android设备iOS设备上运行。 如果只连接了一个设备,可以不使用-d参数。

deviceId可以通过flutter devices命令获得。

此命令只能在含有pubspec.yaml的目录或其子目录中运行,它必须得知道你要运行哪个Flutter项目。

示例1:

示例2:

1.5.6、flutter logs [-d <deviceId>]

打印正在连接的Android设备iOS设备上的日志。

如果只连接了一个设备,可以不使用-d参数。

deviceId可以通过flutter devices命令获得。

flutter logs类似于adb logcat命令。

示例:

1.5.6、flutter logs [-d <deviceId>] -c

清除正在连接的Android设备iOS设备上的日志。