1.前言#
Flutter是谷歌的移動(dòng)UI框架蝙昙,可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面邢笙。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界才沧,F(xiàn)lutter正在被越來(lái)越多的開(kāi)發(fā)者和組織使用迈喉,并且Flutter是完全免費(fèi)、開(kāi)源的温圆。
Flutter 是為了跨平臺(tái)而生的挨摸,所以為了驗(yàn)證在iOS和Android 的運(yùn)行情況,必須先在mac 上配置好 iOS 的開(kāi)發(fā)環(huán)境 Xcode 和 Android 的開(kāi)發(fā)環(huán)境 Android Studio岁歉。
2.安裝Flutter SDK
安裝方法:
這里使用的是git安裝
//1.終端中輸入以下指令克隆項(xiàng)目
git clone -b beta https://github.com/flutter/flutter.git
//2. 導(dǎo)出到Flutter保存路徑
export PATH=`pwd`/flutter/bin:$PATH
由于國(guó)內(nèi)網(wǎng)絡(luò)限制我們可以通過(guò)修改鏡像地址來(lái)解決, 好在Google良心,專門給我們大陸提供了方案, 終端中一次輸入以下命令即可解決得运。
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
flutter doctor
這是會(huì)出現(xiàn)flutter dart-sdk下載失敗的情況
Downloading Dart SDK from Flutter engine 4e54bc93ca9aaf2156fb06266c9fe509e8599a5f...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- 0:05:00 --:--:-- 0
curl: (56) Proxy CONNECT aborted due to timeout
Failed to retrieve the Dart SDK from: https://mirrors.sjtug.sjtu.edu.cn/flutter_infra/flutter/4e54bc93ca9aaf2156fb06266c9fe509e8599a5f/dart-sdk-darwin-x64.zip
If you're located in China, please see this page:
https://flutter.io/community/china
flutter是基于Dart語(yǔ)言開(kāi)發(fā)的,所以我們需要額外安裝配置Dart語(yǔ)言的開(kāi)發(fā)環(huán)境锅移。
本機(jī)是使用brew(Homebrew)安裝Dart熔掺,如果你的mac未安裝這個(gè)軟件管理插件,請(qǐng)先安裝Homebrew非剃。
3.安裝Dart SDK
本機(jī)是按照官網(wǎng)的提示安裝的
首先需要安裝Homebrew
將命令粘到macOS終端提示符中:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
執(zhí)行此條命令即可置逻。
dart的版本分為穩(wěn)定版和dev通道版本,
穩(wěn)定的渠道:穩(wěn)定的發(fā)布备绽,每6周更新一次; 目前2.4.1券坞。
開(kāi)發(fā)頻道:預(yù)發(fā)布,通常每周更新1次; 目前2.5.0-dev.2.1肺素。
穩(wěn)定版本運(yùn)行:
brew tap dart-lang/dart
brew install dart
要安裝dev通道版本恨锚,請(qǐng)使用--devel:
brew install dart -- --devel
dart 安裝成功之后再次執(zhí)行:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
flutter doctor
完成Flutter SDK的安裝。
4.關(guān)于flutter doctor
flutter doctor 是 flutter 對(duì)mac本機(jī)的環(huán)境配置診斷腳本倍靡,腳本結(jié)果會(huì)直接放出 flutter 環(huán)境有哪些需要繼續(xù)配置的猴伶。按照提示執(zhí)行腳本即可。
下面是我的flutter 診斷結(jié)果
[!] Android Studio (version 3.0)
? Flutter plugin not installed; this adds Flutter specific functionality.
? Dart plugin not installed; this adds Dart specific functionality.
[?] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2018.3.4)
? Flutter plugin not installed; this adds Flutter specific functionality.
? Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.37.1)
? Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[?] Connected device (1 available)
5.Android Studio配置
Android Studio的配置非常簡(jiǎn)單:
打開(kāi)Android Studio -> Preference > Plugins
在搜索框中搜索 Flutter
本地沒(méi)有, 就聯(lián)網(wǎng)查找,搜索到Flutter, 點(diǎn)擊安裝即可
Dart環(huán)境他自動(dòng)會(huì)安裝好
如果Flutter安裝失敗塌西,請(qǐng)不要灰心蜗顽,這主要是網(wǎng)絡(luò)問(wèn)題,調(diào)整配置或者開(kāi)VPN即可雨让。(能使用Android Studio雇盖,網(wǎng)絡(luò)問(wèn)題肯定已經(jīng)得到了很好的解決)
6.VS code 配置
VS code的Flutter配置也很簡(jiǎn)單:
打開(kāi)VS code -> Extentions管理
在搜索框中搜索 Flutter
搜索到Flutter, 點(diǎn)擊安裝即可
Dart環(huán)境也是自動(dòng)會(huì)安裝好
配置完成后,按照提示栖忠,重啟VS code 就生效了崔挖。此時(shí),可以按照提示庵寞,去執(zhí)行Flutter doctor來(lái)檢查 VS code 的配置情況狸相。
7.IntelliJ IDEA 配置 Flutter
打開(kāi)IntelliJ IDEA -> Preference > Plugins
在搜索框中搜索 Flutter
搜索到Flutter, 點(diǎn)擊安裝即可
Dart環(huán)境他自動(dòng)會(huì)安裝好
這樣,IntelliJ IDEA 的 Flutter 開(kāi)發(fā)環(huán)境就配置好了