摘要：注釋處的方法是程序的入口，使用了符號(hào)，這是中單行函數(shù)或方法的簡寫，等價(jià)于如下代碼方法是框架的入口，如果不返回方法，那么執(zhí)行的是一個(gè)控制臺(tái)應(yīng)用。

本文首發(fā)于微信公眾號(hào)「劉望舒」

最近的Google I/O大會(huì)上，F(xiàn)lutter1.5 開始支持移動(dòng)、Web、桌面和嵌入式設(shè)備，從不溫不火的sky一直進(jìn)化到如今熱門的Flutter，F(xiàn)lutter的發(fā)展已經(jīng)超出很多人的想象。我對(duì)跨平臺(tái)技術(shù)一直不感冒，雖然也學(xué)了一些，但更多是為了工作而不是出于興趣，因?yàn)槲艺J(rèn)為它們都是過度產(chǎn)物，不會(huì)掀起多大的風(fēng)浪，但是Flutter可能是個(gè)例外，關(guān)于Flutter的好處網(wǎng)上有很多，這里就不多說了，也不想吹噓這門技術(shù)，只是想說現(xiàn)在是時(shí)候了解Flutter了。

一開始沒想寫Flutter的相關(guān)文章的，因?yàn)檫@些看官方文檔就夠了，但是有不少同學(xué)就想看我寫的，因此我也寫個(gè)Flutter系列。這個(gè)Flutter基礎(chǔ)系列是Flutter系列的入門系列，后面還會(huì)有其他的Flutter系列。既然要學(xué)習(xí)Flutter肯定要先學(xué)習(xí)環(huán)境的搭建，可以在Windows、MAC、Linux上來進(jìn)行Flutter開發(fā)，由于本系列文章是面向Android開發(fā)來編寫的，因此選擇大部分人的都有的Windows平臺(tái)。

本篇文章的目錄為：

Flutter概述

Flutter開發(fā)環(huán)境搭建

運(yùn)行一個(gè)Flutter Demo

Hello World

Flutter是谷歌的移動(dòng)UI框架，可以快速在Android和iOS上構(gòu)建高質(zhì)量的原生用戶界面， 它的前身是谷歌試驗(yàn)項(xiàng)目Sky。主要有以下幾個(gè)特點(diǎn)：
符合各個(gè)平臺(tái)的用戶體驗(yàn)
Flutter內(nèi)置了Material Design和Cupertino風(fēng)格（iOS風(fēng)格）的Widgets，使得我們可以開發(fā)出符合Android和iOS風(fēng)格的應(yīng)用，另外Flutter提供了豐富的motion API、平滑而自然的滑動(dòng)效果和平臺(tái)感知，為用戶帶來全新體驗(yàn)。

響應(yīng)式框架
使用Flutter的響應(yīng)式框架和一系列基礎(chǔ)widget，可以輕松構(gòu)建您的用戶界面。使用功能強(qiáng)大且靈活的API（針對(duì)2D、動(dòng)畫、手勢(shì)、效果等）可以幫助開發(fā)者解決艱難的UI挑戰(zhàn)。

跨平臺(tái)自繪引擎
Flutter與Hybrid App、React Native這些跨平臺(tái)技術(shù)不同，F(xiàn)lutter既沒用使用WebView，也沒有使用各個(gè)平臺(tái)的原生控件，而是本身實(shí)現(xiàn)一個(gè)統(tǒng)一接口的渲染引擎來繪制UI，這樣做可以保證不同平臺(tái)UI的一致性。另外采用自繪引擎后，F(xiàn)lutter在布局過程中不需要像RN那樣要在JavaScript和Native之間通信，可以節(jié)省性能開銷。Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個(gè)2D圖形處理函數(shù)庫，包含字型、坐標(biāo)轉(zhuǎn)換，以及點(diǎn)陣圖都有高效能且簡潔的表現(xiàn)，Skia是跨平臺(tái)的，并提供了非常友好的API。 關(guān)于Flutter與其他跨平臺(tái)技術(shù)的區(qū)別可以查看移動(dòng)開發(fā)的跨平臺(tái)技術(shù)演進(jìn)這篇文章。
采用Dart開發(fā)
Flutter App采用Dart語言來開發(fā)。與JavaScript相比，Dart在 JIT（即時(shí)編譯）模式下，速度與 JavaScript基本持平。但是當(dāng)Dart以 AOT模式運(yùn)行時(shí)，Dart性能要高于JavaScript。

