本文首發于微信公眾號「劉望舒」
前言
最近的Google I/O大會上，Flutter1.5 開始支持移動、Web、桌面和嵌入式設備，從不溫不火的sky一直進化到如今熱門的Flutter，Flutter的發展已經超出很多人的想象。我對跨平臺技術一直不感冒，雖然也學了一些，但更多是為了工作而不是出于興趣，因為我認為它們都是過度產物，不會掀起多大的風浪，但是Flutter可能是個例外，關于Flutter的好處網上有很多，這里就不多說了，也不想吹噓這門技術，只是想說現在是時候了解Flutter了。
一開始沒想寫Flutter的相關文章的，因為這些看官方文檔就夠了，但是有不少同學就想看我寫的，因此我也寫個Flutter系列。這個Flutter基礎系列是Flutter系列的入門系列，后面還會有其他的Flutter系列。既然要學習Flutter肯定要先學習環境的搭建，可以在Windows、MAC、Linux上來進行Flutter開發，由于本系列文章是面向Android開發來編寫的，因此選擇大部分人的都有的Windows平臺。
本篇文章的目錄為：
- Flutter概述
- Flutter開發環境搭建
- 運行一個Flutter Demo
- Hello World
1.Flutter概述
Flutter是谷歌的移動UI框架，可以快速在Android和iOS上構建高質量的原生用戶界面， 它的前身是谷歌試驗項目Sky。主要有以下幾個特點：
符合各個平臺的用戶體驗
Flutter內置了Material Design和Cupertino風格（iOS風格）的Widgets，使得我們可以開發出符合Android和iOS風格的應用，另外Flutter提供了豐富的motion API、平滑而自然的滑動效果和平臺感知，為用戶帶來全新體驗。
響應式框架
使用Flutter的響應式框架和一系列基礎widget，可以輕松構建您的用戶界面。使用功能強大且靈活的API（針對2D、動畫、手勢、效果等）可以幫助開發者解決艱難的UI挑戰。
跨平臺自繪引擎
Flutter與Hybrid App、React Native這些跨平臺技術不同，Flutter既沒用使用WebView，也沒有使用各個平臺的原生控件，而是本身實現一個統一接口的渲染引擎來繪制UI，這樣做可以保證不同平臺UI的一致性。另外采用自繪引擎后，Flutter在布局過程中不需要像RN那樣要在JavaScript和Native之間通信，可以節省性能開銷。Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個2D圖形處理函數庫，包含字型、坐標轉換，以及點陣圖都有高效能且簡潔的表現，Skia是跨平臺的，并提供了非常友好的API。
關于Flutter與其他跨平臺技術的區別可以查看移動開發的跨平臺技術演進這篇文章。
采用Dart開發
Flutter App采用Dart語言來開發。與JavaScript相比，Dart在 JIT（即時編譯）模式下，速度與 JavaScript基本持平。但是當Dart以 AOT模式運行時，Dart性能要高于JavaScript。
訪問本地功能和SDK并支持插件
Flutter可以復用Java、Swift或ObjC代碼，訪問Android和iOS上的原生系統功能。另外通過Flutter插件也可以訪問原生系統功能，比如藍牙、相機、WiFi等等。
2.Flutter開發環境搭建
在Windows平臺開發的話，官方的環境要求是Windows 7 SP1或更高版本（64位），至少400 MB的硬盤空間，如果是在Mac和Linux上搭建開發環境請查看官方文檔。
2.1 安裝Git for Windows和PowerShell 5.0
Git for Windows下載地址為：https://git-scm.com/download/win，如果此前安裝過，win + R 輸入cmd，在cmd中輸入git 命令來驗證下，比如git --version。
PowerShell是微軟推出的代替cmd的更方便的命令行工具，win7、win8、win10系統都自帶有這個命令行工具。右鍵點擊WIn10的開始按鈕搜索PowerShell，如果沒有，去powershell官網下載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官網下載最新Beta版本的進行安裝：https://flutter.dev/docs/development/tools/sdk/releases
- Flutter github項目中去下載，地址為：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安裝到需要一些高權限的路徑，比如C:\Program Files\。
2.3 配置環境變量
配置 flutter 環境變量
如果想在命令行中使用 flutter 命令，需要添加flutter的路徑到系統變量path中。
我的flutter路徑為F:\Flutter\flutter，那么就將F:\Flutter\flutter\bin放到系統變量path中。
在cmd中輸入flutter --version來驗證是否配置成功。
配置國內鏡像
如果在國內安裝或使用Flutter，使用Flutter的官方鏡像或者其他鏡像能夠免于限制并且加快速度，Flutter的官方鏡像為
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
這兩個鏡像是會變的，具體可以查看官方說明：https://flutter.dev/community/china
除此之外還有上海交通大學 Linux 用戶組：
PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
這里使用Flutter的官方鏡像，將這兩個url配置到用戶環境變量中：
2.4 安裝和檢查各種依賴項
打開cmd輸入如下命令：
flutter doctor
這時會打印一些提示信息：
可以看到有五個類別的依賴項，如果安裝的IDE不同，類別內容也會不同。其中√是沒有問題的類別，！指的是有問題的類別。
- Flutter的版本和運行環境
- Android的工具鏈的情況
- Android Studio的版本，以及Flutter插件安裝情況
- IntelliJ IDEA Community的版本，以及Flutter插件安裝情況
- 設備的連接情況
安裝任何缺少的依賴項后，可以再次運行flutter doctor命令來驗證是否已正確設置所有內容。比如第二項有問題，上面提示可以運行flutter doctor --android-licenses來解決，照做后，再次運行flutter doctor命令，打印的提示信息會變為：
2.5 設置編輯器
安裝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。這時cmd輸入flutter doctor命令，就會看到提示信息的Android Studio的版本依賴項為√。
2.6 設置Android設備和模擬器
設置Android設備和開發Android一樣，需要注意的的是，這個設備的應該為Android 4.1（API級別16）或更高版本。
模擬器選擇Android Studio和Genymotion創建的都可以，推薦使用x86或者x86_64鏡像。
至于怎么連接設備和創建模擬器就不講了，不是本文的重點。
3.運行一個Flutter Demo
Android Studio菜單欄的File --> New Flutter Project，選擇Flutter application：
Project name需要小寫，接著設置Flutter SDK的位置和項目的位置，如果沒有下載Flutter SDK，可以點擊install SDK下載，如下圖所示。
項目創建完成后，在Android Studio頂部的工具欄中的目標選擇器里選擇要運行的設備或者模擬器，我這里選擇的是Genymotion創建的Custom Phone(Android 9.0)。
單擊工具欄中的運行圖標，或調用菜單項的Run -->Run ‘main.dart’ 運行Flutter Demo，效果如下圖所示。
熱重載
Flutter提供了快速開發周期和熱重載，能夠重新加載一個實時運行的應用程序的代碼，而無需重新啟動或丟失應用程序狀態，我們來做個實驗。
打開lib/main.dart，將字符串You have pushed the button this many times，改為You have clicked the button this many times。
然后Save All或者點擊工具欄中的黃色閃電圖標，就可以發現字符串更新了我們修改的值。
4.Hello World
將lib/main.dart中的所有代碼替換為如下內容：
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'),
),
),
);
}
}
這時Flutter的Hello World就大功告成了。下面對代碼進行簡單的講解：
- 注釋1處用來引入 Material Design設計風格的基礎包，每一個dart文件幾乎都會引入它，Flutter中提供了豐富的Material widgets。
- 注釋2處的main方法是Dart程序的入口，使用了
=>符號，這是Dart中單行函數或方法的簡寫，等價于如下代碼：
void main(){
return runApp(Widget app);
}
runApp方法是Flutter框架的入口，如果不返回runApp方法，那么執行的是一個Dart控制臺應用。
- 注釋3處說明MyApp繼承了 StatelessWidget，這會使應用本身也成為一個widget。Flutter中有一切皆widget的概念，widget分為StatelessWidget（無狀態widget）和StatefulWidget（有狀態widget）。
- build方法用來描述如何用其他較低級別的widget來顯示自身。
- MaterialApp包含了App實現Material Design所需要的一些widget，其中title為在任務管理窗口中所顯示的應用名字，home為應用默認顯示的界面widget。
- Scaffold是Material Design布局結構的基本實現，Scaffold內部包含了appBar和body，appBar為應用程序欄，它在Scaffold的頂部；body為Scaffold的主要內容，通俗來講就是屏幕的大部分。注釋4處，body包含了一個Center widget，Center widget中有一個子widget Text，這樣字符Hello World就會顯示在body的中心。
Flutter基礎系列
Flutter基礎（一）移動開發的跨平臺技術演進
Flutter基礎（二）Flutter開發環境搭建和Hello World
Flutter基礎（三）Dart快速入門
Flutter基礎（四）開發Flutter應用前需要掌握的Basic Widget
Flutter基礎（五）Material組件之MaterialApp、Scaffold、AppBar
Flutter基礎（六）Material組件之BottomNavigationBar、TabBar、Drawer
Flutter基礎（七）Scrolling Widget之ListView、GridView、PageView
Flutter基礎（八）手勢相關Widget：GestureDetector和Dismissible
Flutter基礎（九）資源和圖片
Flutter基礎（十）布局Widget快速入門
Flutter基礎（十一）網絡請求（Dio）與JSON數據解析
Flutter基礎（十二）路由（頁面跳轉）與數據傳遞
Flutter基礎（十三）Flutter與Android的相互通信
這里不僅分享大前端、Android、Java等技術，還有程序員成長類文章。
