使用 Gemini 建構 AI Flutter 程式碼產生器

建構用於產生 Flutter 使用者介面的程式設計助理工具 您想要快速疊代的程式碼元件建立使用者介面時 而且很有趣，但也要很辛苦不僅要獲得 也能帶來完美的外觀和風格 對設計方向達成共識

本教學課程說明如何擴充 Flutter 主題代理程式 由 Flutter 開發人員關係團隊打造的 AI 技術輔助程式碼輔助工具 技術主管這項開放原始碼專案是 Microsoft Visual Studio 的擴充功能 會產生特定程式碼 (VS Code) Flutter 主題或 ThemeData 物件的元件，包括色彩配置 文字樣式和按鈕樣式您可以修改專案以 現有函式能為您提供更好的服務，或是建立新指令來取得更完善的支援 開發工作流程

觀看專案簡介影片、專案應用方式和深入分析資訊 一起看看開發團隊的製作者 AI Flutter 程式碼產生器：運用 Google AI 建構內容。 或者，您也可以按照操作說明開始擴充專案 。

在 VS Code 中執行的 Flutter 主題代理程式螢幕截圖

圖 1. 在 VS Code Extension 開發主機中執行的 Flutter 主題代理程式 視窗。

專案設定

以下操作說明會引導您設定 Flutter 主題代理程式專案 以便用於開發和測試一般步驟是安裝 必備軟體、設定一些環境變數、複製專案 並安裝設定

安裝必備條件

Flutter 主題代理程式專案會以 Microsoft 的擴充功能執行 Visual Studio Code (VS Code)，以及 使用 Node.js 和 npm 管理套件及執行 應用程式。以下是適用於 Linux 主機的安裝操作說明 這類機制更為快速

如何安裝必要的軟體：

  1. 安裝 Visual Studio Code 管理。
  2. 按照安裝程序操作，安裝 node 和 npm 操作說明。
  3. 如果您尚未安裝適用於 VS Code 的 Flutter，請按照 安裝操作說明。

複製並設定專案

下載專案程式碼，並使用 npm 安裝指令來下載 必要的依附元件並設定專案您需要具備 git 來源控制軟體以擷取專案 Cloud Build 觸發條件 會在您變更原始碼時自動啟動建構作業
如要下載並設定專案程式碼：

  1. 使用下列指令複製 git 存放區。

    git clone https://github.com/google/generative-ai-docs`

  2. 您可以選擇將本機 Git 存放區設為使用稀疏結帳功能。 所以您只有文件代理程式專案的檔案。

    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent

  3. 前往 Flutter 主題代理程式專案根目錄。

    cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

  4. 執行安裝指令，下載依附元件並設定專案：

    npm install

設定及測試擴充功能

您現在應該可以執行 Flutter 主題代理程式來測試安裝作業 做為裝置上的 VS Code 開發擴充功能測試會另外開啟 VS Code 中新擴充功能的 VS Code「Extension Development Host」視窗 廣告。在這個新視窗中，您將設定擴充功能要用到的 API 金鑰 存取 Google Gemini API

如何設定及測試設定：

  1. 啟動 VS Code 應用程式。
  2. 在 VS Code 中，選取「File」(檔案) > 新視窗。
  3. 選取 File > 以開啟 Flutter 主題代理程式專案開啟資料夾 然後選取 flutter_theme_agent/ 資料夾
  4. 在 VS Code 中開啟 flutter_theme_agent/package.json 檔案。
  5. 依序選取「Run」>「Run」，在偵錯模式下執行擴充功能開始偵錯。 這個步驟會開啟另一個 VS Code 的「Extension Development Host」視窗。
  6. 選取「Code」>「Code」開啟 VS Code 設定設定 >設定。
  7. 取得 Google Gemini API 金鑰 ，然後複製金鑰字串

  8. 將 API 金鑰設為配置設定。在「搜尋設定」中 欄位，輸入 flutter theme，選取 User 分頁標籤，找到 Google > Gemini：API 金鑰設定，點選在 settings.json 中編輯連結，然後 新增 Gemini API 金鑰：

    "google.ai.apiKey": "your-api-key-here"

  9. 儲存對 settings.json 檔案所做的變更，並關閉設定分頁。

如何測試擴充功能指令：

  1. 在 VS Code 的「Extension Development Host」視窗中編寫程式碼 註解，說明所要產生的使用者介面元件
  2. 選取含有元件特性的註解文字。
  3. 選取「View」>開啟指令區塊面板指令區塊面板。
  4. 在「指令面板」中輸入 Flutter Theme，然後選取其中一個 指定前置字串

修改現有指令

修改 Flutter 主題代理程式中提供的指令是最簡單的方法 變更擴充功能的行為和功能。

註解和審查指令都會使用幾個樣本提示 程式碼的範例與註解，以及一些通用的 提供操作說明這則提示背景資訊指南 Gemini 語言模型生成回覆變更提示 或範例，或兩者並行 可以變更每個現有指令的行為。

本組操作說明說明如何修改 buttonstyle.ts 指令。 或是變更指令提示文字

準備編輯 buttonstyle.ts 指令：

  1. 啟動 VS Code 應用程式。
  2. 在 VS Code 中，選取「File」(檔案) > 新視窗。
  3. 選取 File > 以開啟 Flutter 主題代理程式專案開啟資料夾 然後選取 flutter_theme_agent/ 資料夾

  4. 開啟 flutter_theme_agent/src/buttonstyle.ts 檔案

    如要修改 buttonstyle.ts 指令的行為：

  5. 在 buttonstyle.ts 檔案中，編輯 BUTTONSTYLE_CONTEXT 常數 以納入不同的指示

    const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

  6. (選用) 在 buttonstyle.ts 檔案中，BUTTONSTYLE_CONTEXT 常數，新增按鈕樣式指示和輸出內容的其他範例，或 並取代其中一個現有範例

    ...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

  7. 儲存 buttonstyle.ts 檔案的變更。