訪問本地功能和SDK并支持插件
Flutter可以復(fù)用Java、Swift或ObjC代碼，訪問Android和iOS上的原生系統(tǒng)功能。另外通過Flutter插件也可以訪問原生系統(tǒng)功能，比如藍(lán)牙、相機(jī)、WiFi等等。

在Windows平臺(tái)開發(fā)的話，官方的環(huán)境要求是Windows 7 SP1或更高版本（64位），至少400 MB的硬盤空間，如果是在Mac和Linux上搭建開發(fā)環(huán)境請(qǐng)查看官方文檔。

2.1 安裝Git for Windows和PowerShell 5.0

Git for Windows下載地址為：git-scm.com/download/wi… + R 輸入cmd，在cmd中輸入git 命令來驗(yàn)證下，比如git --version。 PowerShell是微軟推出的代替cmd的更方便的命令行工具，win7、win8、win10系統(tǒng)都自帶有這個(gè)命令行工具。右鍵點(diǎn)擊WIn10的開始按鈕搜索PowerShell，如果沒有，去powershell官網(wǎng)下載PowerShell，地址為：docs.microsoft.com/zh-cn/power…

2.2 下載Flutter SDK

下載Flutter SDK有多種方法，看看哪種更適合自己：

flutter官網(wǎng)下載最新Beta版本的進(jìn)行安裝：flutter.dev/docs/develo…

Flutter github項(xiàng)目中去下載，地址為：github.com/flutter/flu…

通過 git 命令來下載 Flutter 的 beta 版：

git clone -b beta https://github.com/flutter/flutter.git

這里下載最新的Beta版本就可以了。

將下載下來的zip安裝包解壓到你想安裝Flutter SDK的路徑，比如：F:Flutter。需要注意的是，不要將flutter安裝到需要一些高權(quán)限的路徑，比如C:Program Files。

2.3 配置環(huán)境變量

配置 flutter 環(huán)境變量 如果想在命令行中使用 flutter 命令，需要添加flutter的路徑到系統(tǒng)變量path中。 我的flutter路徑為F:Flutterflutter，那么就將F:Flutterflutterin放到系統(tǒng)變量path中。

在cmd中輸入flutter --version來驗(yàn)證是否配置成功。

配置國內(nèi)鏡像

如果在國內(nèi)安裝或使用Flutter，使用Flutter的官方鏡像或者其他鏡像能夠免于限制并且加快速度，F(xiàn)lutter的官方鏡像為

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

這兩個(gè)鏡像是會(huì)變的，具體可以查看官方說明：flutter.dev/community/c… 除此之外還有上海交通大學(xué) Linux 用戶組：

PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn

這里使用Flutter的官方鏡像，將這兩個(gè)url配置到用戶環(huán)境變量中：

2.4 安裝和檢查各種依賴項(xiàng)

打開cmd輸入如下命令：

flutter doctor

這時(shí)會(huì)打印一些提示信息：

可以看到有五個(gè)類別的依賴項(xiàng)，如果安裝的IDE不同，類別內(nèi)容也會(huì)不同。其中√是沒有問題的類別，！指的是有問題的類別。

Flutter的版本和運(yùn)行環(huán)境

Android的工具鏈的情況

Android Studio的版本，以及Flutter插件安裝情況

IntelliJ IDEA Community的版本，以及Flutter插件安裝情況

設(shè)備的連接情況

安裝任何缺少的依賴項(xiàng)后，可以再次運(yùn)行flutter doctor命令來驗(yàn)證是否已正確設(shè)置所有內(nèi)容。比如第二項(xiàng)有問題，上面提示可以運(yùn)行flutter doctor --android-licenses來解決，照做后，再次運(yùn)行flutter doctor命令，打印的提示信息會(huì)變?yōu)椋?

2.5 設(shè)置編輯器

安裝Android Studio或者 IntelliJ IDEA 安裝Android Studio的過程我就不多說了，需要安裝3.0 或者更高的版本。沒有下載的去這里下載：developer.android.google.cn/studio/

除了Android Studio還可以使用IntelliJ IDEA： IntelliJ IDEA Community, 2017.1版本或更高版本 IntelliJ IDEA Ultimate, 2017.1版本或更高版本 下載地址為：www.jetbrains.com/idea/downlo…

