flutter入門-搭建環境

摘要： Flutter 近來幾個月炒得大熱，對於移動開發者來說是挑戰可能也是機遇。至此， 跨平臺開發 領域算了一下，有: Google: Flutter Facebook: React Native Alibaba: Weex telerik : Nat...

ofollow,noindex" target="_blank">Flutter 近來幾個月炒得大熱，對於移動開發者來說是挑戰可能也是機遇。至此， 跨平臺開發 領域算了一下，有:

• Google: Flutter
• Facebook: React Native
• Alibaba: Weex
• telerik : NativeScript
• ionic
• ...等若干死去的和不活躍的專案

我列出這個表的時候，有些頭皮發麻，不知道對於我這個想通過跨平臺開發進入移動原生開發的人來說該選擇哪個。之前只瞭解過一點 react native，感覺開發者體驗並不好，想要 inspect 元素還要再開一個 devtool。這次，索性就直接試試 flutter。

現在記錄一下我作為前端開發者玩 flutter 的體會。

安裝

按照 文件 的順序來做，沒什麼好說的，我搭建環境還算順利，如果你遇到問題，可能需要學會科學上網。概述一下我的安裝過程(Mac)，一切以 官網 為準:

1. 下載 Flutter 原始碼（注意，是 beta 分支）:

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

   然後在 .bashrc (如果你用 zshrc 的話就是 .zshrc ) 中修改環境變數，將 flutter 專案根目錄下 bin 路徑加入環境變數 PATH:

   export PATH=$PATH:/Users/riskers/flutter/bin

   flutter --version 驗證是否安裝成功

2. 檢查你的機器上欠缺的環境

   因為是跨平臺開發，所以你需要安裝 iOS 和 Android 開發環境:

   flutter doctor

   就會看到下圖，x 號是你需要安裝的環境，這裡因為都已經安裝好了，所以都是對號。

   

3. 給 VSCode 安裝外掛: Dart 和 Flutter，這樣就能夠用 VSCode 開發 Flutter 了。

   

   

體驗 Flutter

1. 建立新應用:

   

2. 執行新應用

   按下 F5 進行除錯，選擇你的裝置（需要你提前準備好模擬器或者真機）

   

   

   如果你執行 Android 專案遇到問題，檢視這個 回答

3. 然後是 hot reload:

   

   hot reload 已經是標配了，如果 hot reload 都沒有，也太差勁了。

Debug

目前 layout 的 inspect 只支援在 Android Studio或IntelliJ IDEA的 Flutter外掛 。

更多

更多的實踐會在未來慢慢總結出來，敬請期待。

向我捐助 | 關於我 | 工作機會