第1篇Dart基础











第1章

Dart语言简介






7min


Dart诞生于2011年10月10日，谷歌Dart语言项目的领导人Lars Bak在丹麦举行的Goto会议上宣布，Dart是一种“结构化的Web编程”语言，Dart编程语言在所有现代的浏览器和环境中提供高性能。
Dart是谷歌开发的计算机编程语言，后来被ECMA (ECMA408)认定为标准。它被用于Web、服务器、移动应用和物联网等领域的开发。它是宽松开源许可证（修改的BSD证书）下的开源软件。
Dart有以下三个方向的用途，每一个方向，都有相应的SDK。Dart语言可以创建移动应用、Web应用，以及Commandline应用等，如图 11 所示。



图11Dart支持的平台




1．1移动端开发
Dart在移动端上的应用离不开Flutter技术。Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。简单来说，Flutter是一款移动应用程序SDK，包含框架、控件和一些工具，可以用一套代码同时构建Android和iOS应用，并且其性能可以达到与原生应用一样的水源。
Flutter采用Dart的原因很多，单纯从技术层面分析如下： 
Dart是AOT(Ahead Of Time)编译的，可编译成快速、可预测的本地代码，Flutter几乎可以使用Dart编写； 
Dart也可以JIT(Just In Time)编译，开发周期快； 
Dart可以更轻松地创建以60fps运行的流畅动画和转场； 
Dart使Flutter不需要单独的声明式布局语言； 
Dart容易学习，具有静态和动态语言用户都熟悉的特性。

Dart最初设计是为了取代JavaScript成为Web开发的首选语言，最后的结果可想而知，因此到Dart 2发布时，已专注于改善构建客户端应用程序的体验，可以看出Dart定位的转变。用过Java、Kotlin的人，可以很快地上手Dart。
1．2Web开发
Dart是经过关键性Web 应用程序验证的平台。它拥有为 Web 量身打造的库，如dart:html，以及完整的基于 Dart的Web 框架。使用Dart进行Web开发的团队会对速度的提高感到非常激动。选择Dart是因为其高性能、可预测性和易学性、完善的类型系统，以及完美地支持Web和移动应用。
1．3服务端开发
Dart的服务端开发与其他的语言类似，有完整的库，可以帮助开发者快速开发服务端代码。










第2章

开发环境搭建






24min


接下来我们使用Flutter的开发环境来测试Dart程序。开发环境搭建还是非常烦琐的，任何一个步骤失败都会导致不能完成最终环境搭建。Flutter支持三种环境： Windows、macOS和Linux。这里我们主要讲解Windows及macOS的环境搭建。
2．1Windows环境搭建
1． 使用镜像
首先解决网络问题。环境搭建过程中需要下载很多资源文件，当某个资源更新不成功时，就可能会导致后续报各种错误。在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中： 



export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn






注意: 
此镜像为临时镜像，并不能保证一直可用，读者可以参考Using Flutter in China： https://github．com/flutter/flutter/wiki/UsingFlutterinChina以获得有关镜像服务器的最新动态。



2． 安装Git
Flutter依赖的命令行工具为Git for Windows(Git命令行工具)。Windows版本的下载地址为https://gitscm．com/download/win。
3． 下载安装Flutter SDK
去Flutter官网下载其最新可用的安装包。



注意: 
Flutter的渠道版本会不断更新，请以Flutter官网为准。Flutter官网下载地址： https://flutter．io/docs/development/tools/sdk/archive#windows。Flutter GitHub下载地址： https://github．com/flutter/flutter/releases。



将安装包zip文件解压到你想安装Flutter SDK的路径(如D:＼Flutter)。在Flutter安装目录下找到flutter_console．bat，双击运行并启动Flutter命令行，接下来，你就可以在Flutter命令行运行Flutter命令了。



注意: 
不要将Flutter安装到需要一些高权限的路径，如C:＼Program Files＼。



