初識Flutter——谷歌的移動UI框架技术頭條網

第一次接觸Flutter的時候，官方有個這樣的說明---一切皆為widget，這句話真的特別以意思，我在平常工作中，每次跟其他語言開發者交流的時候，我們經常說Android就是java的可視化UI。就是說Android最大的特性就是UI，做一套界面出來把數據展示出來。說的感覺很簡單，其實很難。HenCoder大神出過一版系統自定義View教學，說的是《給高級 Android 工程師的進階手冊》（附上網站鏈接：https://hencoder.com/ui-1-1/）。可見，一個高級的Android工程師必須掌握複雜界面的搭建以及自定義來實現。而Google在2018年移動大會發布的Flutter也說明了這一點。一切皆為控件的思想。

現在講下Flutter的核心原則：Flutter包括一個現代的響應式框架、一個2D渲染引擎、現成的widget和開發工具。這些組件可以幫助您快速地設計、構建、測試和調試應用程序。

Flutter的優勢有哪些：

提高開發效率
同一份代碼開發iOS和Android
用更少的代碼做更多的事情
輕鬆迭代
在應用程序運行時更改代碼並重新加載（通過熱重載）
修復崩潰並繼續從應用程序停止的地方進行調試
創建美觀，高度定製的用戶體驗
受益於使用Flutter框架提供的豐富的Material Design和Cupertino（iOS風格）的widget
實現定製、美觀、品牌驅動的設計，而不受原生控件的限制

這些都是貼的官方文檔，我覺得不必要解釋，畢竟還是很好懂得，下面我們就按照文檔來擼一下，認識一下這項新技術。

（中文網站：https://flutterchina.club/get-started/install/）我們主張自己看英文文檔，畢竟還是希望大家提高閱讀能力。

第一：安裝並運行Flutter，您的開發環境必須滿足以下最低要求:

操作系統: macOS (64-bit)
磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）.
工具: Flutter 依賴下面這些命令行工具.
bash, mkdir, rm, git, curl, unzip, which

這個安裝和配置，請自己看官方文檔，如果你使用AndroidStudio的話，直接看編輯器配置來進行安裝。(ps:這裡總是有人下載不成功，請看一下設置---updates---use secure connection這個不要勾選)

啟動Android Studio.
打開插件首選項 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
選擇 Browse repositories…, 選擇 Flutter 插件並點擊 install.
重啟Android Studio後插件生效.

然後我們可以創建第一個應用了。熱重載是我最想要體驗的，所以一起來看看，如下圖。

選擇 File>New Flutter Project
選擇 Flutter application 作為 project 類型, 然後點擊 Next
輸入項目名稱 (如 myapp), 然後點擊 Next

點擊 Finish
等待Android Studio安裝SDK並創建項目.

創建Flutter項目

創建

有人在這一步卡住了，選擇SDK這個，因為缺少SDK，所以我們去下載這個地址：https://flutter.io/docs/development/tools/sdk/archive#macos我這個是mac端的，如果是Windows的去下載windows端。

下載flutter配置SDK

然後下載完，解壓，這個時候解壓文件放在你一個熟知上午位置，因為我們等下要用，然後在回到Android Studio中打開設置--》》》語言與框架---》》》Flutter，設置紅色部分，就是你剛剛下載解壓下來的那個東西，選擇上，然後點擊應用，系統會提示你，同步Drat，點同意，然後你在看看Dart的SDK配置完成了沒有。如下圖：

配置Flutter-SDK

配置Dart-SDK

好了，現在我們繼續創建項目，有沒有發現創建項目studio特別容易卡死，皮一下，我也是，不知道為什麼，沒時間研究，卡死我們重啟一下就好了，然後我們繼續創建項目。好了請看下圖：

Flutter項目

在真機上運行一下，看看效果。這裡我遇到一個問題，就是新建項目直接運行沒有效果，真機上安裝不了，run上也看不出來什麼錯誤，在網上各種找答案，都沒有效果，我就想著是不是代碼的錯誤，直接刪除了main.dart(lib文件下文件)所有代碼只寫了

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Welcome to Flutter',
 home: new Scaffold(
 appBar: new AppBar(
 title: new Text('Welcome to Flutter'),
 ),
 body: new Center(
 child: new Text('Hello World'),
 ),
 ),
 );
 }
}

然後就跑起來了，很奇怪哈哈，而且你們可以看看manifest裡面icon居然報錯。暫時說項目跑起來了，那我們先看看跑出來的效果，然後看看熱重載。