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

构建一个编码助理工具，用于生成 Flutter 界面或您想要快速迭代的任何代码组件。创建界面既有趣又有成就感，但也是一项艰苦的工作。这不仅仅是编写正确的代码，还包括确保外观和风格正确无误，以及让团队就设计方向达成一致。

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

如需观看有关该项目及其扩展方式的视频简介（包括项目开发者的深入解析），请参阅 AI Flutter 代码生成器 - 利用 Google AI 进行构建。否则，您可以按照以下说明开始扩展项目。

在 VS Code 中运行的 Flutter 主题代理的屏幕截图

图 1. 在 VS Code 扩展程序开发主机窗口中运行的 Flutter 主题代理。

项目设置

以下说明会引导您设置 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 代码库配置为使用稀疏检出，以便您只拥有 Docs 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 Theme Agent 作为开发扩展程序运行，以测试安装情况。测试会打开一个单独的 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 以打开 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 以打开 Command Palette。

  4. 在 Command Palette 中，输入 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 文件。

如需将 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 扩展程序项目窗口中，依次选择 Run > Restart Debugging 以重启调试程序，这会重启单独的 Extension Development Host 窗口。
  2. 在 VS Code 的 Extension Development Host 窗口中，打开一个 Flutter 开发项目。
  3. 在同一窗口中，打开一个代码编辑器窗口，输入描述所需界面组件的注释，然后选择该注释文本。
  4. 选择 View > Command Palette 以打开 Command Palette。
  5. 在 Command Palette 中，输入 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 服务，以提高应用的可伸缩性和可靠性。