Flutter是由Google創建的UI工具包，使用單一程式庫即可編譯出適用於Mobile、Desktop、Web三個平台的App，因為才剛發展不久，第三方套件庫比較少，但官方提供的UI套件也很夠用，文件也寫得很詳細清楚。Flutter以靜態Widget組建化方式渲染，使用Dart作為開發語言，它更貼近機器語言，不用像Javascript須經過轉換才能與裝置橋接，所以效能也因此提升。

Flutter具備快速開發、可調適的特性：

Fast Development

Flutter支援Hot Reload，開發人員前一秒才剛改完Code，下一秒就能馬上看到App更新後的畫面，無需重新啟動App，可以快速測試、刻介面、修復錯誤。

Flexible UI

使用Widget可以輕鬆地做出符合Material Design的UI介面，而且這些UI帶有流暢的動畫效果，提升App的使用者體驗。

Native Performance

Flutter也針對不同平台做出相對應的UI設計，像是導覽列、滑動效果、字體和圖示等，達到更加出色的原生表現。

針對Web開發人員，官方也對Flutter/Dart與Html/Css做了簡單的比較，讓我們可以”安心的”使用：

Web

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  position: relative; 
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  position: absolute;
  top: 24px;
  left: 24px; 
}

Flutter

var container = Container( // grey box
  child: Stack(
    children: [
      Positioned( // red box
        child:  Container(
          child: Text(
            "Lorem ipsum",
            style: bold24Roboto,
          ),
          decoration: BoxDecoration(
            color: Colors.red[400],
          ),
          padding: EdgeInsets.all(16),
        ),
        left: 24,
        top: 24,
      ),
    ],
  ), 
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

前端工程師們有沒有看起來很熟悉呢～就算沒寫過Dart，只要稍微理解一下，也可以輕鬆做出App介面！

接下來我們就盡情敞開心胸玩Flutter吧