Flutter中文網(wǎng): https://flutterchina.club/

Flutter似乎是越來越火了毒返，筆者作為一個(gè)移動(dòng)端開發(fā)者好像必須得學(xué)了
??纳寂。這里我只是關(guān)于macOS環(huán)境的Flutter環(huán)境搭建做個(gè)簡單的分享优构，如有錯(cuò)誤歡迎大家指出鲤屡。

系統(tǒng)要求

要安裝并運(yùn)行Flutter线椰，您的開發(fā)環(huán)境必須滿足以下最低要求:

• 操作系統(tǒng): macOS (64-bit)
• 磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）.
• 工具: Flutter 依賴下面這些命令行工具.
  bash, mkdir, rm, git, curl, unzip, which

獲取Flutter SDK

由于一些flutter命令需要聯(lián)網(wǎng)獲取數(shù)據(jù)，如果您是在國內(nèi)訪問薇宠，由于眾所周知的原因，直接訪問很可能不會(huì)成功艰额。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google為國內(nèi)開發(fā)者搭建的臨時(shí)鏡像

所以我們使用google為國內(nèi)開發(fā)者搭建的臨時(shí)鏡像澄港。依次執(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

執(zhí)行完上述命令沒有問題的話大概就是這樣的：

屏幕快照 2019-05-09 上午10.40.23.png

屏幕快照 2019-05-24 下午1.11.41.png

iOS 設(shè)置

安裝 Xcode

• 安裝Xcode 7.2或更高版本
• 配置Xcode命令行工具以使用新安裝的Xcode版本

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

對(duì)于大多數(shù)情況，當(dāng)您想要使用最新版本的Xcode時(shí)祖搓，這是正確的路徑狱意。如果您需要使用不同的版本，請(qǐng)指定相應(yīng)路徑拯欧。

• 確保Xcode許可協(xié)議是通過打開一次Xcode或通過命令

sudo xcodebuild -license

安裝到iOS設(shè)備

要將您的Flutter應(yīng)用安裝到iOS真機(jī)設(shè)備详囤，您需要一些額外的工具和一個(gè)Apple帳戶，您還需要在Xcode中進(jìn)行設(shè)置镐作。

• 1. 安裝 homebrew （如果已經(jīng)安裝了brew,跳過此步驟）.
     執(zhí)行如下命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 運(yùn)行這些命令來安裝用于將Flutter應(yīng)用安裝到iOS設(shè)備的工具

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果這些命令中的任何一個(gè)失敗并出現(xiàn)錯(cuò)誤藏姐，請(qǐng)運(yùn)行brew doctor并按照說明解決問題.

如果上述執(zhí)行都沒有問題的話，iOS設(shè)置算是完成了该贾，下面來建第一個(gè)Flutter項(xiàng)目羔杨。
在你想要?jiǎng)?chuàng)建項(xiàng)目的路徑下執(zhí)行

flutter create flutterapp

flutterapp 為項(xiàng)目名，可自己更改杨蛋。
然后項(xiàng)目創(chuàng)建完成兜材，如下：

屏幕快照 2019-05-09 上午10.58.57.png

屏幕快照 2019-05-09 上午11.00.03.png

Android設(shè)置

• 下載并安裝 Android Studio.

• 安裝Flutter和Dart插件

  
  
  屏幕快照 2019-05-09 上午11.04.32.png
  
  
  屏幕快照 2019-05-09 上午11.05.13.png
  
  
  屏幕快照 2019-05-09 上午11.05.29.png

現(xiàn)在呢我們就用Android Studio來創(chuàng)建我們的第一個(gè)flutter項(xiàng)目。
打開Android Studio逞力，會(huì)發(fā)現(xiàn)多了一個(gè) Start a new Flutter project

屏幕快照 2019-05-24 下午1.22.23.png

屏幕快照 2019-05-24 下午1.27.15.png

屏幕快照 2019-05-24 下午1.29.44.png

屏幕快照 2019-05-24 下午1.34.08.png

設(shè)置Android模擬器

要準(zhǔn)備在Android模擬器上運(yùn)行并測(cè)試您的Flutter應(yīng)用掏击，請(qǐng)按照以下步驟操作：

1. 啟動(dòng) Android Studio>Tools>AVD Manager 并選擇 Create Virtual Device.
2. 選擇一個(gè)設(shè)備并選擇 Next卵皂。

模擬器選好后，這里運(yùn)行項(xiàng)目會(huì)遇到一個(gè) 坑砚亭。
AS控制臺(tái)會(huì)出現(xiàn)：

Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'.
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s
  Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties

Finished with error: Please review your Gradle project setup in the android/ folder.

解決辦法：

屏幕快照 2019-05-24 下午1.46.13.png

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.2.1'
    }
}

第二步：項(xiàng)目路徑>android>build.gradle

屏幕快照 2019-05-24 下午1.46.13.png

打開文件，修改成如下：

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.2.1'
    }
}

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' }
    }
}

OK捅膘，這里環(huán)境就算是搭建完成了添祸。

屏幕快照 2019-05-24 下午1.54.40.png

這是筆者關(guān)于Flutter環(huán)境搭建的簡單分享，如有問題和錯(cuò)誤寻仗，歡迎大家指出討論刃泌。