前言：很久沒更新文章了荒适，做個(gè)更新；前段時(shí)間，8 9月份在接觸ml kit放祟、機(jī)器學(xué)習(xí)鳍怨、tensorflow相關(guān)的（比較耗時(shí)間，而且基本上都是皮毛）跪妥；由于后面一段時(shí)間工作上實(shí)在是太忙就斷掉了鞋喇；然后這個(gè)月有時(shí)間開始搞搞flutter,后面倒是想試試tensorflow lite，就是不知道有沒有時(shí)間和動(dòng)力;
這篇主要介紹作為一個(gè)android developer最近這段時(shí)間使用flutter(比較初級(jí))的一些感受吧眉撵，具體的技術(shù)細(xì)節(jié)準(zhǔn)備好了侦香，后面的文章會(huì)慢慢分功能模塊整理出來。

作為一個(gè)android程序員纽疟，學(xué)點(diǎn)其他相關(guān)的很正常罐韩；比如web前端也懂一點(diǎn)，后端也懂一點(diǎn)污朽。但是學(xué)一個(gè)東西肯定不是腦袋一熱就去搞散吵，什么都去搞搞，哪有那么多時(shí)間蟆肆。畢竟上班拿工資就要寫android業(yè)務(wù)的矾睦，一周也就下班回來2、3個(gè)小時(shí)和周末是自由的炎功，還要去掉減壓的時(shí)間枚冗。
所以為什么會(huì)去學(xué)flutter呢？

flutter優(yōu)勢：

• 1. 跨平臺(tái)

提起flutter蛇损，最先談的就是它的跨平臺(tái)咯赁温。
用dart語言編寫，一套代碼在android淤齐、ios上運(yùn)行股囊。相比于RN頁面由前端寫，flutter則是以一種新的形勢出現(xiàn)更啄，獨(dú)立于android稚疹、ios、web锈死；這樣的好處是贫堰，前端也不會(huì)flutter穆壕，大家基本都在同一起跑線（個(gè)人感覺）待牵；
當(dāng)demo在兩個(gè)模擬器上都跑起來的時(shí)候還是很開心的，哈哈喇勋。
如果后面Fuchsia出來了缨该，可以跨Fuchsia就更牛逼了。

• 2.性能和開發(fā)相關(guān)

• flutter號(hào)稱每秒60幀川背，性能上是媲美甚至是超過原生開發(fā)的贰拿；
  這點(diǎn)因?yàn)槲覍懙亩际切emo蛤袒，所以感覺不到快慢。github上clone別人的幾個(gè)大一點(diǎn)的項(xiàng)目膨更，跑出來效果基本上感覺不出是flutter寫的妙真，和原生的差不多；

• 關(guān)于熱部署這點(diǎn)荚守，其實(shí)算是和android的instant run類似珍德。但是好像要快一些，比如改一下home里面的一些widget狀態(tài)矗漾，熱部署后秒更新ui锈候，瞬間看到代碼修改后的結(jié)果，還是挺猛的敞贡。大大提高了開發(fā)效率泵琳。不過就是有bug了，這個(gè)后面缺點(diǎn)再說誊役。

• 上手后開發(fā)app還是挺快的获列。因?yàn)椴还苡檬裁撮_發(fā)，最后出來的app肯定是要和產(chǎn)品想要的一樣势木。所以蛛倦，熟悉了基本flutter開發(fā)流程后，android developer使用flutter開發(fā)app流程還是和原生大同小異的啦桌。ios不太清楚溯壶，但是聽一個(gè)ios開發(fā)說，flutter語法以及開發(fā)特點(diǎn)上更像oc甫男。不過android開發(fā)者比ios開發(fā)者的最明顯的優(yōu)勢就是flutter支持androidStuido且改，卻不支持xCode。

• flutter 內(nèi)置了很多東西板驳。比如一些小控件圖片資源又跛，網(wǎng)絡(luò)圖片緩存啥的，用起來很方便若治。

• dart語言特性慨蓝。寫list等數(shù)據(jù)結(jié)構(gòu)、還有類似builder構(gòu)造函數(shù)用起來挺爽的端幼。

• 3.flutter和google的關(guān)系

