一、Flutter是什么？

根據Flutter中文官網(英文官網)的解釋：Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，并且Flutter是完全免費、開源的。使用的語言是Dart

tips:1.這段話直接摘抄自官網，這里我把英文和中文官網都放上了，有興趣的根據自己選擇進行閱讀。因為有時候翻譯過來的東西容易造成表意不明。

? ? ? ? 2.本來這里應該提一下Google全新的操作系統Fuchsia的，因為Fuchsia 的官方應用框架就是 Flutter + Dart?但是因為才疏學淺，了解并不多，所以這里不打算展開講了。

特點：

1.快速開發：Flutter的熱重載可以快速地進行測試、構建UI、添加功能并更快地修復錯誤。

????????根據英文的寫法應該是叫做Hot Reload。就比如我們平時做安卓開發有的地方本來只需要做一些簡單的修改，你改完想看下效果，就得運行項目在模擬器或者手機上面，有些大型的項目編譯起來就比較頭疼，雖然現在有一些組件化的思想來解決這個問題，但是效果也不是盡善盡美。Flutter可以做過在亞毫秒級（官網是這么吹的）重新渲染界面，并且不會丟失狀態，而不是重新運行整個項目（官網有演示）。

2.富有表現力，漂亮的用戶界面：自帶的Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而自然的滑動效果。

????????Flutter的所有Widgets目錄。這里的Widgets就相當于android里面的View。不過他們肯定是有區別的，Widget僅支持一幀，并且在每一幀上，Flutter的框架都會創建一個Widget實例樹(相當于一次性繪制整個界面)。 相比之下，在Android上View繪制結束后，就不會重繪，直到調用invalidate時才會重繪。在Flutter里面萬物皆Widget，界面是Widget，普通控件也是Widget。這些組件我大致看了一下，基本上很多都是可以跟android組件類似或對應的。

????????寫過網頁的小伙伴們看到這個Row和Colume可能會有點熟悉，因為這個概念就是從web那邊搬過來的，而且Flutter的設計靈感也是從React那里來的。

3.響應式框架：使用Flutter的現代、響應式框架，和一系列基礎widget，輕松構建您的用戶界面。

????????Flutter是采用響應式的框架來構建的，中心思想是用組件(widget)構建你的UI。組件描述了在給定其當前配置和狀態時他們顯示的樣子。但是這里要注意的一點是，不像Android里的view是可以直接修改的，Flutter的設計理念里widget是不可變的，不會直接更新，而必須使用Widget的狀態。

4.訪問本地功能和SDK：Flutter可以復用現有的Java、Swift或ObjC代碼，訪問iOS和Android上的原生系統功能和系統SDK。

????????字面意思，所以不解釋。。。。。

5.統一的應用開發體驗：Flutter擁有豐富的工具和庫，可以幫助開發者輕松地同時在iOS和Android系統中實現想法和創意。

????????說實話我不太相信。因為現在還是屬于預覽版階段，完善的社區和使用群體都沒有。我寫這篇文章包括碰到問題的時候，百度基本上是找不到答案的，Google出來的全是英文。也是自己生啃了幾篇英文的，才總結出來一些。

6.原生性能：Flutter包含了許多核心的widget，如滾動、導航、圖標和字體等，這些都可以在iOS和Android上達到原生應用一樣的性能。

????????這一塊的話，自己還沒正式開始寫，也不好下定論，持觀望態度。

二、Flutter和ReactNative的區別

???????聽我上面講了這么多，肯定有人要說，兩三年前ReactNative也是這么吹的，但是現在已經被拍死在沙灘上了。區別比較大的大一點就是ReactNative核心是通過Javascript開發，執行時需要Javascript解釋器，UI是通過原生控件渲染。

? ? ? 但是Flutter與用于構建移動應用程序的其它大多數框架不同，因為Flutter既不使用WebView，也不使用操作系統的原生控件。 相反，Flutter使用自己的高性能渲染引擎來繪制widget。Flutter使用C、C ++、Dart和Skia（2D渲染引擎）構建。在IOS上，Flutter引擎的C/C ++代碼使用LLVM編譯，任何Dart代碼都是AOT編譯為本地代碼的，Flutter應用程序使用本機指令集運行（不涉及解釋器）。而在Android下，Flutter引擎的C/C ++代碼是用Android的NDK編譯的，任何Dart代碼都是AOT編譯成本地代碼的，Flutter應用程序依然使用本機指令集運行（不涉及解釋器）。因此，Flutter能達到原生應用一樣的性能。

對比圖：左邊->ReactNative。????????????????????????右邊->Flutter。

三、Flutter的運行環境配置

