Brassai Kao’s Tech Weave

Tag: flutter

  • Flutter 資料夾結構說明

    以下說明 Flutter 各資料夾的內容：

    • 對應各種平台
      • android
      • ios
      • linux
      • web
      • windows
    • build 存放程式編譯後的執行檔
    • lib 存放所有 Dart 的程式碼
    • test 存放檢驗程式功能是否正常運作的程式碼
    • pubspec.yml 專案使用的套件清單
    • README.md 專案說明
    • .gitignore 不需要被 Git 版本控制的資料清單

  • 如何在 VSCode 新增 Flutter 專案

    方式一：檢視 => 命令選擇區… => 輸入 flutter 帶出相關的動作後，選擇 New Project
    方式二：在 終端機 輸入: flutter create {專案名稱}

  • Flutter – Hello World 程式碼說明

    下圖為 Flutter 第一個程式 Hello World 的快速說明：

  • Flutter 的 VS Code 開發環境概述

    建立完 Flutter 專案後，開發畫面大略說明如下圖：

  • Flutter 環境架設概要

    Flutter 環境架設概要

    直接參考 Flutter 官方網站 (https://docs.flutter.dev/get-started/install/windows/mobile )的說明即可完成環境架設。 Windows 作業系統建議參考官方網站的”Download and install”說明來安裝，避免細節的設定有所遺漏。

    其他需要留意的部分如下：

    1. 需安裝 Visual Studio：社群版即可、必須要安裝 C++ 開發的相關套件(Dart 底層適用 C++ 來實作)
    2. 需安裝 Android Studio：Android SDK 的 SDK Tools 需要安裝 Command Line Tools、建議一併安裝模擬器
    3. 如果是直接透過 VSCode 的擴充功能安裝 Flutter，需確認環境變數的 Path 有沒有加入
      <安裝路徑>\flutter\bin
  • Flutter 專案生成 API 文件

    Flutter 專案生成 API 文件

    在 命令提示字元、Android Studio 或 VSCode 的終端機介面，輸入以下指令即可：

    1. 切換到專案所在目錄
    2. 取得當前專案目錄底下的相關資訊：dart pub get
    3. 確保沒有錯誤：dart analyze
    4. 產生API文件到專案所在目錄的 ./doc 資料夾中：dart doc .