开始之前
本人使用Flutter开发的一个图文App《每日图文》，可以同时运行在Android和iOS上，欢迎体验，喜欢的话还不吝Star一下。
叮叮叮～ 传送门
demo.gif
Flutter为何物？
随着移动App开发成本越来越高，近几年，移动跨平台开发的呼声层出不穷，如FaceBook的推出React-Native，大受欢迎，但其性能并不如人意。
2018年2月27日世界移动大会上，谷歌发布一个跨平台开发框架，名曰Flutter，用于构建高性能的原生Android和iOS两大平台的App。
目前还处于测试版本阶段：Beta 3。
Flutter编程语言
Flutter使用的编程语言是Dart，Dart是一门动态语言，几年前扬言要替换JavaScript地位，结果可想而知。
想必还是很多人都没听说过这门语言吧，原谅我也没听过。没想到如今Dart以这样的形式再次出现在开发者面前。
Dart虽然是一门动态语言，但是像极了Java，作为一名Android开发者，几乎可以无缝切换，跟Kotlin也有几分相似。相比Java，Dart更为简洁。
具体可以到Dart语言中文社区了解学习。
Flutter特点
- 支持热加载，运行之后，修改代码无需重新安装和启动，提升开发调试效率
- 支持数据状态绑定，修改数据后自动刷新页面
- 所有的UI都是Widget，包括页面
Flutter环境配置
首先clone Flutter的repo
git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=`pwd`/flutter/bin:$PATH
然后检查是否需要安装其它依赖，根据提示来安装其它的依赖
flutter doctor
如果是Mac的话，需要配置Flutter全局环境变量，在命令行输入：
$HOME/.bash_profile
在.bash_profile文件添加以下环境变量：
其中[PATH_TO_FLUTTER_GIT_DIRECTORY]是上面clone的Flutter Repo的本地路径
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
最后运行来生效当前命令行窗口：
source $HOME/.bash_profile
更多平台配置可到【Flutter中文网】了解
Flutter开发工具配置
Flutter App可以使用VS Code、Android Studio、IntelliJ进行开发。我直接用的Android Studio。
开始之前，你需要安装两个插件：
- Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等).
- Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).
如果在AS中无法在线安装，可以到以下链接中下载离线安装：
注意下载的插件版本一定要和Android Studio JRE版本对应上，可以在Android Studio -> About Android Studio中查看版本。
模拟器配置
Android Studio支持Android模拟器和iPhone模拟器预览，具体安装参见Flutter中文网，这里不再赘述。
新建Flutter App工程
安装了以上两个插件后，就可以在Android Studio中新建Flutter工程了，按照提示新建即可。
新建工程
工程目录如下：
工程目录
可以看到，工程目录结构主要分为3部分，分别是：
- android 存放Android相关的东西，如App图标
- ios 存放iOS相关的东西，如App图标
- lib 存放Flutter源码
重点来看Flutter的入口：lib/main.dart
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
整个App的入口在void main()方法中。接下来，就来理清一下这个简单的代码。
Flutter页面架构
App开发最重要的就是UI框架，Flutter重新定制一套自己的UI框架，在底层使用了Skia进行渲染。
在Flutter中，一切皆是Widget，页面是Widget，普通的控件也是Widget。
UI布局和控件
从main.dart中可以看到，Flutter的布局是一层一层嵌套形成的。
-
第一层是Scaffold，一个实现了Material design的布局控件，包含了一个AppBar和一个body，分别对应标题栏和页面。
-
第二层body是一个Center布局控件，该布局用于使其子布局即child，在父布局中居中显示
-
最后的子布局是一个Text控件。
整个布局就是在页面的中间显示了Hello World。
页面控件：StatelessWidget 和 StatefulWidget
MyApp继承的StatelessWidget，就是其中一个页面相关的Widget，这个窗口的特点是静态，页面中的数据一旦渲染后，就不能在更改，一般用于显示静态页面。
另一个StatefulWidget，则是可以改变状态的Widget，页面的显示随着状态改变而改变。通过setState方法可以非常方便的修改页面状态，与现在web动态绑定框架是类似的。
一个StatefulWidget页面看起来是这样的：
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
}
可以看到，StatefulWidget的业务逻辑基本上都在_MyHomePageState中，这个类继承了State。
当点击了FloatingActionButton时，就会调用_incrementCounter()方法进行setState()，页面就会跟着改变了。
注：Dart使用下划线_表示私有，如上面的_count和_incrementCounter()
由于Flutter的布局模式，当页面比较复杂时，整个布局会变得非常复杂，可读性也大大降低了，修改起来非常麻烦。
另外，Flutter为了布局灵活性，定义了太多的布局控件，几十个布局看得眼花缭乱，从来没见过这么多布局的框架。
Flutter插件管理
Flutter使用pubspec.yaml管理插件库，具体如下：
name: daily
description: A application to look up photo and article
#依赖插件配置
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
#本地资源配置
assets:
- images/ic-pic-loading.png
- images/ic-pic-article.gif
Run App
通过Android Studio就可以直接在模拟器上安装App了，当然，前提是你要先配置好模拟器。
如果修改了代码，就可以直接通过热加载，直接显示修改的内容，无需重新安装打开，大大节省了调试时间。
总结
- Flutter的对于熟悉Java或者Android开发的人来说，还是比较友好的，可以比较快的熟悉和掌握基本的开发工具和开发理念；
- Flutter App的性能确实还是不错的，整个的体验与原生App基本差不多；
- 热加载非常好用，可以节省不少时间；
- 支持数据和状态自动绑定，通过setState可以非常方便的修改页面状态；
- Flutter 布局嵌套非常坑爹，布局复杂将会非常痛苦；
- 基本上实现Android和iOS一套代码通用，开发效率大大提高了。
- 仍然有许多需要改进的地方，许多特性支持也不太好，如webview这些需要使用第三方插件，或自己定制。
现在Flutter仍然为Beta版本，希望后面可以带来更多惊喜和更好的体验吧。
网友评论