flutter介紹（android開發角度）
前言：很久沒更新文章了，做個更新；前段時間，8 9月份在接觸ml kit、機器學習、tensorflow相關的（比較耗時間，而且基本上都是皮毛）；由於後面一段時間工作上實在是太忙就斷掉了；然後這個月有時間開始搞搞flutter,後面倒是想試試tensorflow lite，就是不知道有沒有時間和動力;
這篇主要介紹作為一個android developer最近這段時間使用flutter(比較初級)的一些感受吧，具體的技術細節準備好了，後面的文章會慢慢分功能模組整理出來。
作為一個android程式員，學點其他相關的很正常；比如web前端也懂一點，後端也懂一點。但是學一個東西肯定不是腦袋一熱就去搞，什麼都去搞搞，哪有那麼多時間。畢竟上班拿工資就要寫android業務的，一週也就下班回來2、3個小時和週末是自由的，還要去掉減壓的時間。
所以為什麼會去學flutter呢？
flutter優勢：
-
1. 跨平臺
提起flutter，最先談的就是它的跨平臺咯。
用dart語言編寫，一套程式碼在android、ios上執行。相比於RN頁面由前端寫，flutter則是以一種新的形勢出現，獨立於android、ios、web；這樣的好處是，前端也不會flutter，大家基本都在同一起跑線（個人感覺）；
當demo在兩個模擬器上都跑起來的時候還是很開心的，哈哈。
如果後面Fuchsia出來了，可以跨Fuchsia就更牛逼了。
-
2.效能和開發相關
-
flutter號稱每秒60幀，效能上是媲美甚至是超過原生開發的；
這點因為我寫的都是小demo，所以感覺不到快慢。github上clone別人的幾個大一點的專案，跑出來效果基本上感覺不出是flutter寫的，和原生的差不多；
-
關於熱部署這點，其實算是和android的instant run類似。但是好像要快一些，比如改一下home裡面的一些widget狀態，熱部署後秒更新ui，瞬間看到程式碼修改後的結果，還是挺猛的。大大提高了開發效率。不過就是有bug了，這個後面缺點再說。
-
上手後開發app還是挺快的。因為不管用什麼開發，最後出來的app肯定是要和產品想要的一樣。所以，熟悉了基本flutter開發流程後，android developer使用flutter開發app流程還是和原生大同小異的。ios不太清楚，但是聽一個ios開發說，flutter語法以及開發特點上更像oc。不過 android開發者比ios開發者的最明顯的優勢就是flutter支援androidStuido，卻不支援xCode 。
-
flutter 內建了很多東西。比如一些小控制元件圖片資源，網路圖片快取啥的，用起來很方便。
-
dart語言特性。寫list等資料結構、還有類似builder建構函式用起來挺爽的。
-
3.flutter和google的關係
這段時間大家都應該聽說google和甲骨文公司的糾紛，以及前段時間歐盟android收費等訊息。
android從java到提供kotlin開發，然後到現在flutter的出現。
然後就是新的google Fuchsia系統(統一android和chrome os)，也是用dart語言開發，不確定是不是flutter。如果後面這個新的系統真的出來，並且可以在手機上跑，那麼到時候移動端很可能是android ios Fuchsia三分天下了。
這裡就有問題了（ 以下只是個人見解，以及一些危機意識 ）：
現在每個公司除了跨平臺，都有android、ios獨立的開發小組，那麼Fuchsia出來後呢？三個小組？然後發現flutter寫的在三個系統都可以跑,那還有必要開三份工資嗎？
或者說會保留一些原生開發，可能一些功能跨平臺做不了，還是要每個原生系統自己去實現（模組的方式）。但是大部分還是跨平臺去實現了。如果真是這樣，那麼如果只會android或者只會ios，到時候說不定真的會涼涼，難受啊馬飛。
但是這也算是一個機會吧，如果Fuchsia真的火起來了，一些大廠或者針對海外市場的公司應該會去佔領這個新的作業系統的市場。到時候只有小部分開發者會flutter，而你剛好在其中（熟練&精通），豈不是美滋滋。
-
4.其他實際一點的
- 今年GDD，閒魚真是出彩，除了tensorflow lite的應用，flutter的應用也是超級厲害，感覺真是業界的領頭羊。閒魚的部分務模組已經用fluuter接到原來的框架了，並且經受住了千萬、億級別的考驗；說明這東西還是靠譜的。之前還看到知乎上的閒魚技術官方號在招flutter開發，牛逼的可以去試一下。
- 現在一些公司的android招聘要求，已經把flutter作為和rn、weex一樣的加分項了。
- 如果之前你沒有系統的通過官方文件學習（比如學android、java是通過別人整理的資料:書籍、部落格、視訊等），可以用 ofollow,noindex">flutter中文網 來練練手。英語過關的可以直接看英文版的。官方文件才是第一手資料，看別人整理過的東西，別人已經幫你踩過坑、思考過了，而且可能還表達的不全面。
大部分人都想成為墾荒者吧，網際網路技術這塊還是國外的先進一些。如果是一項新技術，應該是英文文件先出來，等整理成中文網站就慢一步了。如果再等國內大佬發部落格、出書籍就更慢了。
flutter的缺點：
說說個人最近使用flutter後對flutter的一些吐槽吧
-
1. flutter的包體積比原生開發的大
會比android原生apk大一些。因為渲染引擎放到了app裡面。
image.png
image.png
下面是apk（別人github上的專案，業務較少）體積：
image.png
（到目前由於經驗較少，不確定業務量增大後，apk大小增長的速度是不是和原生的一致了。如果本來apk就有50多M，flutter引擎如果只是增加7M，一共60M，貌似也可以接受）
至於為什麼要把引擎放到app裡面，現在我也不懂。google了一下，看有人說應用程式中包含 C / C ++ 引擎和 Dart VM是為了應用程式直接使用本機指令集執行，不涉及任何直譯器。
-
2.flutter的ui 重新整理問題
每次重新繪製那一下，特別是列表滑動，android上稍微認真觀察，就會發現會卡一下。ios不明顯，android比較明顯。閒魚的詳情頁也有這種情況。
flutter ui的概念是every thing is widget，就連頁面也是一個widget。widget又分有狀態和無狀態。
個人覺得吧，無狀態的widget就是為了讓Ui不要重新繪製。
猜測原因（沒看過flutter的cpu proflier，純屬瞎BB）：list滑動重新整理通過有狀態widegt來重新整理狀態（setState）來重新繪製頁面造成的瞬間卡頓。
-
3.flutter是用程式碼佈局，沒有xml的概念，對android程式設計師不太友好
（demo是stackoverflow上的一個flutter使用相對佈局的回答，然後答得太好直接被官網引用了，牛逼啊）
可能ios開發要好適應一些，但是android開發習慣了xml佈局，剛開始接觸可能不太適應（使用一陣子就習慣了）。
android裡面看Ui佈局，一般是通過xml來看大概的佈局，雖然有時也會用程式碼動態管理ui，不過大部分還是習慣用xml佈局。
比如下圖：
flutter的佈局是一層套一層，如果要使用複雜一點的佈局，就得巢狀多層。下面的佈局是list的一個小item。
class Song extends StatelessWidget {
const Song({this.title, this.author, this.likes});
final String title;
final String author;
final int likes;
@override
Widget build(BuildContext context) {
TextTheme textTheme = Theme.of(context).textTheme;
return new Container(
margin: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 0),
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.3),
borderRadius: new BorderRadius.circular(5.0),
),
child: new IntrinsicHeight(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(
left: 0, top: 4.0, bottom: 4.0, right: 10.0),
child: new CircleAvatar(
backgroundImage: new NetworkImage(
'http://thecatapi.com/api/images/get?format=src'
'&size=small&type=jpg#${title.hashCode}'),
radius: 20.0,
),
),
new Expanded(
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Text(title, style: textTheme.subhead),
new Text(author, style: textTheme.caption),
],
),
),
),
new Container(
margin: new EdgeInsets.symmetric(horizontal: 5.0),
child: new InkWell(
child: new Icon(Icons.play_arrow, size: 40.0),
onTap: () {
// TODO(implement)
},
),
),
new Container(
margin: new EdgeInsets.symmetric(horizontal: 5.0),
child: new InkWell(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Icon(Icons.favorite, size: 25.0),
new Text('${likes ?? ''}'),
],
),
onTap: () {
// TODO(implement)
},
),
),
],
),
),
);
}
}
image.png
剛開始是會覺得這個好麻煩，程式碼裡面利用row包children,children裡面有clumn包children，就像一顆ui結構樹一樣，然後每個樹節點用類似builder模式傳一些引數進去描述具體節點特徵。（下圖是官網上另一個demo的例子，直接copy過來示意一下，和這個demo不對應）
image.png
好訊息是可能是因為dart和flutter的機制，雖然沒有xml看ui結構，但是可以通過程式碼旁的結構樹來檢視。點選樹裡面的節點還能對應到具體的程式碼位置。還是挺不錯的。
image.png
-
4.flutter有bug
-
熱部署有時候有問題
雖然flutter的熱部署很厲害，很好用，但是也有熄火的時候。
一種情況:
如果你的app是多個頁面，如果當前頁面在c，但是你改了其他頁面的程式碼想看效果，這時候熱部署完了之後還是在c頁面的；你想看到其他頁面修改後的效果，需要手動切到那個頁面。這個可能跟flutter的一個頁面也是屬於widget有關。當然如果重新執行，他還是會從main函式入口開始重新執行初始化邏輯。
另外一種情況：
上面那種情況其實還可以接受。但是有時候熱部署會突然卡住，然後一直卡在同步資料中，一般卡好一會兒。這時候因為在等待執行hot reload，所以也點選不了重新執行。
image.png
等一會就變成這個樣子，然後就GG了，必須得重新關掉ide再開啟。。。
-
flutter sdk會突然抽風
flutter有類似android gradle的管理叫pubspec.yaml
image.png
有時不小心點到flutter升級後，升級完就GG了。不知道是不是操作不當，然後之前能跑的專案就跑不了了。更正flutter doctor嘗試也不行，最後只好把flutter sdk，flutter plugin,dart plugin全部清掉，又重新裝一遍。
最奇怪的一次是昨天晚上還跑的好好地，今天白天去公司用androidStuido寫android專案，完全沒動flutter相關的東西，晚上回來就跑不了flutter專案了。各種查，找不到原因，又重新裝了一次。
我每次都是用的github上flutter的dev分支，前前後後大概重灌了3次，現在終於是穩定了。
-
5.學習成本不小
- flutter算是一種新的開發方式，語言用dart開發，雖說dart很像很像java，但是有些細節和java不太一樣，所以遇到的時候還是要去查一下。
- 然後就是flutter除了上面說的移除了xml的佈局，純粹用程式碼寫佈局外。flutter的控制元件這些還是要花時間去掌握。和android原生的用法不一樣，相對佈局的概念也有些差異。
- flutter使用的非同步執行緒也和java虛擬機器不太一樣。因為java裡面棧才是執行緒私有的，堆和方法區是執行緒共享的，這就要考慮堆裡面資料的多執行緒問題。但是flutter裡面堆也是執行緒私有的，所以不用擔心多執行緒。但是個人感覺如果不花時間去理解這種模式，後面肯定是會有問題的，雖然目前還沒遇到（demo）。
- 之前也提到過，除非一個新專案全部用flutter寫（也有可能一些功能要原生去實現）。老的專案裡面用flutter，要用模組的形式接進去。就要涉及到flutter和android原生、ios原生相接。這就代表如果android去開發flutter，除了學習flutter，後面還是有概率要去看看ios的一些原生開發方式（理想情況是android+flutter和ios+flutter）。類似的接so庫這些也不太一樣
- 適配問題。而且雖說一套程式碼在android、ios上面跑，但是android、ios的風格是不一樣的。有開發經驗的都知道ui給的圖,最明顯的就是titleBar兩端是不一樣的。
一個是Material一個是Cupertino風格。現在我都是按照android的material風格寫的，如果是做線上專案，肯定也要花時間去適配ios風格的。
不過android開發嘛，大家都懂得，各種華為、小米、oppo等適配，不就是多一個apple嘛，哈哈哈 。
ps:現在個人配置：mac pro(雙系統mac windows)、手機一加5(android)、ipad2018(ios)、遠端vps（linux）
總結&後續
總的來說flutter還是值得去看一看的，畢竟是google推出來的，國內閒魚已經上線了。
至於學習到什麼程度需要自己結合實際情況把控了，如果能運用到公司的專案裡面那是最好不過了，在不荒廢原生開發的情況下all in flutter。如果公司不使用flutter，就看個人的規劃和空餘時間有多少吧。
畢竟工作日公司要加班，回去要陪女朋友。
。 emmmm......看來我還是有時間的。
flutter要深入，還是要花很多時間的。反正慢慢搞嘛，又沒有明顯的dealine，白天學android，晚上學點其他的。
大前端的趨勢是越來越明顯了，但是誰也說不準，說不定哪天就突然去世，還是得靠原生開發。