Flutter環境搭建(MAC)

Flutter安裝指南

官方文檔地址:https://flutter.io/get-started/install/

首先,下載Flutter的源碼,按照官方建議,我們選擇beta分支,如下所示:

git clone -b beta https://github.com/flutter/flutter.git

代碼下載後,目錄結構如下:

flutter renyugang$ tree -L 2 -d
.
├── bin
│   ├── cache
│   └── internal
├── dev
│   ├── automated_tests
│   ├── benchmarks
│   ├── bots
│   ├── devicelab
│   ├── docs
│   ├── integration_tests
│   ├── manual_tests
│   ├── missing_dependency_tests
│   └── tools
├── examples
│   ├── catalog
│   ├── flutter_gallery
│   ├── flutter_view
│   ├── hello_world
│   ├── layers
│   ├── platform_channel
│   ├── platform_channel_swift
│   ├── platform_view
│   └── stocks
└── packages
    ├── flutter
    ├── flutter_driver
    ├── flutter_localizations
    ├── flutter_test
    └── flutter_tools
29 directories

接着,爲了方便後續使用,需要將項目根目錄下bin路徑加入環境變量PATH中,打開~/.bash_profile文件,修改環境變量即可,如下:

# 注意:Users/didi/google/flutter需要替換爲你本地Flutter項目的路徑
export PATH=$PATH:/Users/didi/google/flutter/bin

注意:如果你不能科學上網,那麼在繼續下面的步驟之前,需要做一些額外的事情。聲明PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL兩個環境變量,在當前shell窗口執行如下兩行命令即可,此舉是爲了讓Flutter在安裝過程中使用國內的鏡像。
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

然後,我們就可以通過flutter doctor命令來執行Flutter的安裝程序了,經過一段時間的下載和安裝,Flutter會輸出安裝結果:

flutter renyugang$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.11.1 15B42, locale zh-Hans)
[✓] Android toolchain - develop for Android devices (Android SDK 26.0.2)
[!] iOS toolchain - develop for iOS devices (Xcode 7.3.1)
    ✗ Flutter requires a minimum Xcode version of 9.0.0.
      Download the latest version or update via the Mac App Store.
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        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.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.0)
[✓] IntelliJ IDEA Community Edition (version 2017.3.1)
[✓] Connected devices (1 available)
! Doctor found issues in 1 category.

如何運行Flutter程序

運行Flutter程序有兩種方式。

第一種方式,這裏假設有個Flutter程序,它的目錄名爲FlutterDemo,那麼我們只需要在FlutterDemo目錄下執行flutter run即可,當然必須通過USB連接設備纔可以,這裏可以選擇iOS和Android手機,當然也可以選用模擬器。

第二種運行方式就是通過IDE來運行程序,比如AndroidStudio和IntelliJ的Run按鈕。

如何開發Flutter程序

Flutter可以使用如下三個IDE來開發程序

  • Android Studio

  • IntelliJ

  • Visual Studio Code

但是很奇怪,看來Google並沒有打算支持xcode,這或許對iOS用戶不太友好。

對於Android同學來說,肯定是選擇Android Studio或者IntelliJ來開發程序了。本文選擇IntelliJ做演示,其實Android Studio和IntelliJ很類似。

爲了使用IntelliJ來開發和調試Flutter程序,首先需要安裝如下兩個插件:

  • Flutter插件:提供程序的運行、調試和熱重載等功能

  • Dart:提供Dart語言的支持

安裝方式爲:選擇Preferences中的Plugins選項,然後搜索Flutter安裝即可,安裝Flutter插件會自動安裝Dart插件,安裝完成後,重啓IntelliJ,就可以通過IntelliJ來新建和開發程序了。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章