初識Flutter之VS Code 的基本使用

Flutter編輯器 Visual Studio Code 基本使用

前言:爲何筆記強烈推薦VS Code,而非傳統的Android Studio。
雖然二者都有強大的插件庫以及可視化操做界面的支持。
但通過我實際使用來講(我是一名Xcoder,此前並未經常使用這二者編輯器)。
Android Studio給個人感受就是過重了(包太大,不包括android SDK就已經1.3個G了),
而我用VS Code只有幾十M的安裝包。
而後就是代碼風格外觀,一用到VS Code第一眼就把我驚豔了,
而Android Studio...我就不說了。(但願廣大的安卓開發者不要錘我...)
總之,VS Code輕量級,以及強大的插件庫支持,實在是Flutter開發的利器之一。
複製代碼

若是你閱讀過個人上一篇文章初識Flutter之入門前的準備,並安裝好dart,flutter開發環境,以及VS Code,那請繼續閱讀下文,如若還未安裝好,請先安裝好對應環境。android

一.快速從插件市場安裝插件

如圖:(通常安裝Dart,Flutter便可,另外兩個都是更新快速的自定義代碼補全插件,可根據我的喜歡是否添加)ios

二.快速建立屬於你的第一個Flutter項目 並用模擬器打開。

  1. 快速建立一個屬於你的項目 在termainal任意目錄:
flutter create helloworld
複製代碼

如無心外當前目錄就會生成一個helloworld的項目,咱們用vs code打開這個項目,並用vs code打開terminal面板:bash

  1. 使用Flutter命令啓動模擬器

執行啓動命令app

flutter run
複製代碼

這個時候因爲沒有沒有打開相應模擬器他會提示你打開相應的安卓或iOS模擬器先。編輯器

先執行:post

flutter emulators
複製代碼

選擇一款模擬器並啓動:spa

flutter emulators --launch apple_ios_simulator 
複製代碼

這個時候咱們的模擬器就此啓動了,再次執行:插件

flutter run
複製代碼

咱們的第一個flutter程序就啓動成功了 3d

若是咱們啓動了多個模擬器或真機,執行flutter run 可能會提示你加入-d參數 選擇相應模擬器去啓動如圖:code

咱們帶上相應的device id 便可 如:

flutter run -d B8031BA6-5FD4-4657-91A9-681D10DDD7D8
複製代碼

固然若是咱們不熟悉flutter命令,咱們使用vs code底部菜單欄也能夠快速建立模擬器並運行

以下圖;

點擊右下角NO Device 會彈出選擇啓動那款模擬器:

到此,VS Code 的基本使用就介紹到這裏,以後會繼續講解Flutter的基本控件用法等,請留意後續文章。

相關文章
相關標籤/搜索