這段時(shí)間大家都應(yīng)該聽說google和甲骨文公司的糾紛礼烈，以及前段時(shí)間歐盟android收費(fèi)等消息。
android從java到提供kotlin開發(fā)婆跑，然后到現(xiàn)在flutter的出現(xiàn)此熬。
然后就是新的google Fuchsia系統(tǒng)(統(tǒng)一android和chrome os)，也是用dart語言開發(fā)，不確定是不是flutter犀忱。如果后面這個(gè)新的系統(tǒng)真的出來募谎，并且可以在手機(jī)上跑，那么到時(shí)候移動(dòng)端很可能是android ios Fuchsia三分天下了阴汇。
這里就有問題了（以下只是個(gè)人見解数冬，以及一些危機(jī)意識(shí)）：
現(xiàn)在每個(gè)公司除了跨平臺(tái)，都有android搀庶、ios獨(dú)立的開發(fā)小組吉执，那么Fuchsia出來后呢？三個(gè)小組地来？然后發(fā)現(xiàn)flutter寫的在三個(gè)系統(tǒng)都可以跑,那還有必要開三份工資嗎戳玫？
或者說會(huì)保留一些原生開發(fā)，可能一些功能跨平臺(tái)做不了未斑，還是要每個(gè)原生系統(tǒng)自己去實(shí)現(xiàn)（模塊的方式）咕宿。但是大部分還是跨平臺(tái)去實(shí)現(xiàn)了。如果真是這樣蜡秽，那么如果只會(huì)android或者只會(huì)ios府阀，到時(shí)候說不定真的會(huì)涼涼，難受啊馬飛芽突。
但是這也算是一個(gè)機(jī)會(huì)吧试浙，如果Fuchsia真的火起來了，一些大廠或者針對(duì)海外市場的公司應(yīng)該會(huì)去占領(lǐng)這個(gè)新的操作系統(tǒng)的市場寞蚌。到時(shí)候只有小部分開發(fā)者會(huì)flutter田巴，而你剛好在其中（熟練&精通），豈不是美滋滋挟秤。

• 4.其他實(shí)際一點(diǎn)的

  • 今年GDD壹哺，閑魚真是出彩，除了tensorflow lite的應(yīng)用艘刚，flutter的應(yīng)用也是超級(jí)厲害管宵，感覺真是業(yè)界的領(lǐng)頭羊。閑魚的部分務(wù)模塊已經(jīng)用fluuter接到原來的框架了攀甚，并且經(jīng)受住了千萬箩朴、億級(jí)別的考驗(yàn)；說明這東西還是靠譜的秋度。之前還看到知乎上的閑魚技術(shù)官方號(hào)在招flutter開發(fā)炸庞，牛逼的可以去試一下。
  • 現(xiàn)在一些公司的android招聘要求静陈，已經(jīng)把flutter作為和rn燕雁、weex一樣的加分項(xiàng)了。
  • 如果之前你沒有系統(tǒng)的通過官方文檔學(xué)習(xí)（比如學(xué)android鲸拥、java是通過別人整理的資料:書籍拐格、博客、視頻等）刑赶，可以用flutter中文網(wǎng)來練練手捏浊。英語過關(guān)的可以直接看英文版的。官方文檔才是第一手資料撞叨，看別人整理過的東西金踪，別人已經(jīng)幫你踩過坑、思考過了牵敷，而且可能還表達(dá)的不全面胡岔。
    大部分人都想成為墾荒者吧，互聯(lián)網(wǎng)技術(shù)這塊還是國外的先進(jìn)一些枷餐。如果是一項(xiàng)新技術(shù)靶瘸，應(yīng)該是英文文檔先出來，等整理成中文網(wǎng)站就慢一步了毛肋。如果再等國內(nèi)大佬發(fā)博客怨咪、出書籍就更慢了。

flutter的缺點(diǎn)：

說說個(gè)人最近使用flutter后對(duì)flutter的一些吐槽吧

• 1. flutter的包體積比原生開發(fā)的大

會(huì)比android原生apk大一些润匙。因?yàn)殇秩疽娣诺搅薬pp里面诗眨。

image.png

image.png

下面是apk（別人github上的項(xiàng)目，業(yè)務(wù)較少）體積：

image.png

（到目前由于經(jīng)驗(yàn)較少孕讳，不確定業(yè)務(wù)量增大后匠楚，apk大小增長的速度是不是和原生的一致了。如果本來apk就有50多M厂财，flutter引擎如果只是增加7M油啤，一共60M，貌似也可以接受）

至于為什么要把引擎放到app里面蟀苛，現(xiàn)在我也不懂益咬。google了一下，看有人說應(yīng)用程序中包含 C / C ++ 引擎和 Dart VM是為了應(yīng)用程序直接使用本機(jī)指令集運(yùn)行帜平，不涉及任何解釋器幽告。