4． 添加环境变量
不管使用什么工具，如果想在系统的任意地方能够运行这个工具的命令，则需要添加工具的路径到系统环境变量Path里。这里路径指向Flutter的bin目录，如图21所示。同时，检查是否有名为“PUB_HOSTED_URL”和“FLUTTER_STORAGE_BASE_URL”的条目，如果没有，也需要添加它们。完成后重启Windows才能使更改生效。


图21添加Flutter环境变量


5． 运行Flutter命令并安装各种依赖
使用Windows命令窗口运行以下命令，查看是否还需要安装任何其他依赖项来完成安装： 



flutter doctor




该命令检查你的环境并在终端窗口中显示报告。Dart SDK已经捆绑在Flutter里了，没有必要单独安装Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。如下显示的代码，说明Android SDK缺少命令行工具，需要下载并且提供了下载地址，通常这种情况只需连接网络，打开VPN，然后重新运行“flutter doctor”命令即可。



［-］ Android toolchain - develop for Android devices

Android SDK at D:＼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.io/setup/#android-setup for detailed instructions.






注意: 
一旦你安装了任何缺失的依赖，需再次运行“flutter doctor”命令来验证你是否已经正确地设置，同时需要检查移动设备是否连接正常。



6． 编辑器设置
如果使用Flutter命令行工具，可以使用任何编辑器来开发Flutter应用程序。输入flutter help可查看可用的工具，但是笔者建议最好安装一款功能强大的IDE来进行开发，毕竟这样开发、调试、运行及打包的效率会更高。由于Windows环境只能开发Flutter的Android应用，所以接下来会重点介绍Android Studio这款IDE。
1) 安装Android Studio
要为Android开发Flutter应用，可以使用macOS或Windows操作系统。Flutter需要安装和配置Android Studio，步骤如下。
步骤1： 下载并安装Android Studio，下载地址为https://developer．android．com/studio/index．html。
步骤2： 启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK、Android SDK平台工具和Android SDK构建工具，这是用Flutter为Android开发应用时所必需的工具。
2) 设置Android设备
要准备在Android设备上运行并测试Flutter应用，需要安装有Android 4．1(API level 16)或更高版本的Android设备。
步骤1： 在设备上启用“开发人员选项”和“USB调试”，这些选项通常在设备的“设置”界面里。
步骤2： 使用USB线将手机与计算机连接。如果设备出现授权提示，请授权计算机访问设备。
步骤3： 在终端中，运行flutter devices命令以验证Flutter识别所连接的Android设备。
步骤4： 用flutter run启动应用程序。



提示: 
默认情况下，Flutter使用的Android SDK版本是基于你的ADB工具版本的。如果想让Flutter使用不同版本的Android SDK，则必须将ANDROID_HOME环境变量设置为该SDK的安装目录。


3) 设置Android模拟器
要准备在Android模拟器上运行并测试Flutter应用，请按照以下步骤操作。 
步骤1： 启动Android Studio→Tools→Android→AVD Manager并选择Create Virtual Device，打开虚拟设备面板，如图22所示。


图22打开虚拟设备面板


步骤2： 选择一个设备并单击Next按钮，如图23所示。



图23选择模拟硬件设备


步骤3： 选择一个镜像并单击Download按钮，然后单击Next按钮，如图24所示。


图24选择系统镜像


步骤4： 验证配置信息。填写虚拟设备名称，选择Hardware  GLES 2．0以启用硬件加速，单击Finish按钮，如图25所示。



图25验证配置信息


步骤5： 在工具栏选择刚刚添加的模拟器，如图26所示。

也可以在命令行窗口运行flutter run启动模拟器。当能正常显示模拟器时(如图27)，则表示模拟器安装正常。



提示: 
建议选择当前主流手机型号作为模拟器，并开启硬件加速，使用x86或x86_64镜像。

详细文档请参考https://developer．android．com/studio/run/emulatoracceleration．html。




图26在工具栏选择模拟器




图27Android模拟器运行效果图




4) 安装Flutter和Dart插件
IDE需要安装以下两个插件： 
Flutter插件： 支持Flutter开发的工作流(运行、调试、热重载等)； 
Dart插件： 提供代码分析(输入代码时进行验证、代码补全等)。
打开Android Studio的系统设置面板，找到Plugins，分别搜索Flutter和Dart，单击安装即可，如图28所示。


图28Android Studio插件安装


2．2macOS环境搭建
首先解决网络问题，参见2.1节“Windows 环境搭建”。
1． 命令行工具
Flutter依赖的命令行工具有bash、mkdir、rm、git、curl、unzip和which。
2． 下载安装Flutter SDK
请按以下步骤下载并安装Flutter SDK。
步骤1： 去Flutter官网下载其最新可用的安装包。



注意: 
Flutter的渠道版本会不断更新，请以Flutter官网为准。另外，在中国大陆地区，要想获取安装包列表或下载安装包有可能会遇到困难，读者也可以去Flutter GitHub项目下去下载安装Release包。

Flutter官网下载地址： https://flutter．io/docs/development/tools/sdk/archive#macOS。

Flutter GitHub下载地址： https://github．com/flutter/flutter/releases。



步骤2： 解压安装包到想安装的目录，如： 



cd /Users/ksj/Desktop/flutter/

unzip /Users/ksj/Desktop/flutter/v0．11．9．zip．zip




步骤3： 添加Flutter相关工具到PATH中： 



export PATH='pwd'/flutter/bin:$PATH





3． 运行Flutter命令并安装各种依赖
运行以下命令查看是否需要安装其他依赖项： 



flutter doctor




该命令检查你的环境并在终端窗口中显示报告。Dart SDK已经捆绑在Flutter里了，没有必要单独安装Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)。如下代码提示表示Android SDK缺少命令行工具，需要下载并且提供了下载地址，通常这种情况只需要把网络连好，VPN开好，然后重新运行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.io/setup/#android-setup for detailed instructions.






注意: 
当安装了所缺失的依赖后，需再次运行flutter doctor命令来验证是否已经正确地设置，同时需要检查移动设备是否连接正常。



4． 添加环境变量
使用vim命令打开~/．bash_profile文件，添加如下内容： 



export ANDROID_HOME=~/Library/Android/sdk  //android sdk目录

export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

export PUB_HOSTED_URL=https://pub.flutter-io.cn                  //国内用户需要设置

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置

export PATH=/Users/ksj/Desktop/flutter/flutter/bin:$PATH       //直接指定flutter的bin地址





注意: 
请将PATH=/Users/ksj/Desktop/flutter/flutter/bin更改为你的路径。



完整的环境变量设置如图29所示。




图29macOS环境变量设置


设置好环境变量以后，请务必运行source $HOME/．bash_profile刷新当前终端窗口，以使刚刚配置的内容生效。
5． 编辑器设置
如果使用Flutter命令行工具，可以使用任何编辑器来开发Flutter应用程序。输入flutter help可查看可用的工具，但是笔者建议最好安装一款功能强大的IDE来进行开发，毕竟这样开发、调试、运行和打包的效率会更高。由于macOS环境既能开发Android应用也能开发iOS应用，所以Android设置请参考2．1节“Windows环境搭建”中的“安装Android Studio”，接下来仅介绍Xcode的使用方法。
1) 安装 Xcode
安装最新Xcode。通过链接下载： https://developer．apple．com/xcode/，或通过苹果应用商店下载： https://itunes．apple．com/us/app/xcode/id497799835。
2) 设置iOS模拟器
要在iOS模拟器上运行并测试你的Flutter应用，需要打开一个模拟器。在macOS的终端输入以下命令： 



open -a Simulator




可以找到并打开默认模拟器。如果想切换模拟器，可以打开Hardware并在其下的Device菜单选择某一个模拟器，如图210所示。

打开后的模拟器如图211所示。



图210选择iOS模拟器




图211iOS模拟器效果图



接下来，在终端运行flutter run命令或者打开Xcode，如图212所示,选择好模拟器。单击Runner按钮即可启动你的应用。


