用Flutter极速构建原生应用
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.1　认识Flutter

随着移动端开发的持续火热，越来越多的公司、组织和个人开发者开始寻求移动端跨平台开发的解决方案。传统上，一款完整的移动端应用要维护Android和iOS两套不同平台的代码，需要的开发资源更多，开发难度更大，周期也更长。跨平台的框架可以很好地解决这一痛点。目前较流行的移动端跨平台框架有FaceBook公司开发的React Native框架、阿里巴巴公司开发的Weex框架以及Google公司开发的Flutter框架。这些解决方案各有优劣，设计上采用的都是比较现代化的响应式开发思路。其中，Flutter在不同平台上的体验效果更佳，并且入门和上手更加容易。

1.1.1　Flutter的前世今生与应用场景

提到React Native，可能很多前端开发者都有所耳闻，但是要说Flutter，知道的人可能就不多了。在2018年2月的移动大会上，Google公司发布了Flutter的第一个测试版本，其实Flutter的前身是一个名为sky_sdk的移动端开发框架，Flutter中提供了大量的UI组件，例如文本标签、按钮、列表以及流畅的动画效果，其中，组件的编程风格借鉴了React框架，采用较现代化的响应式开发思路。目前，Flutter依然保持着高速的版本迭代。

关于移动端开发，首先想到的就是iOS开发与Android开发。由于平台与运行设备的差异性，很多时候，公司的移动端项目都要维护两套完全不同的代码，成本很高。相比之下，Flutter是一种新的解决方案，致力于提升用户的UI体验，其目标是可以按照120FPS的帧率进行界面渲染，比如今绝大多数移动设备上的60FPS帧率要高一倍。从语言上，Flutter采用Dart开发语言，Dart是类似JavaScript的一种Web脚本语言，也是一种非常现代化的编程语言，并且有着先天的跨平台特性。对于界面炫酷、交互性强但原生逻辑简单的应用，Flutter有着不可比拟的优势。

1.1.2　安装Flutter开发框架

Flutter可以跨平台地运行在macOS、Windows或Linux系统上，但是由于iOS程序开发的局限性，本书所有的程序在macOS系统上进行测试。Flutter的安装非常简单，首先可以从以下网址下载Flutter的最新安装包：

    https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos

如图1-1所示，选择平台为macOS，之后单击具体的Flutter版本进行下载，本书使用的是Flutter v1.0.0版本，建议你在学习时也使用这个版本。

图1-1　下载Flutter安装包

下载完成后，将其解压到任意目录即可。需要注意，解压完成后，我们已经可以在当前Flutter目录的bin目录下执行相关的Flutter命令，但是这样十分不便，我们需要可以在系统的任意目录下执行Flutter命令。为达到此目的，在解压Flutter安装包后，需要进行系统环境变量的配置。

首先在终端执行如下命令，打开环境文件：

    vim $HOME/.bash_profile

执行上面的命令可能需要验证用户密码，输入计算机的启动密码即可（在输入密码时，终端可能没有反应，不过放心，这是正常的）。vim是终端上的一个文本编辑器工具，打开文件后，输入i进入编辑模式，在文件的末尾追加如下环境变量：

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    export PATH=/usr/local/flutter/bin:$PATH

上面的前两个环境变量是为了方便国内用户对Flutter资源的访问，最后一个环境变量是Flutter的安装位置。需要注意，/usr/local/flutter是笔者计算机中Flutter的安装位置，你需要根据实际情况来配置这个变量，建议最好不要将Flutter安装在/usr/local/bin目录下，新版的Mac系统会自动保护这个文件夹。之后使用快捷键进入vim工具的命令模式，输入wq，按回车键，即可进行文件的保存，完成后在终端输入如下命令来刷新环境变量：

    source $HOME/.bash_profile

完成环境变量的配置后，就可以在任意目录下执行Flutter命令了。例如，输入如下命令可以查看帮助文档：

    flutter help

如果终端输出了类似如下的信息，就表示你的Flutter开发工具已经安装成功：

现在，你已经可以在终端使用命令进行Flutter应用的创建、运行、打包等操作了，但是先不要着急，还需要进行其他工具的安装和配置。

上一章目录下一章