mac系統 flutter從安裝到第一個應用


mac系統 安裝flutter 分三步:

  1. 安裝flutter sdk

  2. flutter環境變量配置

  3. 建立flutter應用

 

Flutter SDK下載

打開終端執行命令 git clone -b beta  下載flutter SDK

 

mac系統,Futter SDK下載完成后默認路徑是:Users/xxxxx/flutter,比如我的是 Users/wujian/flutter,這個也是flutter SDK的安裝目錄。

在Mac上顯示的就是Macintosh HD ->Users -> wujian -> flutter

Flutter 環境變量配置

使用鏡像:

由於在國內訪問Flutter有時可能會受到限制,Flutter官方為中國開發者搭建了臨時鏡像,大家可以將如下環境變量加入到用戶環境變量中。

在命令行下,進入用戶目錄:執行命令 cd $HOME

打開.bash_profile文件:執行命令 open -e .bash_profile

文件打開后,開始編輯bash文件,在其中添加以下內容:

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

同時添加flutter相關工具到path中,也就是添加 Flutter SDK 安裝的路徑

export PATH=${PATH}:/Users/wujian/Flutter/flutter/bin:$PATH

關閉bash文件,配置完成后,更新配置的環境變量,執行命令: source .bash_profile

flutter驗證:

終端直接輸入 flutter,沒有提示該命令找不到,則配置成功。如下:

 

運行 flutter doctor,安裝相關依賴,可重復執行 ,終端執行命令:flutter doctor

注意,個人經驗,可能會卡在“Building flutter tool...”提示語句,請耐心等待。請一定要配置臨時鏡像,否則會下不下來,經常出現下載失敗的情況,請掛VPN嘗試,如果未購買vpn,可以使用藍燈 Lantern免費版使用。

 

執行結束后,成功后是這樣的

 

第一個Flutter應用

啟動Android Studio,安裝AndroidStudio的Flutter插件,安裝成功后,重啟Studio

 

使用AndroidStudio建立Flutter項目

 

注意:新建工程,工程名不能含大寫字母,這與Android Stuidio不同。New Flutter Project這個過程可能會卡一會,New Flutter Project成功后頁面如下:

 

 

在Flutter SDK path中選擇你的SDK安裝路徑(指向到頂層flutter目錄即可,也就是上面說的 flutter安裝目錄),不要點擊那個install SDK按鈕。

Creating Flutter Project的過程十分的漫長,請耐心等待。如果超過5分鍾,根據個人經驗,可能頁面卡死,其實flutter項目已經創建好了,可以到項目路徑下查看。

所以,我們直接強殺AS,然后重新打開,open項目

 

項目打開后,直接運行項目,可能會遇到如下錯誤

問題描述:由於國內鏡像原因,很多jcenter google庫無法訪問導致,即使vpn開了也一樣。

解決方法:修改build.gradle,注釋掉jcenter(),google()。使用阿里的鏡像。

第一步:

buildscript { repositories { //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' }  } dependencies { classpath 'com.android.tools.build:gradle:3.1.2' } } allprojects { repositories { //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' }  } }

第二步:

找到flutter安裝目錄,比如:

Macintosh HD⁩ ▸ ⁨Users ▸ ⁨wujian.⁩ ▸ ⁨flutter⁩ ▸ ⁨packages⁩ ▸ ⁨flutter_tools⁩ ▸ ⁨gradle⁩

找到下 flutter.gradle文件 找如如下內容替換成和我一樣的 把jcenter注釋掉。

buildscript { repositories { //jcenter()  //maven {  // url 'https://dl.google.com/dl/android/maven2'  //}  maven{ url 'https://maven.aliyun.com/repository/jcenter'  } maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'  } } dependencies { classpath 'com.android.tools.build:gradle:3.1.2' } }

再重新運行,問題解決。

 

 

來源:https://zhuanlan.zhihu.com/p/48866181


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM