flutter的安裝與設定

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

什么是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語言基礎，其實我之前簡單寫過一篇，但還沒有系統的寫過