天天看點

Flutter的安裝與設定(第一節)

​如果你迷茫,不妨來瞅瞅碼農的軌迹

第一篇​​ ​#聊一聊悟空編輯器# wukong,讓我們編輯文章更便捷!​​

第二篇​​ ​該怎麼順利有益地度過大學四年 ​​

第三篇​​​如何在 flutter 中建構任何類型的應用程式(并克服教程地獄)​​

這是我在51的第四篇

我的目錄大概是這樣,但後面有可能更新

Flutter的安裝與設定(第一節)

在安裝之前和大家羅嗦幾句,

flutter是一個開源軟體開發工具包 (sdk),用于“幫助開發者通過一套代碼庫高效建構多平台精美應用,支援移動、web、桌面和嵌入式平台”。允許跨平台開發。這樣可以使您的公司和團隊節省大量時間和精力。

那麼,這究竟是什麼意思?假設我們有一位開發人員建立了一個驚人的應用程式,并且人們喜歡它。但是,該應用程式僅在 android上受支援。是以,開發人員決定花費大量時間學習 ios以支援更多使用者使用他們的應用程式。即使在學習了如何建構 ios應用程式之後,他們也意識到他們的應用程式必須支援所有類型的 ios裝置,然後去一一适配,這會讓他們頭秃。解決這些問題。隻需引入flutter就可以解決,

這就是 flutter 的用武之地。

2021年3月4日,谷歌正式釋出了 flutter 的 2.0。該版本最大的特性就是可以支援五大主流的作業系統:ios、android、linux、windows 和 macos。官方甚至還說豐田将會把 flutter 帶到汽車中。

也就是說,我們可以用一套 flutter 代碼适配全平台了。

目前flutter版本已經已經2.5.3

Flutter的安裝與設定(第一節)

但在此之前,第一步是安裝 flutter sdk 并熟悉您的 ide,以便您可以充分利用它。如果你已經這樣做了,你可以跳到底部并發現我給大家的彩蛋,我最喜歡的 vscode 插件。

官方網站上提供了完整的安裝說明:

​​​安裝flutter​​​

​​​安裝flutter中文網位址​​​

如果您想在 android 和 ios 上建構 flutter 應用程式,您需要安裝相應的 sdk,以及 android 模拟器和 ios 模拟器。上面的指南解釋了如何做到這一點。

注意:您隻能在 macos 系統上為 ios 開發 flutter 應用程式。如果您使用的是 windows,則隻能為 android 建構。

您還需要一個代碼編輯器,例如​​android studio​​​或​​visual studio code​​,以及 dart 和 flutter 插件:

​​​設定編輯器中文網​​​

​​​設定編輯器​​​

要充分利用您的 ide,請檢視文檔以擷取有關運作和調試應用程式、使用代碼片段、關鍵字快捷方式等的提示:

​​​android studio 和 intellij​​​

​​​android studio 和 intellij中文網​​​

​​​vs-code​​​

​​​vs-code中文網​​​

安裝完所有内容後(不要忘記在​​windows​​​或​​macos​​​上配置系統路徑!),您應該可以​<code>​flutter doctor​</code>​在終端上輸入。你的輸出應該是這樣的:

Flutter的安裝與設定(第一節)

如果​<code>​flutter doctor​</code>​沒有報告任何錯誤,則您已經擁有開始建構應用程式所需的一切。

是時候進行快速想上手了。這個頁面向你展示了如何建立一個新的 flutter 項目并運作它:

​​​開發初體驗官方文檔​​​

​​​開發初體驗中文網​​​

如果您使用 vscode,我強烈建議您添加一些有用的擴充。這些是我的最愛:

flutter and dart 這兩個插件沒有,你就别用vscode開發了吧。

​​​官方主題​​​​(誰不喜歡黑暗模式?😉)

​​​errorlens​​​​(在您鍵入時擷取有關錯誤的任何回報:超級有用)

​​​pubspec-assist​​​​(注意:類似的功能也可用于新的“dart:添加依賴”和“dart:添加開發依賴”指令)

​​​todo tree​​​

​​​better comments​​​

​​​remove comments​​​

​​​color highlight​​​

​​​bracket pair colorizer 2​​​

​​​material icon theme​​​

​​​image preview​​​

這些是我一直在使用的。如果你還有好的推薦,麻煩在評論區告訴我,我們一起進步。

您還可以啟用一些 vscode 設定來改善您的開發體驗。這些可以通過在指令面闆中打開首選項:打開設定 (json)來設定:

設定​​<code>​​"editor.formatonsave": true​​</code>​為在儲存時啟用格式(适用于​​<code>​​dartfmt​​</code>​)

設定​​<code>​​"editor.bracketpaircolorization.enabled": true​​</code>​​為啟用高性能支架對着色(​​​​此處解釋​​​)

恭喜,您的 flutter 開發環境已準備就緒!

我的settings.json

裡面我用到了版本控制fvm,有同鞋需要的話,去搜搜如何安裝,我也就不闡述了