图212Xcode启动应用


3) 安装到iOS设备
要在苹果真机上测试Flutter应用，需要一个苹果开发者账户，并且还需要在Xcode中进行设置。

(1) 安装Homebrew工具。Homebrew是一款macOS平台下的软件包管理工具，拥有安装、卸载、更新、查看和搜索等很多实用的功能。下载地址为https://brew．sh。
(2) 打开终端并运行一些命令，安装用于将Flutter应用安装到iOS设备的工具，命令如下所示： 



brew update

brew install --HEAD libimobiledevice

brew install ideviceinstaller ios-deploy cocoapods

pod setup





提示: 
如果这些命令中有任何一个失败并出现错误，请运行brew doctor并按照说明解决问题。



接下来需要Xcode签名。Xcode签名设置有以下几个步骤。
步骤1： 在你的Flutter项目目录中双击ios/Runner．xcworkspace打开默认的Xcode工程。
步骤2： 在Xcode中，选择导航面板左侧中的Runner项目。
步骤3： 在Runner TARGETS设置页面中，确保在General→Signing→Team(常规→签名→ 团队)下选择了你的开发团队，如图213所示。当你选择一个团队时，Xcode会创建并下载开发证书，为你的设备注册你的账户，并创建和下载配置文件。


图213设置开发团队


步骤4： 要开始你的第一个iOS开发项目，可能需要使用你的Apple ID登录Xcode。任何Apple ID都支持开发和测试。需要注册Apple开发者计划才能将你的应用分发到App Store,具体方法请查看https://developer．apple．com/support/comparememberships/这篇文章。Apple ID登录界面如图214所示。


图214使用Apple ID


步骤5： 当你第一次添加真机设备进行iOS开发时，需要同时信任你的计算机和该设备上的开发证书。单击Trust按钮即可，如图215所示。


图215信任此计算机图示


步骤6： 如果Xcode中的自动签名失败，请查看项目的Bundle Identifier值是否唯一。这个ID即为应用的唯一ID，建议使用域名反过来写，如图216所示。
步骤7： 使用flutter run命令运行应用程序。



图216验证Bundle Identifier值












第3章

第一个Dart程序






7min



万事开头难，我们用输出“Hello World”来看一个最简单的Flutter工程，具体步骤如下。
步骤1： 新建一个Flutter工程，选择Flutter Application，如图31所示。


图31新建工程


步骤2： 单击Next按钮，打开应用配置界面，其中在Project name中填写helloworld，Flutter SDK path使用默认值，IDE会根据SDK安装路径自动填写，Project location填写为工程放置的目录，在Description中填写项目描述，任意字符即可，如图32所示。


图32配置Flutter工程


步骤3： 单击“Next”按钮，打开包设置界面，在Company domain中填写域名，注意域名要反过来写，这样可以保证全球唯一，Platform channel language下面的两个选项不需要勾选，如图33所示。


图33设置包名界面


步骤4： 单击Finish按钮开始创建第一个工程，等待几分钟，会创建如图34所示工程。



图34示例工程主界面


步骤5： 工程建好后，先运行一下,看一看根据官方推荐方案所创建的示例的运行效果，单击Open iOS Simulator命令打开iOS模拟器，具体操作如图35所示。


图35打开模拟器菜单示意图


步骤6： 等待几秒后会打开模拟器，如图36所示。


图36模拟器启动完成图


步骤7： 打开工程目录下的lib/main．dart文件，删除所有代码并替换成如下代码： 



//main.dart文件

//程序执行入口函数

main() {

//定义并初始化变量

String msg = 'Hello World';

//调用方法

sayHello(msg);

}

//方法

sayHello(String msg) {

//在控制台打印内容

print('$msg');

}




步骤8： 单击debug(调试)按钮，启动Hello World程序控制台输出“Hello World”，这样，第一个Dart程序就运行出来了，输出内容如下:



Performing hot restart...

Syncing files to device iPhone XR...

Restarted application in 52ms．

flutter: Hello World