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

建構程式設計輔助工具，用於產生 Flutter 使用者介面，或您想要快速重複執行的任何程式碼元件。建立使用者介面既有趣又有成就感，但也是一項辛苦的工作。這不僅是編寫正確程式碼的問題，還包括如何取得正確的外觀和感受，以及讓團隊就設計方向達成共識。

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

如要觀看有關專案的影片簡介和擴充方式，包括開發人員提供的洞察資料，請參閱「AI Flutter Code Generator - Build with Google AI」。否則，您可以按照下方說明開始擴充專案。

在 VS Code 中執行 Flutter Theme Agent 的螢幕截圖

圖 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 存放區設定為使用稀疏檢查，這樣您就只會取得文件操作代理程式專案的檔案。

    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

設定及測試擴充功能

您現在應該可以透過在裝置上執行 Flutter Theme Agent 做為 VS Code 中的開發擴充功能，來測試安裝作業。這項測試會開啟獨立的 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. 從生成式 AI 開發人員網站取得 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. 在指令面板中輸入 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. 在指令面板中輸入 Flutter，然後選取「Flutter Theme Agent: Create a Flutter ButtonStyle」指令。

建立新指令

您可以建立新的指令，透過 Gemini API 執行全新的工作，藉此擴充 Flutter 主題代理程式。每個指令檔案 (例如 buttonstyle.ts 和 colorscheme.ts) 幾乎都是獨立的，並包含從有效編輯器收集文字、撰寫提示、連線至 Gemini API、傳送提示，以及處理回應的程式碼。

螢幕截圖：顯示新指令的 Flutter Theme Agent

圖 2. VS Code 擴充功能開發主機視窗中的新 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. 在指令面板中輸入 Flutter Theme，然後選取「Flutter Theme Agent: My New Code Generator」指令。

其他資源

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

正式版應用程式

如果您打算為大量使用者部署 Flutter Theme Agent，請注意，您使用 Google Gemini API 時可能會受到頻率限制和其他使用限制的約束。如果您考慮使用 Gemini 模型建構正式版應用程式，請查看 Google Cloud Vertex AI 服務，進一步提升應用程式的可擴充性和可靠性。