本文首發(fā)于微信公眾號「劉望舒」
前言
最近的Google I/O大會上，Flutter1.5 開始支持移動妒御、Web布疙、桌面和嵌入式設備姆钉，從不溫不火的sky一直進化到如今熱門的Flutter，Flutter的發(fā)展已經超出很多人的想象听诸。我對跨平臺技術一直不感冒坐求，雖然也學了一些，但更多是為了工作而不是出于興趣晌梨，因為我認為它們都是過度產物桥嗤，不會掀起多大的風浪须妻，但是Flutter可能是個例外，關于Flutter的好處網上有很多泛领，這里就不多說了荒吏，也不想吹噓這門技術，只是想說現在是時候了解Flutter了渊鞋。
一開始沒想寫Flutter的相關文章的绰更，因為這些看官方文檔就夠了，但是有不少同學就想看我寫的锡宋，因此我也寫個Flutter系列儡湾。這個Flutter基礎系列是Flutter系列的入門系列，后面還會有其他的Flutter系列员辩。既然要學習Flutter肯定要先學習環(huán)境的搭建盒粮，可以在Windows、MAC奠滑、Linux上來進行Flutter開發(fā)丹皱，由于本系列文章是面向Android開發(fā)來編寫的，因此選擇大部分人的都有的Windows平臺宋税。
本篇文章的目錄為：
- Flutter概述
- Flutter開發(fā)環(huán)境搭建
- 運行一個Flutter Demo
- Hello World
1.Flutter概述
Flutter是谷歌的移動UI框架摊崭，可以快速在Android和iOS上構建高質量的原生用戶界面， 它的前身是谷歌試驗項目Sky杰赛。主要有以下幾個特點：
符合各個平臺的用戶體驗
Flutter內置了Material Design和Cupertino風格（iOS風格）的Widgets呢簸，使得我們可以開發(fā)出符合Android和iOS風格的應用，另外Flutter提供了豐富的motion API乏屯、平滑而自然的滑動效果和平臺感知根时，為用戶帶來全新體驗。
響應式框架
使用Flutter的響應式框架和一系列基礎widget辰晕，可以輕松構建您的用戶界面蛤迎。使用功能強大且靈活的API（針對2D、動畫含友、手勢替裆、效果等）可以幫助開發(fā)者解決艱難的UI挑戰(zhàn)。
跨平臺自繪引擎
Flutter與Hybrid App窘问、React Native這些跨平臺技術不同辆童，Flutter既沒用使用WebView，也沒有使用各個平臺的原生控件惠赫，而是本身實現一個統一接口的渲染引擎來繪制UI把鉴，這樣做可以保證不同平臺UI的一致性。另外采用自繪引擎后汉形，Flutter在布局過程中不需要像RN那樣要在JavaScript和Native之間通信纸镊，可以節(jié)省性能開銷倍阐。Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個2D圖形處理函數庫逗威，包含字型峰搪、坐標轉換，以及點陣圖都有高效能且簡潔的表現凯旭，Skia是跨平臺的概耻，并提供了非常友好的API。
關于Flutter與其他跨平臺技術的區(qū)別可以查看移動開發(fā)的跨平臺技術演進這篇文章罐呼。
采用Dart開發(fā)
Flutter App采用Dart語言來開發(fā)鞠柄。與JavaScript相比，Dart在 JIT（即時編譯）模式下嫉柴，速度與 JavaScript基本持平厌杜。但是當Dart以 AOT模式運行時，Dart性能要高于JavaScript计螺。
訪問本地功能和SDK并支持插件
Flutter可以復用Java夯尽、Swift或ObjC代碼，訪問Android和iOS上的原生系統功能登馒。另外通過Flutter插件也可以訪問原生系統功能匙握，比如藍牙、相機陈轿、WiFi等等圈纺。
2.Flutter開發(fā)環(huán)境搭建
在Windows平臺開發(fā)的話，官方的環(huán)境要求是Windows 7 SP1或更高版本（64位）麦射，至少400 MB的硬盤空間蛾娶，如果是在Mac和Linux上搭建開發(fā)環(huán)境請查看官方文檔。
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 配置環(huán)境變量
配置 flutter 環(huán)境變量
如果想在命令行中使用 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配置到用戶環(huán)境變量中：
2.4 安裝和檢查各種依賴項
打開cmd輸入如下命令：
flutter doctor
這時會打印一些提示信息：
可以看到有五個類別的依賴項庶骄，如果安裝的IDE不同毁渗，類別內容也會不同。其中√是沒有問題的類別单刁，灸异！指的是有問題的類別。
- Flutter的版本和運行環(huán)境
- Android的工具鏈的情況
- Android Studio的版本羔飞，以及Flutter插件安裝情況
- IntelliJ IDEA Community的版本肺樟，以及Flutter插件安裝情況
- 設備的連接情況
安裝任何缺少的依賴項后，可以再次運行flutter doctor命令來驗證是否已正確設置所有內容逻淌。比如第二項有問題么伯，上面提示可以運行flutter doctor --android-licenses來解決，照做后卡儒，再次運行flutter doctor命令田柔，打印的提示信息會變?yōu)椋?br>
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設備和開發(fā)Android一樣，需要注意的的是袜蚕，這個設備的應該為Android 4.1（API級別16）或更高版本糟把。
模擬器選擇Android Studio和Genymotion創(chuàng)建的都可以，推薦使用x86或者x86_64鏡像牲剃。
至于怎么連接設備和創(chuàng)建模擬器就不講了遣疯，不是本文的重點。
3.運行一個Flutter Demo
Android Studio菜單欄的File --> New Flutter Project颠黎，選擇Flutter application：
Project name需要小寫另锋，接著設置Flutter SDK的位置和項目的位置，如果沒有下載Flutter SDK狭归，可以點擊install SDK下載夭坪，如下圖所示。
項目創(chuàng)建完成后过椎，在Android Studio頂部的工具欄中的目標選擇器里選擇要運行的設備或者模擬器室梅，我這里選擇的是Genymotion創(chuàng)建的Custom Phone(Android 9.0)。
單擊工具欄中的運行圖標疚宇，或調用菜單項的Run -->Run ‘main.dart’ 運行Flutter Demo亡鼠，效果如下圖所示。
熱重載
Flutter提供了快速開發(fā)周期和熱重載敷待，能夠重新加載一個實時運行的應用程序的代碼间涵，而無需重新啟動或丟失應用程序狀態(tài)，我們來做個實驗榜揖。
打開lib/main.dart勾哩，將字符串You have pushed the button this many times，改為You have clicked the button this many times举哟。
然后Save All或者點擊工具欄中的黃色閃電圖標思劳，就可以發(fā)現字符串更新了我們修改的值。
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方法，那么執(zhí)行的是一個Dart控制臺應用扼睬。
- 注釋3處說明MyApp繼承了 StatelessWidget，這會使應用本身也成為一個widget。Flutter中有一切皆widget的概念窗宇，widget分為StatelessWidget（無狀態(tài)widget）和StatefulWidget（有狀態(tài)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基礎（一）移動開發(fā)的跨平臺技術演進
Flutter基礎（二）Flutter開發(fā)環(huán)境搭建和Hello World
Flutter基礎（三）Dart快速入門
Flutter基礎（四）開發(fā)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等技術哨苛，還有程序員成長類文章鸽凶。
