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

建構程式設計助理工具，用於產生 Flutter 使用者介面，或是任何您想要快速疊代的程式碼元件。建立使用者介面可能充滿樂趣並帶來獎勵，但卻很困難。這不僅是如何正確取得程式碼，還能展現出正確的外觀和風格，讓團隊對設計方向達成共識。

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

如需專案簡介影片並瞭解如何擴充，包括建構程式的員工深入分析，請參閱 AI Flutter 程式碼產生器 - 運用 Google AI 建構。否則，您可以按照下列操作說明開始擴充專案。

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

圖 1 在 VS Code Extension Development Host 視窗中執行的 Flutter Theme Agent。

專案設定

這些操作說明會逐步引導您設定 Flutter Theme Agent 專案，以供開發和測試使用。一般步驟包括安裝一些前置軟體、設定一些環境變數、從程式碼存放區複製專案，以及執行設定安裝。

安裝必備條件

Flutter Theme Agent 專案可做為 Microsoft Visual Studio Code (VS Code) 的擴充功能執行，並使用 Node.js 和 npm 管理套件及執行應用程式。下列安裝操作說明適用於 Linux 主機機器。

如何安裝必要的軟體：

  1. 為您的平台安裝 Visual Studio Code。
  2. 按照適用於您平台的安裝操作說明安裝 node 和 npm。
  3. 如果您尚未安裝 VS Code 適用的 Flutter，請按照安裝操作說明進行。

複製並設定專案

下載專案程式碼，並使用 npm 安裝指令來下載必要的依附元件並設定專案。您需要 git 原始碼控制軟體來擷取專案原始碼。
如要下載及設定專案程式碼：

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

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

  2. 或者，您也可以設定本機 Git 存放區，使其使用稀疏檢查，如此一來，您就只會擁有 Document Agent 專案的檔案。

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

  3. 前往 Flutter Theme Agent 專案根目錄。

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

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

    npm install

設定及測試擴充功能

現在，您可以在裝置的 VS Code 中將 Flutter 主題代理程式做為開發擴充功能執行，藉此測試安裝作業。測試會開啟獨立的 VS Code 的「Extension Development Host」視窗，其中包含新的擴充功能。在這個新視窗中，您將設定擴充功能存取 Google Gemini API 的 API 金鑰。

如何設定及測試設定：

  1. 啟動 VS Code 應用程式。
  2. 在 VS Code 中依序選取「File」>「New Window」，建立新視窗。
  3. 依序選取「File」>「Open Folder」，然後選取 flutter_theme_agent/ 資料夾，開啟 Flutter Theme Agent 專案。
  4. 在 VS Code 中開啟 flutter_theme_agent/package.json 檔案。
  5. 依序選取「Run」>「Start Debugging」，在偵錯模式下執行擴充功能。這個步驟會開啟另一個 VS Code 的「Extension Development Host」視窗。
  6. 依序選取「Code」>「Settings」>「Settings」，開啟 VS Code 設定。
  7. 從 Generative AI Developers 網站取得 Google Gemini API 金鑰，並複製金鑰字串。

  8. 將 API 金鑰設為配置設定。在「Search Settings」(搜尋設定) 欄位中輸入 flutter theme，選取「User」(使用者) 分頁標籤，然後在「Google」>「Gemini: Api Key」設定中，按一下「Edit in settings.json」連結，然後新增 Gemini API 金鑰：

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

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

如何測試擴充功能指令：

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

修改現有指令

如要變更擴充功能的行為和功能，最簡單的方法就是修改 Flutter Theme Agent 中提供的指令。

註解和審查指令都會使用幾種樣本提示方法，提供該程式碼的程式碼和註解範例，以及 AI 語言模型的一些一般操作說明。這個提示情境資訊會引導 Gemini 語言模型產生回應。只要變更註解或評論指令中的提示說明和/或範例，即可變更每個現有指令的行為。

這組操作說明說明如何透過變更指令的提示文字，藉此修改 buttonstyle.ts 指令。

如要準備編輯 buttonstyle.ts 指令：

  1. 啟動 VS Code 應用程式。
  2. 在 VS Code 中依序選取「File」>「New Window」，建立新視窗。
  3. 依序選取「File」>「Open Folder」，然後選取 flutter_theme_agent/ 資料夾，開啟 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 擴充功能專案視窗中，依序選取「Run」>「Restart Debugging」，重新啟動偵錯工具。

  2. 在 VS Code 的「Extension Development Host」視窗中，在編輯器視窗中選取程式碼註解，描述所需的按鈕樣式，例如：

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

  3. 依序選取「View」>「Command Palette」，開啟指令區塊面板。

  4. 在「Command Palette」(指令面板) 中輸入 Flutter，然後選取「Flutter Theme Agent: Create a Flutter ButtonStyle」指令。

建立新指令

您可以建立新的指令，使用 Gemini API 執行全新工作，藉此擴充 Flutter 主題代理程式。每個指令檔案 (例如 buttonstyle.ts 和 colorscheme.ts) 大多都獨立，內含程式碼，可透過使用中的編輯器收集文字、撰寫提示、連結至 Gemini API、傳送提示及提供回應。

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

圖 2. VS Code Extension Development Host 視窗中新增 Flutter Theme Agent 指令。

這組操作說明說明如何以現有指令 colorscheme.ts 的程式碼建立新指令。本次更新會將指令變更為不要加入 ColorScheme 物件的封閉語法，這樣在產生後就不必移除此語法，可以更快將輸出內容視覺化。

如何建立只會為 ColorScheme 物件產生顏色清單的指令：

  1. 在 src/ 目錄中，建立名為 colorscheme2.ts 的 flutter_theme_agent/src/colorscheme.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 叫用新指令。

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

  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 檔案的變更。

如何整合名稱指令與擴充功能套件：

  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 擴充功能專案視窗中，依序選取「Run」>「Restart Debugging」，重新啟動偵錯工具。系統會重新啟動另一個「Extension Development Host」視窗。
  2. 在 VS Code 的「Extension Development Host」視窗中，開啟 Flutter 開發專案。
  3. 在同一個視窗中開啟程式碼編輯器視窗，輸入說明所需使用者介面元件的註解，然後選取該註解文字。
  4. 依序選取「View」>「Command Palette」，開啟指令區塊面板。
  5. 在「Command Palette」(指令面板) 中輸入 Flutter Theme，然後選取「Flutter Theme Agent: My New Code Generator」(Flutter 主題代理程式：My New Code Generator) 指令。

其他資源

如要進一步瞭解 Flutter Theme Agent 專案，請參閱程式碼存放區。如果您在建構應用程式時需要協助，或尋找開發人員協作夥伴，請前往 Google Developers Community Discord 伺服器。

正式版應用程式

如果您打算為大量目標對象部署 Flutter 主題代理程式，請注意使用 Google Gemini API 時，可能會受到頻率限制和其他使用限制的規範。如果您考慮使用 Gemini 模型建構正式版應用程式，請查看 Google Cloud Vertex AI 服務，藉此提高應用程式的擴充性和可靠性。