小试Flutter

发表于 2018-07-06 更新于 2022-01-10 分类于 Android

Flutter是什么

我觉得可以理解为Google做的React Native/Weex，目标也是使用一套代码，同时运行在Android和iOS上，提供Native的性能和体验，也都支持热更新，只不过Flutter使用Dart语言，React Native使用JavaScript，据说Flutter的性能要比RN好一些，因为没有使用JSBridge这样的结构，直接使用Dart来操作Native控件，具体可以参考它的官网：https://flutter.io/

Flutter官方文档

上图，Flutter官方文档的结构，和React Native都很像！

最近Flutter不知道怎么就火了，之前有人给我提过，现在准备一探究竟

环境搭建

类似React Native，Flutter也是同样的套路，需要先下载它的命令行工具，由于需要兼容iOS，所以还是推荐使用macOS来进行开发

由于网络问题，需要设置两个环境变量

1 2	export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

然后在Flutter的官方Github clone它的命令行工具，git clone -b dev https://github.com/flutter/flutter.git，这里建议使用dev分支，能及时更新到一些新功能，同时也比master分支要稍稳定一些

clone完成后，将flutter目录下的bin目录，添加到环境变量PATH当中，并chmod成可执行的

然后在终端中使用flutter命令，第一次运行时，会自动补全SDK需要的组件，接着，如果出现以下结果，证明基本SDK安装成功

Flutter命令

接下来需要执行flutter doctor来检测缺失和建议的组件、插件，如图所示，Flutter建议使用的IDE包括：Xcode、Android Studio、Intellij IDEA和VSCode，这些工具的安装，这里就不再赘述了

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.

根据提示修正即可，一些组件的安装，会直接给出对应的命令，十分人性化

iOS的开发环境，需要安装libimobiledevice和CocoaPods，以下是安装命令：

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

对于Android开发来说，除了需要根据要求安装好对应的SDK，并同意相关的Lisences（许可协议）以外，Android Studio或者IDEA，还应该安装Dart和Flutter插件（需要在Settings/Preferences->Plugins中的Browse repositories中搜索），安装完成以后，Android Studio的欢迎页会多出一个新建Flutter工程的选项

Android Studio

这样建立Flutter工程就十分方便了

Start Flutter

如果使用VSCode作为开发工具，直接去商店里搜Dart和Flutter扩展安装重启VSCode即可，之后可以使用F1唤出命令输入框，键入Flutter执行相关操作，也十分简单

VSCode

强烈建议使用这种插件的形式来建立Flutter工程，当然，如果喜欢使用命令行，可以参考Flutter官网

至此，Flutter的基本环境也就搭建完成了

运行一个Demo

如果使用Android Studio开发，运行一个Demo工程十分简单，毕竟是Google自己定制的IDE，对Google的框架支持十分完美，如下图所示

Demo

在对代码进行修改并保存后，Android Studio会自动调用Flutter命令行的Reload命令进行热刷新，如果使用命令行启动APP，则需要在命令行里按『R』键触发，这和RN在设备里直接操作的方式有点不同

使用Flutter进行APP开发

Dart

Dart是Google开发一门编程语言，风格有点像Kotlin，但语法又有很多和Java相似的地方（不知道Google搞这么多语言干什么？），可以用于移动端（主要是Flutter）、Web端和Server端程序的开发，其中Web端的Dart还可以转换为JavaScript

官网：https://www.dartlang.org/

基本语法：https://www.dartlang.org/guides/language/language-tour

吐槽一点：现在的各大公司都搞一套自己的这种语言，微软的TypeScript、苹果的Swift、JetBrains的Kotlin、Google的Dart、Go等等，真的是让人学不动！！！

由于Flutter采用Dart语言来开发，所以需要稍微适应一下这种又像面向对象，又像脚本的语言

程序入口（Entry Point）

和React Native类似，Flutter也有一个固定的程序入口，一般被写成如下的形式：

1	void main() => runApp(new MyApp());

组件在React Native中被称为Component，在Flutter中被称为Widget，所有的组件都继承于这个Widget类

Flutter的组件

其中，最常用的组件有以下几个：

Text：用于展现文本
Row及Column：行/列，用于FlexBox风格的布局
Stack：一种栈式布局方式，和LinearLayout这种“栈”式布局不同，Flutter的Stack用于实现View的层次布局
Container：约束布局，类似Android的ConstraintLayout和iOS的AutoLayout

以下介绍几种常用的widget：

布局（Layout）

Flutter的布局组件分为单子元素布局、多子元素布局和布局工具类

一般的组件，根据是否包含需要变化的状态，分为StatefulWidget和StatelessWidget两个抽象类，可变的状态，用于响应用户点击事件、更新数据或者UI等，和React Native中使用state变化刷新UI的方式有些类似

在上面程序代码中，MyApp一般就是一个StatelessWidget，如下代码所示，覆盖build方法，来创建一个APP最基础的Widget

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    // 创建App最基础的Widget
  }
}

输入（Input）

用于获取用户输入，如：Android的EditText，iOS的UITextField，Flutter中称为：Form和FormField
用于捕获键盘事件，如：Android的OnKeyListener，Flutter中称为：RawKeyboardListener

图像（Assets、Images、Icons）

用于获取APP中用到的所有图像、图标等

组件包含：Image、Icon、RawImage、AssetBundle

样式（Styling）

包括Padding、Theme和MediaQuery，主要用于对子Widget进行统一的样式管理

异步（Async）

分为FutureBuilder和StreamBuilder，其中FutureBuild类似Java中Future的用法，用于实现一种异步的任务执行模型，实际写法有些类似JavaScript的Promise，可以用来实现网络API的请求

而StreamBuild用于实现异步的流式读取，可以用来下载网络文件

特别的UI组件库

Flutter对基于Android平台Material Design风格的组件，以及iOS风格的Cupertino组件进行了封装，方便开发者直接使用，保证APP的样式统一

对于Material Design组件，包括我们熟知的：Drawer、Appbar、FloatingActionButton、SnackBar等

Material Design

有关设计风格，可以参考Material Design的官方文档：https://material.io/guidelines/material-design/introduction.html

iOS的Cupertino设计风格从iOS 7开始一直沿用至今，也是非常成熟、优雅的UI设计理念，这里不再阐述了，实际开发中根据需要和Flutter文档使用即可

其他组件

还有一些包括手势、动画、滚动、绘图等组件，可以满足日常的开发需求，其他的组件说明及用法，可以参考：https://flutter.io/widgets/

总结

刚接触Flutter，由于之前对React Native的印象，总让我感觉有一丝熟悉，但好像又无从下手，后面准备看看一些Example，写一些小Demo练练手，然后再进一步研究一下

未完，待续……

可爱的程序猿 - CoderYuan.com