安裝Flutter和Dart插件 Android Studio的File --> settings --> Plugins --> Browse repositories，在搜索框輸入Flutter和Dart來安裝它們。

安裝成功后重啟Android Studio。這時(shí)cmd輸入flutter doctor命令，就會(huì)看到提示信息的Android Studio的版本依賴項(xiàng)為√。

2.6 設(shè)置Android設(shè)備和模擬器

設(shè)置Android設(shè)備和開發(fā)Android一樣，需要注意的的是，這個(gè)設(shè)備的應(yīng)該為Android 4.1（API級(jí)別16）或更高版本。 模擬器選擇Android Studio和Genymotion創(chuàng)建的都可以，推薦使用x86或者x86_64鏡像。 至于怎么連接設(shè)備和創(chuàng)建模擬器就不講了，不是本文的重點(diǎn)。

Android Studio菜單欄的File --> New Flutter Project，選擇Flutter application：

Project name需要小寫，接著設(shè)置Flutter SDK的位置和項(xiàng)目的位置，如果沒有下載Flutter SDK，可以點(diǎn)擊install SDK下載，如下圖所示。

項(xiàng)目創(chuàng)建完成后，在Android Studio頂部的工具欄中的目標(biāo)選擇器里選擇要運(yùn)行的設(shè)備或者模擬器，我這里選擇的是Genymotion創(chuàng)建的Custom Phone(Android 9.0)。

單擊工具欄中的運(yùn)行圖標(biāo)，或調(diào)用菜單項(xiàng)的Run -->Run ‘main.dart’ 運(yùn)行Flutter Demo，效果如下圖所示。

熱重載 Flutter提供了快速開發(fā)周期和熱重載，能夠重新加載一個(gè)實(shí)時(shí)運(yùn)行的應(yīng)用程序的代碼，而無需重新啟動(dòng)或丟失應(yīng)用程序狀態(tài)，我們來做個(gè)實(shí)驗(yàn)。 打開lib/main.dart，將字符串You have pushed the button this many times，改為You have clicked the button this many times。 然后Save All或者點(diǎn)擊工具欄中的黃色閃電圖標(biāo)，就可以發(fā)現(xiàn)字符串更新了我們修改的值。

將lib/main.dart中的所有代碼替換為如下內(nèi)容：

import "package:flutter/material.dart";//1

void main() => runApp(MyApp());//2

class MyApp extends StatelessWidget {//3
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Welcome to Flutter",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Welcome to Flutter"),
        ),
        body: Center(//4
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

這時(shí)Flutter的Hello World就大功告成了。下面對(duì)代碼進(jìn)行簡單的講解：

注釋1處用來引入 Material Design設(shè)計(jì)風(fēng)格的基礎(chǔ)包，每一個(gè)dart文件幾乎都會(huì)引入它，F(xiàn)lutter中提供了豐富的Material widgets。

注釋2處的main方法是Dart程序的入口，使用了=>符號(hào)，這是Dart中單行函數(shù)或方法的簡寫，等價(jià)于如下代碼：

void main(){
return runApp(Widget app);
}

runApp方法是Flutter框架的入口，如果不返回runApp方法，那么執(zhí)行的是一個(gè)Dart控制臺(tái)應(yīng)用。 3. 注釋3處說明MyApp繼承了 StatelessWidget，這會(huì)使應(yīng)用本身也成為一個(gè)widget。Flutter中有一切皆widget的概念，widget分為StatelessWidget（無狀態(tài)widget）和StatefulWidget（有狀態(tài)widget）。 4. build方法用來描述如何用其他較低級(jí)別的widget來顯示自身。 5. MaterialApp包含了App實(shí)現(xiàn)Material Design所需要的一些widget，其中title為在任務(wù)管理窗口中所顯示的應(yīng)用名字，home為應(yīng)用默認(rèn)顯示的界面widget。 6. Scaffold是Material Design布局結(jié)構(gòu)的基本實(shí)現(xiàn)，Scaffold內(nèi)部包含了appBar和body，appBar為應(yīng)用程序欄，它在Scaffold的頂部；body為Scaffold的主要內(nèi)容，通俗來講就是屏幕的大部分。注釋4處，body包含了一個(gè)Center widget，Center widget中有一個(gè)子widget Text，這樣字符Hello World就會(huì)顯示在body的中心。

分享大前端、Android、Java等技術(shù)，助力5萬程序員成長進(jìn)階。