使用 Gemini 构建 AI Flutter 代码生成器

构建一个用于生成 Flutter 界面或任何界面的编码助理工具 需要快速迭代的代码组件。创建界面的步骤如下： 有趣又有意义，但也很困难。这不仅仅是一个 确保代码正确，其外观和风格也正确无误， 双方就设计方向达成一致

本教程介绍了如何将 Flutter Theme Agent 由 Flutter 开发者关系团队打造的 AI 赋能的代码辅助工具 Google 的员工。此开源项目是 Microsoft Visual Studio 的扩展程序。 Code (VS Code) 生成特定的 Flutter 主题或 ThemeData 对象的组件，包括配色方案、 文本样式和按钮样式您可以修改项目 现有函数更适合您，或者构建新命令来更好地支持 开发工作流

通过视频简要了解项目以及如何扩展项目（包括数据洞见） 了解建造者的想法 AI Flutter 代码生成器 - 使用 Google AI 构建。 否则，您可以按照说明开始扩展项目 。

在 VS Code 中运行的 Flutter Theme Agent 的屏幕截图

图 1. 在 VS Code 扩展程序开发主机中运行的 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. 如果您还没有安装 Flutter for VS Code，请按照 安装说明。

克隆并配置项目

下载项目代码并使用 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。

如需配置和测试您的设置，请执行以下操作：

  1. 启动 VS Code 应用。
  2. 在 VS Code 中，依次选择 File >新窗口。
  3. 依次选择 File >打开文件夹。 然后选择 flutter_theme_agent/ 文件夹。
  4. 在 VS Code 中，打开 flutter_theme_agent/package.json 文件。
  5. 依次选择 Run >开始调试。 此步骤会打开一个单独的 VS Code Extension Development Host 窗口。
  6. 依次选择 Code >设置 >设置。
  7. 获取 Google Gemini API 密钥 然后复制键字符串。

  8. 将 API 密钥设置为配置设置。在搜索设置中 字段中，输入 flutter theme，选择用户标签页，然后在 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. 选择查看 >Command Palette。
  4. 在 Command Palette 中，输入 Flutter Theme，然后选择其中一项 命令。

修改现有命令

修改 Flutter Theme Agent 中提供的命令是 更改扩展程序的行为和功能。

评论和评价命令都使用一些片段提示方法， 该代码和注释的示例，以及一些 AI 语言模型指令。此提示上下文信息指南 使用 Gemini 语言模型来生成回答。通过更改提示 说明和/或示例， 可以更改各个现有命令的行为方式。

这组说明说明了如何通过以下方法修改 buttonstyle.ts 命令： 更改命令提示文字。

如需准备修改 buttonstyle.ts 命令，请执行以下操作：

  1. 启动 VS Code 应用。
  2. 在 VS Code 中，依次选择 File >新窗口。
  3. 依次选择 File >打开文件夹。 然后选择 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 >重启调试。

  2. 在 VS Code Extension Development Host 窗口中，选择一个代码 说明您想要的按钮样式的注释， 示例：

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

  3. 选择查看 >Command Palette。

  4. 在 Command Palette 中，输入 Flutter 并选择 Flutter 主题 代理：创建一个 Flutter ButtonStyle 命令。

创建新命令

您可以通过创建新命令来扩展 Flutter Theme Agent，这些命令会执行 使用 Gemini API 完成全新任务。每个命令文件（如 buttonstyle.ts 和 colorscheme.ts，大部分内容是独立的，包含 用于从活动编辑器中收集文本、撰写提示、连接 使用 Gemini API、发送提示并给出响应。

Flutter Theme Agent 的屏幕截图，其中显示了新命令

图 2. VS Code 扩展程序中新增了 Flutter Theme Agent 命令 “开发主机”窗口。

本组说明将介绍如何使用 一个现有命令 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代码生成说明，移除 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 语句将新的命令代码导入到扩展程序中 声明。

    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 窗口，而不是 修改了扩展程序的代码。

如需测试修改后的命令，请执行以下操作：

  1. 在 VS Code 扩展程序项目窗口中，通过以下方式重启调试程序： 选择 Run >重新启动调试功能，这会单独重启一个单独的 Extension Development Host 窗口。
  2. 在 VS Code Extension Development Host 窗口中，打开 Flutter 开发项目。
  3. 在同一窗口中，打开一个代码编辑器窗口，在其中输入描述 选择所需的用户界面组件，然后选择该评论文本。
  4. 选择查看 >Command Palette。
  5. 在 Command Palette 中，输入 Flutter Theme，然后选择 Flutter Theme Agent: My New Code Generator 命令。

其他资源

如需详细了解 Flutter Theme Agent 项目，请参阅 代码库。 如果您需要构建应用方面的帮助或正在寻找开发者 请参阅 Google Developers 社区 Discord 服务器。

生产应用

如果您打算为大量目标对象部署 Flutter Theme Agent，请注意， 使用 Google Gemini API 时，可能会受到速率限制和其他 使用限制。 如果您正在考虑使用 Gemini 模型构建正式版应用， 结账 Google Cloud Vertex AI 以提高应用的可伸缩性和可靠性。