Flutter第一次上手作個app

做爲一個web前端開發人員，寫多了html/js/css 就很疲倦了，精力之餘就總想折騰點什麼，咱們都有一個作app的夢。可能會搜過：vue怎麼作app，h5怎麼作app，react怎麼作app之類的，或許也用過ionic uniapp 等框架把打包成app，儘管各類坑，可是爲一次開發多平臺使用，想一想仍是很不錯的，不少時候公司爲了節省開發成本不得不用這種開發方式，因此做爲會web前端技術的掌握一兩個快速開發app的的方式仍是頗有必要的。

我爲何選擇學習一個和html不相干的flutter？

我以爲這多是一個趨勢，將來會出現各類各樣的終端設備，而不侷限於手機，電腦。或許，做爲一個普通用戶，你已不在須要手機，電腦，也能夠隨時獲取信息，也就是說只要是能顯示東西的物體均可以用上flutter，例如你的水杯、茶几、燃氣竈、冰箱、鏡子等固定顯示設備、也或手錶等承載將來新系統的任何可移動設備 ，相信谷歌的的遠景。

flutter 初次使用

寫多了html即寫即所見，首次編寫可能會懵，不是flutter嘛，爲何文件命名不和vue同樣 xxx.vue，用xxx.flutter 而是xxx.dart呢？Material \MaterialApp 什麼玩意？Scaffold 和Stack 有關係嗎？何時用獲得Scaffold？什麼狀況下要用Stack? 這些組件中的詞彙量是挺多的，英文很差的同窗就像我打開翻譯，理解中文意思的才能更好的理解他的做用，不少時候對於一種新語言，不是很差學習使用，而是晦澀的英文就把咱們攔住了。對於困惑如何解決：第一官方文檔，第二百度，至於學習交流羣最好就不要去問了，本身用本身熟悉的方式去獲取能理解的答案。

佈局

經過佈局咱們能夠逐步的瞭解widget 組件，flutter一切皆爲組件和萬物皆對象一個道理 。app裏你所看到的一切均可以做爲組件Widget（按鈕、輸入框、卡片、列表、佈局方式、動畫處理等），經過不一樣Widget 組合成各式各樣你須要的組件。總體來講flutter佈局更加規範，具備約束性，沒有html/css顯得自由，但html能顯示的效果經過flutter同樣能夠表達出來。例：

一個紅色的盒子使子元素圖片居中圖片顯示對比

html:
    <div style="text-align:center;display:inline-block;width:100px;height:100px;color:red">
      <img src="xxx" style="width:50px;"/>
     </div>
  flutter: 
     Container(
        alignment:Alignment.center,
        color:Colors.red,
        width:100.0,
        height:100.0,
        child:new Image(image: new NetworkImage('xxx'),width:50)
        )複製代碼

html:
<div style="width:100px;height:100px;color:red"> 
 <img src="xxx" style="display:block;margin:25px auto;width:50px;">
</div>

flutter:
  Container(
   alignment:Alignment.center,
   color:Colors.red,
   width:100.0,
   height:100.0,
   Center(child:
      new Image(image: new NetworkImage('xxx'),width:50)
   )
)複製代碼

三個"你好"橫向佈局 對比

html:
<ul class="width:500px;display:flex;justify-content:space-between;"> 
  <li style="background:red;text-align:center;"> 
     <span style="color:white;font-weight:bold;">你好<span>
  </li>  
  <li style="background:green;text-align:left;"> 你好</li>
  <li style="background:blue;text-align:right;"> 你好</li>
</ul>


flutter:
Container(
 width:500,  
 child:Row(
     mainAxisAlignment:MainAxisAlignment.spaceBetween,
     children: <Widget>[
        Container(color:Colors.red,
                  child:Text('你好',
                      textAlign: TextAlign.center,
                      TextStyle(color:Colors.white,fontWeight:FontWeight.bold)
                         )
                 ),
        Container(color:Colors.red,child:Text('你好',textAlign: TextAlign.left,)),
        Container(color:Colors.red,child:Text('你好',textAlign: TextAlign.right,)) 
      ]
 )
)複製代碼

第三方插件

想要快速的實現一些功能確定要使用一些第三方插件包，比如npm 安裝依賴包

flutter 項目中的 pubspec.yaml   命令 flutter get

vue項目中package.json  命令 npm install複製代碼

初步完成展現

github.com/nullno/flut…

安卓下載地址

nullno.github.io/flutter-vmu…