1 . 本地環(huán)境的要求

1. window10 64位 / window7 64位
2. 所需空間最好5G , 最低配置3G

2 . 安裝步驟

第一步 : 安裝Java SDK

百度搜索 Java SDK , 并進入下面紅色框框的java官網(wǎng)

Image.png

進來java官網(wǎng)后 , 我們往下拉到以下位置 , 并且點擊同意[Accept License Agreement] , 這個選項 , 否則無法下載 , 然后選擇我們所需要安裝的32位/64位的java SDK , 點擊下面的下載鏈接后 , 可能會叫我們登錄Oracle賬號 , 我們可以選擇不登錄 , SDK也會自動下載的

Image.png

然后安裝過程 , 網(wǎng)上的教程很多了 , 這里不做贅述 , 下面是我按照網(wǎng)上搭建的java SDK教程

• window7 64位環(huán)境下搭建Java SDK 教程 , 引用以下文章https://blog.csdn.net/technologyleader/article/details/82850893
• window10 64位環(huán)境Java SDK 教程 , 引用以下文章
  https://www.cnblogs.com/nebie/p/Howie.html

安裝完Java SDK后 , 就開始安裝Flutter SDK 了

第二步 : 安裝Flutter SDK

安裝flutter , 需要一個翻墻的環(huán)境 , 不然下載會很慢 , 也可能會在flutter配置過程中出錯

在flutter官網(wǎng)下載 flutter
https://flutter.dev/docs/development/tools/sdk/releases#windows
在這個網(wǎng)址下面我們可以看到有四個版本

第一個 : Stable channel (Windows) 穩(wěn)定版本, 推薦使用, 穩(wěn)定版本
第二個 : Beta channel (Windows) 最新版, 最新版會有很多測試功能, 但是有些功能支持度不高
第三個 : Dev channel (Windows) 開發(fā)板, 開發(fā)板會有很多自定義的設(shè)置, 但是這個會有很多都是缺失的, 非熟練使用flutter的人員, 切勿使用這個版本
第四個 : Master channel 主版本, 安裝捆綁包不可用于master榴啸。但是羞延，您可以通過克隆主版本，然后觸發(fā)SDK依賴項的下載洲胖，直接從Github repo獲取SDK：

• Stable channel (Windows) 穩(wěn)定版本 , 推薦使用, 穩(wěn)定版本
  Image.png

• Beta channel (Windows) 最新版 , 最新版會有很多測試功能, 但是有些功能支持度不高
  Image.png

• Dev channel (Windows) 開發(fā)板, 開發(fā)板會有很多自定義的設(shè)置, 但是這個會有很多都是缺失的, 非熟練使用flutter的人員, 切勿使用這個版本
  Image.png

• Master channel 主版本, 安裝捆綁包不可用于master撮躁。但是，您可以通過克隆主版本对省，然后觸發(fā)SDK依賴項的下載炬藤，直接從Github repo獲取SDK：

  
  
  Image.png

在下載完flutter SDK后 , 我們只需要將Flutter SDK 直接解壓到Flutter文件夾即可 , 注意路徑不能有中文

Image.png

Image.png

Image.png

1df88be70eba23676ccb3485edd769d.png

Image.png

可能會出現(xiàn)的問題

• 出現(xiàn)以上即可完成flutter配置 , 輸入flutter命令后 , 命令行沒有反應(yīng) , 可試試第一 : 重啟電腦 , 第二 : 添加用戶配置環(huán)境變量

FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
PUB_HOSTED_URL = https://pub.flutter-io.cn

Image.png

Image.png

FLUTTER_STORAGE_BASE_URL和PUB_HOSTED_URL都是針對國內(nèi)不能訪問國外網(wǎng)絡(luò)而設(shè)置的鏡像

Image.png

第三步 : 安裝Android Studio , 具體的安裝步驟可在網(wǎng)上進行查找安裝

• 以下是我參考的安裝教程
  Android studio的安裝(https://www.cnblogs.com/xqz0618/p/install.html)

• 安裝完Android Studio后 , 如果使用Android Studio工具進行flutter的話 , 就需要安裝Android Studio 的flutter插件了 , 開始打開Android Studio , 在配置中添加插件
  Image.png
  Image.png
  
  
  然后安裝這個插件
  Image.png

• 安裝好flutter插件后 , 重啟編譯器即可完成AndroidStudio的flutter插件安裝 , 然后我們 , 在 Android Studio新建我們的Flutter文件
  Image.png
  
  
  接下來會有四個選項給我們
  Image.png

這里有四個選項 ,
第一個是FlutterApp ,
第二個是Flutter插件 ,
第三個是FLutter包 ,
第四個是FLutter模塊 ,
我們選擇第一個 , 點擊next

Image.png

這四個選項分別是
project name文件名;
Flutter SDK path FlutterSDK路徑 , 通常會自動匹配上 , 如果個人有修改 , 可自定義
Project location 文件保存路徑
Description 文件描述
設(shè)置好以上四個選項后 , 再次點擊next

Image.png

Image.png

Image.png

Image.png

Image.png

Image.png

Image.png

一旦出現(xiàn)以上這兩個頁面即可配置成功 ,就可以在Android Studio開始開發(fā)flutter項目了

倘若我們是在vs code進行開發(fā)Flutter 項目 , 就需要在vs code進行配置Flutter插件 , 同時建議使用vs code進行開發(fā) , 所以使用Android Studio去新建項目 , 對于前端開發(fā)人員是不建議的 , 下面開始介紹vs code工具進行flutter開發(fā)

打開vs code 安裝flutter插件和dart插件 , 但是一般我們安裝flutter插件的時候 , vs code就會自動安裝dart插件的 , 安裝完flutter插件后 , 就重啟vs code , 再vs code命令行輸入

flutter create demo001

Image.png

Image.png

flutter run

出現(xiàn)這些信息即可開啟成功

Image.png

具體問題在評論 , 盡情提問 , 小編很樂意跟大家討論Flutter方面的問題