每日一言：要奮斗就會(huì)有犧牲二鳄，勝則舉杯相慶，敗則拼死相救。
原創(chuàng)：http://liuwangshu.cn/flutter/primer/2-start.html
前言
這個(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
1.Flutter概述
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ù)的百家爭鳴這篇文章岩四。
采用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等等。
2.Flutter環(huán)境搭建
在Windows平臺(tái)開發(fā)的話，官方的環(huán)境要求是Windows 7 SP1或更高版本（64位）瓷叫，至少400 MB的硬盤空間次氨，如果是在Mac和Linux上搭建開發(fā)環(huán)境請(qǐng)查看官方文檔。
2.1安裝Git For Windows和PowerShell5.0
Git for Windows下載地址為：https://git-scm.com/download/win，如果此前安裝過，win?+ R 輸入cmd，在cmd中輸入git 命令來驗(yàn)證下投储，比如git --version勋眯。
PowerShell是微軟推出的代替cmd的更方便的命令行工具讶坯，win7涎跨、win8屋彪、win10系統(tǒng)都自帶有這個(gè)命令行工具蟹但。右鍵點(diǎn)擊WIn10的開始按鈕搜索PowerShell客叉，如果沒有佛呻，去powershell官網(wǎng)下載PowerShell夜矗，地址為：https://docs.microsoft.com/zh-cn/powershell/scripting/install/installing-windows-powershell?view=powershell-6#upgrading-existing-windows-powershell
2.2 下載Flutter SDK
下載Flutter SDK有多種方法对扶，看看哪種更適合自己：
flutter官網(wǎng)下載最新Beta版本的進(jìn)行安裝：https://flutter.dev/docs/development/tools/sdk/releases
Flutter github項(xiàng)目中去下載，地址為：https://github.com/flutter/flutter/releases。
通過 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:\Flutter\flutter屿良，那么就將F:\Flutter\flutter\bin放到系統(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.cnFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
這兩個(gè)鏡像是會(huì)變的悴务，具體可以查看官方說明：https://flutter.dev/community/china
除此之外還有上海交通大學(xué) Linux 用戶組：
PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cnFLUTTER_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)椋?/p>
2.5 設(shè)置編輯器
安裝Android Studio或者 IntelliJ IDEA
安裝Android Studio的過程我就不多說了矫夯，需要安裝3.0 或者更高的版本豺鼻。沒有下載的去這里下載：https://developer.android.google.cn/studio/
除了Android Studio還可以使用IntelliJ IDEA：
IntelliJ IDEA Community, 2017.1版本或更高版本
IntelliJ IDEA Ultimate, 2017.1版本或更高版本
下載地址為：https://www.jetbrains.com/idea/download/#section=windows
安裝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)。
3.運(yùn)行一個(gè)Flutter Demo
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，效果如下圖所示查牌。
10.png
熱重載
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)字符串更新了我們修改的值久妆。
4.Hello World
將lib/main.dart中的所有代碼替換為如下內(nèi)容：
import'package:flutter/material.dart';//1voidmain()=> runApp(MyApp());//2classMyAppextendsStatelessWidget{//3@overrideWidgetbuild(BuildContext context){returnMaterialApp(title:'Welcome to Flutter',? ? ? home: Scaffold(? ? ? ? appBar: AppBar(title: Text('Welcome to Flutter'),? ? ? ? ),body: Center(//4child: 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à)于如下代碼：
voidmain(){returnrunApp(Widget app);}
runApp方法是Flutter框架的入口油昂，如果不返回runApp方法，那么執(zhí)行的是一個(gè)Dart控制臺(tái)應(yīng)用。
注釋3處說明MyApp繼承了 StatelessWidget破加，這會(huì)使應(yīng)用本身也成為一個(gè)widget。Flutter中有一切皆widget的概念娃圆，widget分為StatelessWidget（無狀態(tài)widget）和StatefulWidget（有狀態(tài)widget）。
build方法用來描述如何用其他較低級(jí)別的widget來顯示自身幕帆。
MaterialApp包含了App實(shí)現(xiàn)Material Design所需要的一些widget，其中title為在任務(wù)管理窗口中所顯示的應(yīng)用名字茧泪，home為應(yīng)用默認(rèn)顯示的界面widget港令。
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的中心。