• 2.flutter的ui 刷新問題

每次重新繪制那一下，特別是列表滑動(dòng)裆甩，android上稍微認(rèn)真觀察冗锁，就會(huì)發(fā)現(xiàn)會(huì)卡一下。ios不明顯嗤栓，android比較明顯冻河。閑魚的詳情頁也有這種情況箍邮。
flutter ui的概念是every thing is widget，就連頁面也是一個(gè)widget叨叙。widget又分有狀態(tài)和無狀態(tài)锭弊。
個(gè)人覺得吧，無狀態(tài)的widget就是為了讓Ui不要重新繪制擂错。
猜測原因（沒看過flutter的cpu proflier味滞，純屬瞎BB）：list滑動(dòng)刷新通過有狀態(tài)widegt來刷新狀態(tài)（setState）來重新繪制頁面造成的瞬間卡頓。

• 3.flutter是用代碼布局钮呀，沒有xml的概念剑鞍，對(duì)android程序員不太友好

（demo是stackoverflow上的一個(gè)flutter使用相對(duì)布局的回答，然后答得太好直接被官網(wǎng)引用了爽醋，牛逼耙鲜稹）
可能ios開發(fā)要好適應(yīng)一些，但是android開發(fā)習(xí)慣了xml布局蚂四，剛開始接觸可能不太適應(yīng)（使用一陣子就習(xí)慣了）形用。
android里面看Ui布局，一般是通過xml來看大概的布局证杭，雖然有時(shí)也會(huì)用代碼動(dòng)態(tài)管理ui田度，不過大部分還是習(xí)慣用xml布局。
比如下圖：
flutter的布局是一層套一層解愤，如果要使用復(fù)雜一點(diǎn)的布局镇饺，就得嵌套多層。下面的布局是list的一個(gè)小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

剛開始是會(huì)覺得這個(gè)好麻煩奸笤，代碼里面利用row包c(diǎn)hildren,children里面有clumn包c(diǎn)hildren，就像一顆ui結(jié)構(gòu)樹一樣哼鬓，然后每個(gè)樹節(jié)點(diǎn)用類似builder模式傳一些參數(shù)進(jìn)去描述具體節(jié)點(diǎn)特征监右。（下圖是官網(wǎng)上另一個(gè)demo的例子，直接copy過來示意一下异希，和這個(gè)demo不對(duì)應(yīng)）

image.png

好消息是可能是因?yàn)閐art和flutter的機(jī)制健盒，雖然沒有xml看ui結(jié)構(gòu)，但是可以通過代碼旁的結(jié)構(gòu)樹來查看称簿。點(diǎn)擊樹里面的節(jié)點(diǎn)還能對(duì)應(yīng)到具體的代碼位置扣癣。還是挺不錯(cuò)的。

image.png

• 4.flutter有bug

• 熱部署有時(shí)候有問題
  雖然flutter的熱部署很厲害憨降，很好用父虑，但是也有熄火的時(shí)候。
  一種情況:
  如果你的app是多個(gè)頁面授药，如果當(dāng)前頁面在c士嚎，但是你改了其他頁面的代碼想看效果呜魄，這時(shí)候熱部署完了之后還是在c頁面的；你想看到其他頁面修改后的效果莱衩，需要手動(dòng)切到那個(gè)頁面爵嗅。這個(gè)可能跟flutter的一個(gè)頁面也是屬于widget有關(guān)。當(dāng)然如果重新運(yùn)行膳殷，他還是會(huì)從main函數(shù)入口開始重新執(zhí)行初始化邏輯。
  另外一種情況：
  上面那種情況其實(shí)還可以接受九火。但是有時(shí)候熱部署會(huì)突然卡住赚窃，然后一直卡在同步數(shù)據(jù)中，一般卡好一會(huì)兒岔激。這時(shí)候因?yàn)樵诘却龍?zhí)行hot reload勒极，所以也點(diǎn)擊不了重新運(yùn)行。

  
  
  image.png
  
  

  等一會(huì)就變成這個(gè)樣子虑鼎，然后就GG了辱匿，必須得重新關(guān)掉ide再打開。炫彩。匾七。

