Flutter初體驗

• 在個人iPhone 8上，列表滑動仍是比較卡的。
• 用VS Code好像代碼提示不夠智能。
• 嵌套是真的醉了。

開發環境搭建

這裏介紹的是Mac平臺下的開發環境搭建，使用的IDE是VS Code。若是你使用的是Windows或Linux，能夠查看Flutter中文網上的介紹。

安裝Flutter

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶須要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶須要設置
export PATH=`pwd`/flutter/bin:$PATH
複製代碼

上面在命令行中設置的環境變量，只是針對當前的會話。因此咱們須要將他們寫道系統配置中。

open $HOME/.bash_profile

若是目錄下不存在改文件，則手動建立一個。而後將下面的代碼粘貼進去：

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶須要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶須要設置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
複製代碼

其中PATH_TO_FLUTTER_GIT_DIRECTORY是你clone的flutter的目錄，須要你本身替換掉。

運行source $HOME/.bash_profile。

注意: 若是你使用的是zsh，終端啓動時 ~/.bash_profile 將不會被加載，解決辦法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

iOS設置

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
複製代碼

若是你以前沒有用過cocoapods，須要設置一下鏡像。命令行中運行：

gem sources -l
複製代碼

查看當前使用的RubyGems源。

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
複製代碼

後面的--remove附帶的參數將上一步查看到的源寫上，而後再查看一下RubyGems源是否正確，確保以下所示：

$ gem sources -l
*** CURRENT SOURCES ***

https://gems.ruby-china.com/
複製代碼

若是還有其餘關於RubyGems的問題，能夠到 gems.ruby-china.com/ 得到幫助。

配置VS Code

• 安裝VS Code

你能夠去官網下載，而後安裝。這裏是傳送門。

• 安裝Flutter插件。

打開後，點擊左邊側邊欄的插件按鈕，搜索Flutter插件。

第一個就是 Flutter，安裝 Flutter同時會安裝 Dart插件，等安裝完畢後，再 reload一下就能夠了。

第一個Flutter工程

打開你的VS Code，View->Command Palette，輸入flutter並選擇Flutter: New Project，輸入一個工程名，就叫hello_flutter吧。

名稱只能是小寫字母和下劃線，是否是很變態啊。

回車後選擇一個目錄，工程就建立好了。

在VS Code下方的輸出區域，給咱們提供了TERMINAL功能，鏈接你的手機，在TERMINAL中敲下flutter run，就會看到正在編譯了。完成後，就能在手機上看到你的第一個flutter應用了。

這裏須要先配置Xcode以及證書相關。

至此，你就能夠開啓你的flutter之旅了。你能夠按照這篇文章來修改你的工程，建立一個列表來體驗。

參考文章

1. Flutter中文網
2. Flutter不同的跨平臺解決方案

你也能夠關注個人公衆號，獲取更多文章。