????? ??環境的配置請參照官網的這篇說明Flutter環境配置，我也是照著這個配置。跟Androidsdk和jdk配置類似。

四、AndroidStudio創建Flutter項目。

?走到這一步的前提是你已經安裝好了FLutter和Dart的運行環境，要不然就算你裝了下面這兩個插件也是沒用的，切記，切記。安裝兩個插件，一個叫Dart，一個叫Flutter。推薦用as3.0以上的版本，因為我在2.x的版本失敗了。

????????這里直接搜Flutter點擊Install就可以了，他會提示你去安裝Dart，然后一直確定就可以了，安裝好之后重啟。在as左上角Flie->New這里就會出現這個東西

????????點一下創建Flutter項目，里面會讓你填Flutter SDK的路徑，這個路徑一定要弄對，就是Flutter的文件夾全路徑。項目名，項目路徑什么的就隨你喜歡了。創建成功之后里面是這樣子的

????????如果熟悉ReactNative的朋友對這些目錄并不會陌生，因為Flutter和那個類似，這里大概分四個文件夾，android就是表示安卓程序的入口，跟我們平時創建的安卓項目很像，不過他這里的MainActivity繼承的是FlutterActivity。ios當然就是ios程序入口，lib就是主要代碼邏輯所在的地方，安卓和ios都是用這里的同一套的代碼的，可以看到文件結尾是.dart。test就是測試的。

? ? ? ?接下來我們打開main.dart文件，就像我們創建一個安卓項目一樣，里面肯定不是空的，是有一些自帶的dart代碼的。

這一段就是上面提到過的Dart語言了，可以看到其實不是特別美觀。這個main.dart把我嚇到了，我什么都還沒寫，直接一打開算上注釋接近150行。這里我去掉了一些多余的注釋，留下了一些簡單的，應該看注釋就大概能知道每一部分是干啥的了。說實話有些部分我暫時也不清楚是干啥的，不過先不管了，運行一下再說。

根據這個運行后的圖片再去看上面的一個個class就大概可以看得懂了：

????????1、void main() => runApp(new MyApp());指定程序的入口，在這里就是MyApp，這個比較像ReactNative里面ES6的寫法。

????????2、第一個class MyApp就是指定圖片上最上面那個“Flutter Demo Home Page”的主題，顏色，字體的。在這里他是無狀態的（StatelessWidget)。

????????3、第二個class MyHomePage創建了一個有狀態的Widget（StatefulWidget），并通過這段代碼_MyHomePageState createState() => new _MyHomePageState();去指定管理他狀態的類，也就是第三個class，可以看到他們的名字是對應的。

????????4、第三個class _MyHomePageState()就是改變狀態的代碼，也就是渲染界面的實際代碼，因為上面我們說了Widget是通過改變狀態來控制的。里面的build就是主入口了，可以看到里面有appBar,body,floatingActionButton之類的，每一個后面跟著他們的的文本大小啊，文本內容。排列方式什么的。就相當于我們在安卓開發中xml文件里面的內容，Flutter都是寫在代碼上面的。

tip:解釋一下這個有狀態和無狀態的意思：

????????StatelessWidget，這個的特點是靜態，頁面中的數據一旦渲染后，就不能在更改，一般用于顯示靜態頁面。

????????StatefulWidget，則是可以改變狀態的Widget，頁面的顯示隨著狀態改變而改變。通過setState方法可以非常方便的修改頁面狀態，與現在web動態綁定框架是類似的。

五、總結

暫時先告一段落了，自己也是這兩天才開始正式了解這個東西。先是打算從一個大致的結構先去理解這個東西是啥。然后再從語法和組件去學習。接下來打算學習一些有關Dart語言的內容，Flutter被詬病最多也是這個問題，為什么要采用可讀性這么差的Dart的語言，說實話，我也覺得Dart語言比較難看。。。。。但是另一個我認為更困難的地方就是現在能找到的教程和文章大多數都是英文的，我也是翻譯了一部分，如果覺得我說的不好。我在參考里面會貼上一些我找到的英文文章。可以自行瀏覽。不過強烈推薦的還是我上面給出的Flutter中文網，真的非常非常詳細。

參考教程：

awesome-flutter（這里我找到的翻譯過后的版本，不過很可惜里面的資料是全英文，有些還需要科學上網，我文章一部分就是從這里翻譯過來的）

flutter的Github地址（Flutter的源碼地址）

Dart語言教程（一篇相對來說比較好的Dart教程）

Flutter for Android（寫給android開發者看的Flutter教程，寫的非常好！）

Flutter專欄（CSDN上的Flutter專欄，建議從最后一頁開始閱讀）