1. 程式人生 > >第一個flutter應用程序--vs code 搭建flutter運行環境

第一個flutter應用程序--vs code 搭建flutter運行環境

準備 應用程序 fff ocs .sh -s host sdk alt

之前開發過hybrid app,用的是webview渲染,由於webview的體驗會沒有原生的體驗好,所以對跨端原生開發燃起了學習的興趣,在react-native和flutter之間糾結,

看了網上的一些對比,雖然flutter比較新,用的又是新的dart語言, 但貌似在兼容性上要優於reactive-native, 閑魚團隊就用了flutter,於是就決定從flutter入手。

作為一名前端開發,在flutter支持的幾種編輯器中還是用vs code比較順手,於是打算用vs code來配置flutter開發環境

先跟著官網進行前幾步基礎安裝程序,前幾步官網上有的基礎配置,最好跟著官網來,博客會過時,官網會更新。。

1. 安裝flutter

 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

如果要更新環境變量

vim ~/.bash_profile 進入文件添加系統變量路徑

export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH  //註意:PATH_TO_FLUTTER_GIT_DIRECTORY
為你flutter的路徑,比如“~/document/code”

運行 source $HOME/.bash_profile 刷新當前終端窗口.

查看環境變量是否在已經在PATH中:

echo $PATH

2. 安裝dart sdk

brew tap dart-lang/dart
brew install dart

如果沒有安裝Homebrew的,需要先安裝 https://brew.sh/

3. vs code 配置

vs安裝dart和flutter擴展

技術分享圖片

查看是否安裝成功

command+shift+p

Flutter: Run Flutter Doctor

新建項目demo

Flutter:New Project

技術分享圖片

如果新建項目出現了這樣的項目目錄,說明已經新建成功了,如果沒有,那需要檢查一下jdk、android-sdk,jdk的版本一定要是1.8的。

添加系統變量等操作,完成之後運行 Flutter:Launch emulater 就可以看到模擬器, 最後執行flutter run 就可以看到項目已經在模擬器裏運行起來了。

至此,demo才算跑起來,然後按照提示改lib/main.dart文件的東西,按r鍵熱加載,就可以看到改動之後的效果了。

4. 一些坑

在vs插件安好了以及flutter sdk, dart sdk安裝完成之後,準備新建一個項目,新建項目之前先運行flutter doctor。。不行。。貌似在安裝什麽插件。。等了好久,沒有成功。這個時候flutter create myapp顯然是沒有成功的。

於是才知道要安裝jdk, android sdk。。安完之後添加到系統變量。。嗯。然後新建項目,這次成功了,項目目錄出來了,然而準備跑起來的時候flutter run的時候報錯

Unable to locate a development device; please run ‘flutter doctor‘ for information about
installing additional components.

額,好吧,那運行flutter doctor ...出現一堆錯誤

技術分享圖片

根據上面的報錯提示,更新了安卓sdk, 然後出現 android licenses status報錯,

根據提示 update sdkmanager

還是報錯 Exception in thread “main” java.lang.UnsupportedClassVersionError ,這個錯誤是因為jdk版本不對,java --version 查看版本

jdk 版本要是1.8的,其他版本不行。。先開始安裝的是12,就一直報錯換成1.8之後,flutter doctor --android-licenses 然後就成功了 這個錯誤解決

還有一個錯誤是需要安裝xcode。android studio ,這些可以暫時先不安裝,用模擬器開發,總算是把demo跑起來了。

第一個flutter應用程序--vs code 搭建flutter運行環境