Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.

Flutter是一個由谷歌開發(fā)的開源移動應(yīng)用軟件開發(fā)工具包，用于為Android和iOS開發(fā)應(yīng)用，同時也將是Google Fuchsia下開發(fā)應(yīng)用的主要工具

最近看到很多的技術(shù)網(wǎng)站都在發(fā)Flutter相關(guān)的技術(shù)文章，所以自己也花時間了解了一下，寫了個簡單的HelloWorld體驗(yàn)了一下，感覺很不錯。簡單的記錄一下。

安裝

安裝環(huán)境基于MAC，Windows上也沒有太大的區(qū)別。

安裝Xcode、Android Stuido

Xcode 安裝

WX20190711-203332@2x.png

之后需要打開，會自動的進(jìn)行相應(yīng)的配置。

Android Studio 安裝

Android Studio官網(wǎng)下載

示例

示例

需要注意的是，建議使用API28,28的版本flutter會報錯

安裝flutter

Flutter在國內(nèi)訪問的速度不太好，訪問Flutter，進(jìn)行下載配置，建議使用梯子，推薦使用喵帕斯，可以聯(lián)系我獲取邀請碼。

• 增加源站鏡像環(huán)境變量(使用第三方的包的時候需要用到)

Windows

#我的電腦->屬性->高級系統(tǒng)設(shè)置->高級->環(huán)境變量，新建用戶環(huán)境變量,增加下面兩個變量
PUB_HOSTED_URL https://pub.flutter-io.cn 
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

Mac OS

~ cd ~/.bash_profile
#增加下面兩個環(huán)境變量
export PUB_HOSTED_URL=https://pub.flutter-io.cn  
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#保存 ,激活生效
source ~/.bash_profile

將下載的安裝包解壓，當(dāng)前的版本為1.7，然后配置環(huán)境變量

~ vi ~/.bash_profile
#增加如下,根據(jù)你實(shí)際的位置進(jìn)行配置
#flutter
export PATH=/Users/xxx/develop/flutter/bin:$PATH
source ~/.bash_profile
#驗(yàn)證
flutter --version
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Flutter 1.5.4-hotfix.2 ? channel stable ? https://github.com/flutter/flutter.git
Framework ? revision 7a4c33425d (2 months ago) ? 2019-04-29 11:05:24 -0700
Engine ? revision 52c7a1e849
Tools ? Dart 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)
#提示我更新，我當(dāng)時安裝的是1.5.4,更新完成再次驗(yàn)證，更新會花點(diǎn)時間，使用下面的命令行走代理，或者全局也可以，根據(jù)實(shí)際情況配置
export https_proxy=http://127.0.0.1:1087;
export http_proxy=http://127.0.0.1:1087;
export all_proxy=socks5://127.0.0.1:1086
#運(yùn)行doctor 檢測配置，第一次安裝需要安裝額外的幾個包，按照提示安裝即可
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel stable, v1.7.8+hotfix.3, on Mac OS X 10.14.5 18F132, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 10.2.1)
    ! CocoaPods out of date (1.6.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade:
        brew upgrade cocoapods
        pod setup
[!] iOS tools - develop for iOS devices
    ? ios-deploy not installed. To install:
        brew install ios-deploy
[?] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.3)
    ? Flutter plugin not installed; this adds Flutter specific functionality.
    ? Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.35.1)
    ? Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Proxy Configuration
    ! NO_PROXY is not set
[!] Connected device
    ! No devices available

! Doctor found issues in 7 categories.

#第一次安裝，需要安裝下面的包，brew 的使用可用搜我之前發(fā)的文章
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller

進(jìn)入flutter的目錄

~ tree -L 1 
.
├── AUTHORS
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── PATENTS
├── README.md
├── analysis_options.yaml
├── bin
├── dartdoc_options.yaml
├── dev
├── examples
├── flutter_console.bat
├── flutter_root.iml
├── packages
└── version

在目錄中看到有個examples-helloworld 里面有對應(yīng)的示例，使用Android Studio 打開：

示例

Error connecting to the service protocol: HttpException: Connection closed before full header was received, uri = http://127.0.0.1:53668/CCQP0ed9oCM=/ws

運(yùn)行后的效果：

效果

demo比較簡單，但是感覺非常的方便，后面有空繼續(xù)深入學(xué)習(xí)。