我的公眾號

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

什么是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 SDK 并熟悉您的 IDE，以便您可以充分利用它。如果你已經這樣做了，你可以跳到底部并發現我給大家的彩蛋，我最喜歡的 VSCode 插件。

安裝

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

• 安裝flutter
• 安裝flutter中文網地址

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

注意：您只能在 macOS 系統上為 iOS 開發 Flutter 應用程序。如果您使用的是 Windows，則只能為 Android 構建。

配置您的 IDE

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

• 設置編輯器中文網
• 設置編輯器

要充分利用您的 IDE，請查看文檔以獲取有關運行和調試應用程序、使用代碼片段、關鍵字快捷方式等的提示：

• Android Studio 和 IntelliJ

• Android Studio 和 IntelliJ中文網

• vs-code

• vs-code中文網

flutter doctor

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

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沒有報告任何錯誤，則您已經擁有開始構建應用程序所需的一切。

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

• 開發初體驗官方文檔
• 開發初體驗中文網

彩蛋：VS Code 插件可以像 Flutter Pro 一樣進行開發

如果您使用 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)來設置：

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

恭喜，您的 Flutter 開發環境已準備就緒！

我的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", }

下一節給大家帶來dart語言基礎，其實我之前簡單寫過一篇，但還沒有系統的寫過

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。