Flutter入門 從安裝到運行(Windows)

Flutter安裝

1. 下載Flutter解壓包

   點我下載 而後解壓到目錄中 做者的目錄是 D:\flutter

2. 配置環境變量

   PUB_HOSTED_URL=https://pub.flutter-io.cn
     FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
     PATH 新增 D:\\flutter\bin   # 換成你的解壓目錄 記得用;號分開
   複製代碼

3. 安裝依賴項 打開cmd/powershell 輸入

   flutter doctor    
   複製代碼

   稍等片刻 會出現以下顯示

   

   繼續輸入命令:
    
    flutter doctor --android-licenses  # 出現提示 一直輸入y
   複製代碼

4. IDEA/Android Studio 安裝插件

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

5. 手機鏈接電腦 手機鏈接上電腦 打開開發者模式 開啓USB調試 & 容許USB安裝應用

運行第一個Flutter項目(IDEA)

1. 新建立個Flutter項目 選擇好剛開始解壓的flutter目錄

   

   項目名稱:hello_flutter

   

   新建完成

   

2. 修改gradle配置(gradle國內訪問不了) D:\flutter\packages\flutter_tools\gradle\flutter.gradle 把google() 和 jcenter() 註釋掉。下面添加

   maven { url 'https://maven.aliyun.com/repository/google' }
    maven { url 'https://maven.aliyun.com/repository/jcenter' }
    maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
   複製代碼

   再打開當前項目文件夾/android/build.gradle文件 把google() 和 jcenter() 註釋掉。(此文件下有兩處都須要替換 buildscript下和allprojects下)下面添加

   maven { url 'https://maven.aliyun.com/repository/google' }
           maven { url 'https://maven.aliyun.com/repository/jcenter' }
           maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }   
   複製代碼

   

3. 修改gradle下載地址 下載gradle-4.10.2-all.zip 找到項目中的android->gradle->wrapper->: 把解壓包放到此目錄下 不要解壓 修改同級目錄下的文件:gradle-wrapper.properties 把distributionUrl修改成:

   distributionUrl=gradle-4.10.2-all.zip
   複製代碼

4. 修改啓動參數 (白屏問題)

   

5. 啓動項目 點擊右上角 啓動按鈕 出現如圖

   

   此時手機上會彈出是否安裝應用 安裝應用後打開便可 效果圖以下

   

   完成