配置Flutter中國鏡像

因?yàn)橛锌赡鼙粔Γ孕枰渲苗R像。
國內(nèi)有兩個(gè)鏡像可以用，一個(gè)就是官方 Flutter 社區(qū)的國內(nèi)鏡像，另一個(gè)是上海交通大學(xué) Linux 用戶組的鏡像，建議用官方 Flutter 社區(qū)的國內(nèi)鏡像。

• Flutter 社區(qū)

FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn

PUB_HOSTED_URL: https://pub.flutter-io.cn

• 上海交通大學(xué) Linux 用戶組

FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn

PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn

配置方法

在~/.bash_profile上添加：

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

保存文件后，在運(yùn)行：

source ~/.bash_profile

一、下載Flutter SDK包

下載地址：SDK包

下載SDK .png

二、配置環(huán)境變量

1、

vim ~/.bash_profile

2、找到sdk文件的位置，我是放在了根目錄的sdk文件下，因此：

export FLUTTER_HOME=/Users/menghua.ma/sdk/flutter  //這個(gè)路徑就是壓縮包解壓后的位置
export PATH=$PATH:$FLUTTER_HOME/bin

3、檢查是flutter是否安裝成功

flutter -h

出現(xiàn)下圖的內(nèi)容，證明成功了

flutter檢查.png

三、檢查開發(fā)環(huán)境

使用flutter的檢查一下都需要安裝哪些軟件和插件的支持：

?  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.12.6 16G1918, locale zh-Hans-CN)

[?] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
    ? libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ? CocoaPods installed but not initialized.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[!] Android Studio (version 3.4)
    ? Flutter plugin not installed; this adds Flutter specific functionality.
    ? Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2016.3)
    ? Flutter plugin not installed; this adds Flutter specific functionality.
    ? Dart plugin not installed; this adds Dart specific functionality.
    ? This install is older than the minimum recommended version of 2017.1.0.
[?] VS Code (version 1.22.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

圖片上的每一條都是需要打勾的狀態(tài)才對(duì)，如果有[!]x標(biāo)志，表示本行檢測沒有通過，就需要我們根據(jù)提示設(shè)置或者安裝相應(yīng)的軟件了。

??Android toolchain - develop for Android devices是代表著要安裝Android 開發(fā)環(huán)境，如果沒有安裝的話，需要安裝一下，步驟在下邊。
??brew install --HEAD libimobiledevice：此時(shí)有可能會(huì)出現(xiàn)權(quán)限被拒絕的錯(cuò)誤，那么就先執(zhí)行sudo chown -R $(whoami) /usr/local，然后再brew install --HEAD libimobiledevice

??pod setup的時(shí)候有可能會(huì)出現(xiàn)如下報(bào)錯(cuò)：

emote: Enumerating objects: 20009, done.
  remote: Counting objects: 100% (20009/20009), done.
  remote: Compressing objects: 100% (9896/9896), done.
  error: RPC failed; curl 56 SSLRead() return error -980677.00 KiB/s
  fatal: The remote end hung up unexpectedly
  fatal: early EOF
  fatal: index-pack failed

那么此時(shí)就參考一下文章執(zhí)行:https://blog.csdn.net/YangxLan/article/details/73930755?locationNum=3&fps=1

三、安裝Android／IOS 開發(fā)環(huán)境

配置Android開發(fā)環(huán)境

1、下載Android Studio

因?yàn)樾枰玫紸ndroid 開發(fā)環(huán)境，所有需要下載。
下載地址：Android Studio,選擇Mac的版本就OK。
或者去官網(wǎng)下載：Android Studio官網(wǎng)

2、配置Android SDK環(huán)境變量

打開 Android Studio，選擇 Confiure -> 'SDK Manager'：

打開Android Studio.png

SDK路徑.png

記住這個(gè)地方的SDK的位置，在~/.bansh_profile添加：

export ANDROID_HOME=/Users/****/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

此時(shí)已經(jīng)配置好了Android的開發(fā)環(huán)境，但是Android Studio需要安裝Flutter插件才可以支持Flutter。

搜索Flutter進(jìn)行安裝。安裝完成以后重啟Android Studio。

安裝Flutter插件.png

配置IOS開發(fā)環(huán)境

1、安裝Xcode：由于我的電腦不支持最新的11版本，因此著了一個(gè)其他版本下載:download
2、運(yùn)行：

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

3、打開Xcode，同意Xcode的許可協(xié)議
4、運(yùn)行

sudo xcodebuild -license

Flutter的編輯器

VS Code

1、安裝VS Code：VS Code
2、安裝Flutter插件（如下圖所示），安裝完成后relaod一下，然后重啟VS Code。

vs_flutter.png

Android Studio

上面已經(jīng)配置Android開發(fā)環(huán)境的時(shí)候已經(jīng)寫啦，請(qǐng)參考。

參考了以下文章：??????
??Flutter完成手冊(cè)
??技術(shù)胖--Flutter基礎(chǔ)知識(shí)

Flutter web環(huán)境（1.5版本才可以）

https://segmentfault.com/a/1190000019381936?utm_source=tag-newest

https://www.v2ex.com/t/569744
運(yùn)行flutter web必須安裝webdev才可以，webdev也需要安裝。

1、安裝webdev package包

flutter pub global activate webdev

此時(shí)會(huì)有出現(xiàn)一個(gè)警告（如下圖），也就是更新一下環(huán)境變量，按照提示做就可以

警告.png

2、clone官方的例子到本地（此步驟可以直接跳過，如果自己有flutter web項(xiàng)目的話）

git clone https://github.com/flutter/flutter_web.git

進(jìn)入到example/hello-word中,運(yùn)行flutter pub upgrade

cd examples/hello_world
flutter pub upgrade

3、運(yùn)行webdev serve（此步驟也可以略過，跳轉(zhuǎn)到步驟4）

webdev serve

如果此時(shí)有如下警告，則是因?yàn)闆]有將dart sdk加入到環(huán)境變量中，dart sdk是在安裝的flutter/bin/cache/dart-sdk/bin目錄下，找到添加環(huán)境變量即可

dart: command not found

添加好環(huán)境變量再次運(yùn)行webdev serve，此時(shí)會(huì)提示需要運(yùn)行pub get，那就運(yùn)行一下就pub get，再次運(yùn)行webdev serve即可。

4、如果不想配置dart sdk的環(huán)境變量，可以使用下面的命令代替webdev serve

flutter pub global run webdev serve

5、如果想要自己創(chuàng)建web項(xiàng)目，有兩種辦法，一種是同創(chuàng)建android或者ios的一樣（此處不在贅述），一種是用命令行工具。
命令行創(chuàng)建 web 項(xiàng)目需要安裝另一個(gè)工具

flutter pub global activate stagehand

安裝好之后就可以創(chuàng)建web項(xiàng)目（注意：創(chuàng)建項(xiàng)目的地方一定是一個(gè)空文件夾）

flutter pub global run stagehand flutter-web-preview
或者
stagehand flutter-web-preview（這種必須是配置了dart sdk的環(huán)境變量）