開始之前
本人使用Flutter開發(fā)的一個圖文App《每日圖文》，可以同時運行在Android和iOS上杖爽，歡迎體驗敲董，喜歡的話還不吝Star一下。
叮叮段堪玻～ 傳送門
Flutter為何物腋寨？
隨著移動App開發(fā)成本越來越高，近幾年化焕，移動跨平臺開發(fā)的呼聲層出不窮萄窜，如FaceBook的推出React-Native，大受歡迎撒桨，但其性能并不如人意查刻。
2018年2月27日世界移動大會上，谷歌發(fā)布一個跨平臺開發(fā)框架凤类，名曰Flutter穗泵，用于構(gòu)建高性能的原生Android和iOS兩大平臺的App。
目前還處于測試版本階段：Beta 3谜疤。
Flutter編程語言
Flutter使用的編程語言是Dart佃延，Dart是一門動態(tài)語言，幾年前揚言要替換JavaScript地位茎截，結(jié)果可想而知苇侵。
想必還是很多人都沒聽說過這門語言吧，原諒我也沒聽過企锌。沒想到如今Dart以這樣的形式再次出現(xiàn)在開發(fā)者面前榆浓。
Dart雖然是一門動態(tài)語言，但是像極了Java撕攒，作為一名Android開發(fā)者陡鹃，幾乎可以無縫切換，跟Kotlin也有幾分相似抖坪。相比Java萍鲸，Dart更為簡潔。
具體可以到Dart語言中文社區(qū)了解學(xué)習(xí)擦俐。
Flutter特點
- 支持熱加載脊阴，運行之后，修改代碼無需重新安裝和啟動，提升開發(fā)調(diào)試效率
- 支持數(shù)據(jù)狀態(tài)綁定嘿期，修改數(shù)據(jù)后自動刷新頁面
- 所有的UI都是Widget品擎，包括頁面
Flutter環(huán)境配置
首先clone Flutter的repo
git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export PATH=`pwd`/flutter/bin:$PATH
然后檢查是否需要安裝其它依賴，根據(jù)提示來安裝其它的依賴
flutter doctor
如果是Mac的話备徐，需要配置Flutter全局環(huán)境變量萄传，在命令行輸入：
$HOME/.bash_profile
在.bash_profile文件添加以下環(huán)境變量：
其中[PATH_TO_FLUTTER_GIT_DIRECTORY]是上面clone的Flutter Repo的本地路徑
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
最后運行來生效當(dāng)前命令行窗口：
source $HOME/.bash_profile
更多平臺配置可到【Flutter中文網(wǎng)】了解
Flutter開發(fā)工具配置
Flutter App可以使用VS Code、Android Studio蜜猾、IntelliJ進行開發(fā)秀菱。我直接用的Android Studio。
開始之前蹭睡，你需要安裝兩個插件：
- Flutter插件： 支持Flutter開發(fā)工作流 (運行衍菱、調(diào)試、熱重載等).
- Dart插件： 提供代碼分析 (輸入代碼時進行驗證棠笑、代碼補全等).
如果在AS中無法在線安裝梦碗，可以到以下鏈接中下載離線安裝：
注意下載的插件版本一定要和Android Studio JRE版本對應(yīng)上，可以在Android Studio -> About Android Studio中查看版本蓖救。
模擬器配置
Android Studio支持Android模擬器和iPhone模擬器預(yù)覽洪规，具體安裝參見Flutter中文網(wǎng)，這里不再贅述循捺。
新建Flutter App工程
安裝了以上兩個插件后斩例，就可以在Android Studio中新建Flutter工程了，按照提示新建即可从橘。
工程目錄如下：
可以看到念赶，工程目錄結(jié)構(gòu)主要分為3部分，分別是：
- android 存放Android相關(guān)的東西恰力，如App圖標
- ios 存放iOS相關(guān)的東西叉谜，如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頁面架構(gòu)
App開發(fā)最重要的就是UI框架，F(xiàn)lutter重新定制一套自己的UI框架香府，在底層使用了Skia進行渲染董栽。
在Flutter中，一切皆是Widget企孩，頁面是Widget锭碳，普通的控件也是Widget。
UI布局和控件
從main.dart中可以看到勿璃，F(xiàn)lutter的布局是一層一層嵌套形成的擒抛。
第一層是Scaffold推汽，一個實現(xiàn)了Material design的布局控件，包含了一個AppBar和一個body歧沪，分別對應(yīng)標題欄和頁面民泵。
第二層body是一個Center布局控件，該布局用于使其子布局即child槽畔，在父布局中居中顯示
最后的子布局是一個Text控件。
整個布局就是在頁面的中間顯示了Hello World胁编。
頁面控件：StatelessWidget 和 StatefulWidget
MyApp繼承的StatelessWidget厢钧，就是其中一個頁面相關(guān)的Widget，這個窗口的特點是靜態(tài)嬉橙，頁面中的數(shù)據(jù)一旦渲染后早直，就不能在更改，一般用于顯示靜態(tài)頁面市框。
另一個StatefulWidget霞扬，則是可以改變狀態(tài)的Widget，頁面的顯示隨著狀態(tài)改變而改變枫振。通過setState方法可以非常方便的修改頁面狀態(tài)喻圃，與現(xiàn)在web動態(tài)綁定框架是類似的。
一個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的業(yè)務(wù)邏輯基本上都在_MyHomePageState中斧拍，這個類繼承了State。
當(dāng)點擊了FloatingActionButton時杖小，就會調(diào)用_incrementCounter()方法進行setState()肆汹，頁面就會跟著改變了。
注：Dart使用下劃線_表示私有予权，如上面的_count和_incrementCounter()
由于Flutter的布局模式昂勉，當(dāng)頁面比較復(fù)雜時，整個布局會變得非常復(fù)雜扫腺，可讀性也大大降低了岗照，修改起來非常麻煩。
另外斧账，F(xiàn)lutter為了布局靈活性谴返，定義了太多的布局控件，幾十個布局看得眼花繚亂咧织，從來沒見過這么多布局的框架嗓袱。
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了习绢，當(dāng)然渠抹，前提是你要先配置好模擬器蝙昙。
如果修改了代碼，就可以直接通過熱加載梧却，直接顯示修改的內(nèi)容奇颠，無需重新安裝打開，大大節(jié)省了調(diào)試時間放航。
總結(jié)
- Flutter的對于熟悉Java或者Android開發(fā)的人來說烈拒，還是比較友好的，可以比較快的熟悉和掌握基本的開發(fā)工具和開發(fā)理念广鳍；
- Flutter App的性能確實還是不錯的荆几，整個的體驗與原生App基本差不多；
- 熱加載非常好用赊时，可以節(jié)省不少時間吨铸；
- 支持數(shù)據(jù)和狀態(tài)自動綁定，通過setState可以非常方便的修改頁面狀態(tài)祖秒；
- Flutter 布局嵌套非车ǎ坑爹，布局復(fù)雜將會非常痛苦竭缝；
- 基本上實現(xiàn)Android和iOS一套代碼通用房维，開發(fā)效率大大提高了。
- 仍然有許多需要改進的地方抬纸，許多特性支持也不太好握巢，如webview這些需要使用第三方插件，或自己定制松却。
現(xiàn)在Flutter仍然為Beta版本暴浦，希望后面可以帶來更多驚喜和更好的體驗吧。