• flutter sdk會(huì)突然抽風(fēng)
  flutter有類似android gradle的管理叫pubspec.yaml

  
  
  image.png
  
  

  有時(shí)不小心點(diǎn)到flutter升級(jí)后，升級(jí)完就GG了江兢。不知道是不是操作不當(dāng)昨忆，然后之前能跑的項(xiàng)目就跑不了了。更正flutter doctor嘗試也不行杉允，最后只好把flutter sdk邑贴，flutter plugin,dart plugin全部清掉，又重新裝一遍叔磷。
  最奇怪的一次是昨天晚上還跑的好好地拢驾，今天白天去公司用androidStuido寫android項(xiàng)目，完全沒動(dòng)flutter相關(guān)的東西改基，晚上回來就跑不了flutter項(xiàng)目了繁疤。各種查，找不到原因秕狰，又重新裝了一次嵌洼。
  我每次都是用的github上flutter的dev分支，前前后后大概重裝了3次封恰，現(xiàn)在終于是穩(wěn)定了麻养。

• 5.學(xué)習(xí)成本不小

  • flutter算是一種新的開發(fā)方式，語言用dart開發(fā)诺舔，雖說dart很像很像java鳖昌，但是有些細(xì)節(jié)和java不太一樣备畦，所以遇到的時(shí)候還是要去查一下。
  • 然后就是flutter除了上面說的移除了xml的布局许昨，純粹用代碼寫布局外懂盐。flutter的控件這些還是要花時(shí)間去掌握。和android原生的用法不一樣糕档，相對(duì)布局的概念也有些差異莉恼。
  • flutter使用的異步線程也和java虛擬機(jī)不太一樣。因?yàn)閖ava里面棧才是線程私有的速那，堆和方法區(qū)是線程共享的俐银，這就要考慮堆里面數(shù)據(jù)的多線程問題。但是flutter里面堆也是線程私有的端仰，所以不用擔(dān)心多線程捶惜。但是個(gè)人感覺如果不花時(shí)間去理解這種模式，后面肯定是會(huì)有問題的荔烧，雖然目前還沒遇到（demo）吱七。
  • 之前也提到過，除非一個(gè)新項(xiàng)目全部用flutter寫（也有可能一些功能要原生去實(shí)現(xiàn)）鹤竭。老的項(xiàng)目里面用flutter踊餐，要用模塊的形式接進(jìn)去。就要涉及到flutter和android原生臀稚、ios原生相接市袖。這就代表如果android去開發(fā)flutter，除了學(xué)習(xí)flutter烁涌，后面還是有概率要去看看ios的一些原生開發(fā)方式（理想情況是android+flutter和ios+flutter）苍碟。類似的接so庫這些也不太一樣
  • 適配問題。而且雖說一套代碼在android撮执、ios上面跑微峰，但是android、ios的風(fēng)格是不一樣的抒钱。有開發(fā)經(jīng)驗(yàn)的都知道ui給的圖,最明顯的就是titleBar兩端是不一樣的蜓肆。
    一個(gè)是Material一個(gè)是Cupertino風(fēng)格。現(xiàn)在我都是按照android的material風(fēng)格寫的谋币，如果是做線上項(xiàng)目仗扬，肯定也要花時(shí)間去適配ios風(fēng)格的。
    不過android開發(fā)嘛蕾额，大家都懂得早芭，各種華為、小米诅蝶、oppo等適配退个，不就是多一個(gè)apple嘛募壕，哈哈哈。
    ps:現(xiàn)在個(gè)人配置：mac pro(雙系統(tǒng)mac windows)语盈、手機(jī)一加5(android)舱馅、ipad2018(ios)、遠(yuǎn)程vps（linux）

總結(jié)&后續(xù)

總的來說flutter還是值得去看一看的刀荒，畢竟是google推出來的代嗤，國內(nèi)閑魚已經(jīng)上線了。
至于學(xué)習(xí)到什么程度需要自己結(jié)合實(shí)際情況把控了缠借，如果能運(yùn)用到公司的項(xiàng)目里面那是最好不過了干毅，在不荒廢原生開發(fā)的情況下all in flutter。如果公司不使用flutter烈炭，就看個(gè)人的規(guī)劃和空余時(shí)間有多少吧溶锭。
畢竟工作日公司要加班宝恶，回去要陪女朋友符隙。
回去要陪女朋友 。 emmmm......看來我還是有時(shí)間的垫毙。
flutter要深入霹疫，還是要花很多時(shí)間的。反正慢慢搞嘛综芥，又沒有明顯的dealine丽蝎，白天學(xué)android，晚上學(xué)點(diǎn)其他的膀藐。
大前端的趨勢是越來越明顯了屠阻，但是誰也說不準(zhǔn)，說不定哪天就突然去世额各，還是得靠原生開發(fā)国觉。