Flutter學習之路(一)Flutter簡介及Window下開發環境搭建

Flutter簡介(內容來自Flutter中文網)

Flutter是什麼

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。 Flutter能夠與現有的代碼一塊兒工做。在全世界，Flutter正在被愈來愈多的開發者和組織使用，而且Flutter是徹底免費、開源的。

Flutter的特性

快速開發

毫秒級的熱重載，修改後，您的應用界面會當即更新。使用豐富的、徹底可定製的widget在幾分鐘內構建原生界面。

Flutter的熱重載可幫助您快速地進行測試、構建UI、添加功能並更快地修復錯誤。在iOS和Android模擬器或真機上能夠在亞秒內重載，而且不會丟失狀態

富有表現力和靈活的UI

快速發佈聚焦於原生體驗的功能。分層的架構容許您徹底自定義，從而實現難以置信的快速渲染和富有表現力、靈活的設計。

使用Flutter內置美麗的Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而天然的滑動效果和平臺感知，爲您的用戶帶來全新體驗。

原生性能

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

經過平臺相關的API、第三方SDK和原生代碼讓您的應用變得強大易用。 Flutter容許您複用現有的Java、Swift或ObjC代碼，訪問iOS和Android上的原生系統功能和系統SDK。

Window下Flutter開發環境搭建

在Flutter中文網上，關於搭建開發環境的教程已經寫得比較詳細了，這裏筆者但願經過穿插一些圖片，讓各位小夥伴能更輕鬆的搭建好開發環境，工欲善其事，必先利其器，下面就開始開發環境的搭建吧！

安裝Git

你須要安裝Git做爲Flutter SDK的下載工具。

下載FlutterSDK

使用下面的命令下載FlutterSDK

git clone -b beta https://github.com/flutter/flutter.git
複製代碼

若是長時間沒下載下來或者鏈接失敗 先設置一下這兩個環境變量,這是是google爲國內開發者搭建的臨時鏡像。

set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製代碼

要在終端運行 flutter 命令， 你須要添加如下環境變量到系統PATH：

set PATH=`pwd`/flutter/bin:$PATH
複製代碼

手動配置環境變量

• 轉到 控制面板>用戶帳戶>用戶帳戶>更改個人環境變量
• 在「用戶變量」下檢查是否有名爲「Path」的條目:
• • 若是該條目存在, 追加 flutter\bin的全路徑，使用 ; 做爲分隔符.
• • 若是條目不存在, 建立一個新用戶變量 Path ，而後將 flutter\bin的全路徑做爲它的值.
• 在「用戶變量」下檢查是否有名爲」PUB_HOSTED_URL」和」FLUTTER_STORAGE_BASE_URL」的條目，若是沒有，也能夠添加它們。

爲了測試flutter環境變量是否配置成功，在終端中輸入flutter命令並回車，若是出現flutter命令相關用法提示，則表示flutter環境變量配置成功，以下圖所示：

運行 flutter doctor

切換到flutterSDK所在路徑下檢測 當前flutter須要的依賴並下載依賴

C:\Users\XX\flutter\bin> flutter doctor
複製代碼

第一次運行一個flutter命令（如flutter doctor）時，它會下載它本身的依賴項並自行編譯。之後再運行就會快得多。

運行後出現下圖是提示一些Android許可不被接受,要解決這個問題,運行:flutter doctor——android license便可

配置編輯器

Android Studio 安裝

Android Studio: 爲Flutter提供完整的IDE體驗

• 請安裝Android Studio3.0或更高版本.

IntellJ IDE 安裝

• IntelliJ IDEA Community, version 2017.1或更高版本.
• IntelliJ IDEA Ultimate, version 2017.1或更高版本.

安裝Flutter和Dart插件

• Flutter 插件： 支持Flutter開發工做流 (運行、調試、熱重載等).
• Dart 插件： 提供代碼分析 (輸入代碼時進行驗證、代碼補全等).

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

IntellJ IDEA : IntelliJ IDE>setting>Plugins

建立新應用

Android studio 重啓後打開 選擇 File>New Flutter Project

接下來next 包名,sdk地址很少作解釋,最後finish,等待Android studio建立項目.

運行應用程序

• 定位到Android Studio 工具欄:

  

• 在 target selector 中, 選擇一個運行該應用的Android設備. 若是沒有列出可用，請選擇 Tools>Android>AVD Manager 並在那裏建立一個
• 在工具欄中點擊 Run圖標
• 若是一切正常運行結果以下圖