我的公眾號

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

什么是flutter

Flutter是一個開源軟件開發(fā)工具包 (SDK)，用于“幫助開發(fā)者通過一套代碼庫高效構(gòu)建多平臺精美應(yīng)用，支持移動、Web、桌面和嵌入式平臺”。允許跨平臺開發(fā)。這樣可以使您的公司和團(tuán)隊節(jié)省大量時間和精力。

那么，這究竟是什么意思？假設(shè)我們有一位開發(fā)人員創(chuàng)建了一個驚人的應(yīng)用程序，并且人們喜歡它。但是，該應(yīng)用程序僅在 Android上受支持。因此，開發(fā)人員決定花費大量時間學(xué)習(xí) IOS以支持更多用戶使用他們的應(yīng)用程序。即使在學(xué)習(xí)了如何構(gòu)建 IOS應(yīng)用程序之后，他們也意識到他們的應(yīng)用程序必須支持所有類型的 IOS設(shè)備，然后去一一適配，這會讓他們頭禿。解決這些問題。只需引入Flutter就可以解決，這就是 Flutter 的用武之地。

2021年3月4日，谷歌正式發(fā)布了 Flutter 的 2.0。該版本最大的特性就是可以支持五大主流的操作系統(tǒng)：iOS、Android、Linux、Windows 和 MacOS。官方甚至還說豐田將會把 Flutter 帶到汽車中。

也就是說，我們可以用一套 Flutter 代碼適配全平臺了。

目前flutter版本已經(jīng)已經(jīng)2.5.3

但在此之前，第一步是安裝 Flutter SDK 并熟悉您的 IDE，以便您可以充分利用它。如果你已經(jīng)這樣做了，你可以跳到底部并發(fā)現(xiàn)我給大家的彩蛋，我最喜歡的 VSCode 插件。

安裝

官方網(wǎng)站上提供了完整的安裝說明：

• 安裝flutter
• 安裝flutter中文網(wǎng)地址

如果您想在 Android 和 iOS 上構(gòu)建 Flutter 應(yīng)用程序，您需要安裝相應(yīng)的 SDK，以及 Android 模擬器和 iOS 模擬器。上面的指南解釋了如何做到這一點。

注意：您只能在 macOS 系統(tǒng)上為 iOS 開發(fā) Flutter 應(yīng)用程序。如果您使用的是 Windows，則只能為 Android 構(gòu)建。

配置您的 IDE

您還需要一個代碼編輯器，例如Android Studio或Visual Studio Code，以及 Dart 和 Flutter 插件：

• 設(shè)置編輯器中文網(wǎng)
• 設(shè)置編輯器

要充分利用您的 IDE，請查看文檔以獲取有關(guān)運行和調(diào)試應(yīng)用程序、使用代碼片段、關(guān)鍵字快捷方式等的提示：

• Android Studio 和 IntelliJ

• Android Studio 和 IntelliJ中文網(wǎng)

• vs-code

• vs-code中文網(wǎng)

flutter doctor

安裝完所有內(nèi)容后（不要忘記在Windows或MacOS上配置系統(tǒng)路徑！），您應(yīng)該可以flutter doctor在終端上輸入。你的輸出應(yīng)該是這樣的：

Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 2.5.1, on Microsoft Windows [Version 10.0.19042.1288], locale zh-CN) [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.3) [√] Android Studio (version 4.2) [√] Connected device (3 available)! Doctor found issues in 0 category.

如果flutter doctor沒有報告任何錯誤，則您已經(jīng)擁有開始構(gòu)建應(yīng)用程序所需的一切。

是時候進(jìn)行快速試駕了。這個頁面向你展示了如何創(chuàng)建一個新的 Flutter 項目并運行它：

• 開發(fā)初體驗官方文檔
• 開發(fā)初體驗中文網(wǎng)

彩蛋：VS Code 插件可以像 Flutter Pro 一樣進(jìn)行開發(fā)

如果您使用 VSCode，我強烈建議您添加一些有用的插件。這些是我的最愛：

• Flutter and Dart 這兩個插件沒有，你就別用vscode開發(fā)了吧。

• 官方主題（誰不喜歡黑暗模式？😉）

• errorlens（在您鍵入時獲取有關(guān)錯誤的任何反饋：超級有用）

• pubspec-assist（注意：類似的功能也可用于新的“Dart：添加依賴”和“Dart：添加開發(fā)依賴”命令）

• Todo Tree

• Better Comments

• Remove Comments

• Color Highlight

• Bracket Pair Colorizer 2

• Material Icon Theme

• Image Preview

這些是我一直在使用的。如果你還有好的推薦，麻煩在評論區(qū)告訴我，我們一起進(jìn)步。

您還可以啟用一些 VSCode 設(shè)置來改善您的開發(fā)體驗。這些可以通過在命令面板中打開首選項：打開設(shè)置 (JSON)來設(shè)置：

• 設(shè)置"editor.formatOnSave": true為在保存時啟用格式（適用于dartfmt）
• 設(shè)置"editor.bracketPairColorization.enabled": true為啟用高性能支架對著色（此處解釋）

恭喜，您的 Flutter 開發(fā)環(huán)境已準(zhǔn)備就緒！

我的settings.json

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

{"security.workspace.trust.enabled": false,"dart.flutterSdkPaths": ["/Users/andrea/fvm/versions"],"dart.flutterSdkPath": "/Users/andrea/fvm/versions/stable","dart.warnWhenEditingFilesOutsideWorkspace": false,"dart.debugSdkLibraries": false,"dart.lineLength": 80,"dart.openDevTools": "flutter","dart.previewFlutterUiGuides": true,"dart.previewFlutterUiGuidesCustomTracking": true,"editor.bracketPairColorization.enabled": true,"editor.formatOnSave": true,"editor.renderWhitespace": "all","editor.minimap.enabled": false,"editor.inlineSuggest.enabled": true,"explorer.confirmDelete": false,"explorer.confirmDragAndDrop": false,"javascript.updateImportsOnFileMove.enabled": "always","markdown.extension.toc.updateOnSave": false,"todo-tree.highlights.enabled": true,"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)","todo-tree.general.tags": ["BUG","HACK","FIXME","TODO","XXX","[ ]","[x]"],"terminal.integrated.tabs.enabled": true,"window.zoomLevel": 1,"workbench.colorTheme": "Dracula", }

下一節(jié)給大家?guī)韉art語言基礎(chǔ)，其實我之前簡單寫過一篇，但還沒有系統(tǒng)的寫過

總結(jié)

以上是生活随笔為你收集整理的flutter的安装与设置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。