序
現在行業內流行一個詞語，“大前端時代”。作為前端，不能僅只限於只會開發網站、小程式、桌面應用。我們應該將魔抓伸向手機App應用上。當然有一些使用webApp開發的說，webApp不也可以開發手機App嘛。這裡，你是對的。但是webApp也有自己的侷限性，如不能呼叫手機的藍芽，wifi等模組功能。但是強大的Flutter(這裡不講React Native)，卻是能辦到，讓我們使用App時，能像原生開發（Android、Mac）一樣，很暢快，不僅如此，它也提供了很多優美的元件，讓人看了蠢蠢欲動。當然Flutter也並不完全能替代IOS、Android開發，它也有它的缺點。但是作為前端，近幾年流行的Flutter，應該值得關注下。
以下引用官網的簡介：
極速構建漂亮的原生應用
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。
環境配置
Window
映象
國內訪問Flutter時，可能會有訪問限制。這裡提供兩個映象環境
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼獲取Flutter SDK
這裡我直接到官網下載 或者在git下載
git clone -b alpha https://github.com/flutter/flutter.git
複製程式碼安裝或者解壓成功後，將目錄下的bin目錄加入環境變數
接下來，我們開啟cmd輸入flutter doctor，檢視是否配置成功。（注意：如果配置成功，輸入flutter doctor等待時間會比較長，因為安裝一些東西，可以喝杯coffee冷莖冷莖）
第一次執行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項並自行編譯。以後再執行就會快得多。
這裡我們看到有一個xx，我們照著提示安裝就行了。
可能有一些小夥伴訪問不了Android SDK網站（我就訪問不了），這裡提供了其他的下載地址
問題
我在安裝Android Studio時，遇到了一些問題。（木有安裝問題的小夥伴，請跳過）
(1) 設定初次開啟AS，不下載sdk
在這個Android studio的安裝目錄下，找到下面這個檔案
\bin\idea.properties
複製程式碼設定初次開啟AS，不檢測SDK。使用記事本開啟，檔案末尾新增一行：
disable.android.first.run=true
複製程式碼新增後，就可以開啟了，在開啟後，會安裝SDK的,具體的嚮導安裝部分這裡不再解釋。可自行百度瞭解一下
編輯器設定
這裡我使用的是vscode，這裡需安裝一些小東西，
如Dart、Flutter如圖
通過Flutter Doctor驗證您的設定
- 呼叫 View>Command Palette…（快捷鍵：
Ctrl+Shift+P） - 輸入 ‘doctor’, 然後選擇 ‘Flutter: Run Flutter Doctor’ action
- 檢視“OUTPUT”視窗中的輸出是否有問題
我在VScode控制檯的結果，這裡有三個錯誤。第二，第三個錯誤不用管，因為我們使用的是vscode開發。
另外，如果想使用Android Studio，需要有java SDK
第一個錯誤： 環境變數中未配置 ANDROID_HOME
flutter doctor --android-licenses 一直點 輸入y 就行了
在cmd再次執行Flutter Doctor就能看到錯誤已消失
Mac （更新中。。。）
實戰篇
新建我們的第一個專案
這裡我使用的是vscode，快捷鍵Ctrl+Shift+P輸入flutter，選擇Flutter: New Project,後輸入專案名稱及專案存放目錄。
在專案目錄中，應用程式的程式碼位於 lib/main.dart.
新建專案後，其目錄結構
模擬器除錯
在VCcode右下角選擇你需要的模擬器，如果沒有，可在Android Studio建立模擬器，具體如何建立，也自行百度
真機除錯
注意，真機需要（Java JDK）
- 手機連線電腦後，手機選擇
USB除錯，授權之類的 - 在終端中，執行 flutter devices 命令以驗證Flutter識別您連線的Android裝置。
- 執行啟動您的應用程式 flutter run。
體驗熱過載
在lib/main.dart檔案下，將字串
'You have pushed the button this many times:'
更改為
'You have clicked the button this many times:'
不要按“停止”按鈕; 讓您的應用繼續執行.
理論篇
常用佈局widgets
標準 widgets
- Container
- 新增 padding, margins, borders, background color, 或將其他裝飾新增到widget.
- GridView
- 將 widgets 排列為可滾動的網格.
- ListView
- 將widget排列為可滾動列表
- Stack
- 將widget重疊在另一個widget之上.
Material Components
- Card
- 將相關內容放到帶圓角和投影的盒子中。
- ListTile
- 將最多3行文字，以及可選的行前和和行尾的圖示排成一行
持續更新中。。。
以上純屬個人看法，可能並不全面。噴子出門左拐。
分享不易，喜歡的話一定別忘了點?！！！
只關注不點?的都是耍流氓，只收藏也不點?的也一樣是耍流氓。
結束???。