如何測試修改後的指令：

  1. 在 VS Code 擴充功能的專案視窗中，透過以下方式重新啟動偵錯工具： 選取「執行」>「執行」重新啟動偵錯。

  2. 在 VS Code 的「Extension Development Host」視窗中選取程式碼 這是編輯器視窗中的註解，說明您需要的按鈕樣式 範例：

    // blue, lickable buttons that light up when you hover over them`

  3. 選取「View」>開啟指令區塊面板指令區塊面板。

  4. 在「指令面板」中輸入 Flutter 並選取「Flutter 主題」 代理程式：建立 Flutter ButtonStyle 指令。

建立新指令

您可以建立執行新指令以擴充 Flutter 主題代理程式 全新任務各個指令檔案 (例如 buttonstyle.ts 和 colorscheme.ts 大多為獨立項目，包含 程式碼，用於從使用中的編輯器收集文字、撰寫提示 傳送提示，並手寫回覆。

Flutter 主題代理程式的螢幕截圖，其中顯示新指令

圖 2. VS Code Extension 中的新 Flutter 主題代理程式指令 「Development Host」視窗。

本組操作說明說明如何使用下列程式碼建構新指令： 現有指令 colorscheme.ts 做為範本這項更新會將 指令不包含 ColorScheme 物件的封閉語法，因此， 系統產生後就不需要移除這個語法

建立僅為 ColorScheme 產生顏色清單的指令 物件：

  1. 建立名為 flutter_theme_agent/src/colorscheme.ts 的檔案副本 src/ 目錄中的 colorscheme2.ts。
  2. 在 VS Code 中開啟 src/colorscheme2.ts 檔案。

  3. 在 colorscheme2.ts 檔案中，將 generateColorScheme 函式重新命名為 generateColorScheme2：

    export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

  4. 變更 colorscheme2.ts 檔案中的提示操作說明。編輯 COLORSCHEME_CONTEXT 程式碼產生指示，移除 第 51 行範例程式碼中的 ColorScheme( 文字，然後變成空白行。

    ...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...

  5. 移除右括號字元「)」在結尾的 並且把它變成空白線條。

    ...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

  6. 針對第二個範例重複這些變更。在 第 87 行上的 COLORSCHEME_CONTEXT 字串，移除 ColorScheme( 文字，然後 將其變更為空白行

  7. 在第 115 行，移除右括號字元「)」從 並在顏色清單末端變成空白行。

  8. 在 COLORSCHEME_CONTEXT 字串中新增不納入的指示 以下語法：

    ...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

  9. 儲存 colorscheme2.ts 檔案的變更。

整合新指令

完成新指令的程式碼後，您需要與 擴充功能的其餘部分將 extension.ts 和 package.json 檔案更新為 將新的指令新增至擴充功能，並啟用 VS Code 以叫用 VS Code 新指令即可

如何整合新指令與擴充功能程式碼：

  1. 在 VS Code 中開啟 flutter_theme_agent/src/extension.ts 檔案。

  2. 新增匯入作業，將新的指令程式碼匯入擴充功能 聲明。

    import { generateColorScheme2 } from './components/colorscheme2';

  3. 將下列程式碼加入 activate() 函式。

    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

  4. 儲存 extension.ts 檔案的變更。

如何將 name 指令與擴充功能套件整合：

  1. 在 VS Code 中開啟 flutter_theme_agent/package.json 檔案。

  2. 在套件檔案的 commands 部分新增指令。

    "contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

  3. 儲存 package.json 檔案的變更。

測試新指令

完成指令的編寫作業，並將指令與 您可以對其進行測試新的指令只能在 VS Code 中使用 「Extension Development Host」(擴充功能開發主機) 視窗，而「不是」出現在 VS Code 視窗中 編輯了擴充功能的程式碼

如何測試修改後的指令：

  1. 在 VS Code 擴充功能的專案視窗中，透過以下方式重新啟動偵錯工具： 選取「執行」>「執行」重新啟動偵錯作業，這會重新啟動 「Extension Development Host」(擴充功能開發主機) 視窗。
  2. 在 VS Code 的「Extension Development Host」視窗中，開啟 Flutter 開發專案
  3. 在相同視窗中開啟程式碼編輯器視窗，輸入說明註解內容 所需的使用者介面元件，然後選取註解文字
  4. 選取「View」>開啟指令區塊面板指令區塊面板。
  5. 在「Command Palette」(指令面板) 中輸入 Flutter Theme，然後選取 Flutter 主題代理程式：My New Code Generator 指令。

其他資源

如要進一步瞭解 Flutter 主題代理程式專案，請參閱 程式碼存放區。 如需建構應用程式的相關協助，或想尋找開發人員 請參閱 Google Developers Community Discord 伺服器。

正式版應用程式

如果您打算為廣大目標對象部署 Flutter 主題代理程式，請注意， 使用 Google Gemini API 時，可能必須遵守頻率限制等 使用限制。 如果您考慮使用 Gemini 模型建構正式版應用程式， 退房 Google Cloud Vertex AI 這些服務來提高應用程式的擴充性和可靠性。