使用 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 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. 运行 install 命令以下载依赖项并配置项目：

    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. 从 Generative AI Developer 网站获取 Google Gemini API 密钥，然后复制密钥字符串。

  8. 将 API 密钥设为配置设置。在 Search Settings（搜索设置）字段中，输入 flutter theme，选择 User（用户）标签页，然后在 Google（Gemini：API 密钥）设置中，点击 Edit in settings.json（在 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 Theme Agent。每个命令文件（例如 buttonstyle.ts 和 colorscheme.ts）大多都是独立的，其中包含用于从活跃编辑器收集文本、撰写提示、连接到 Gemini API、发送提示以及处理响应的代码。

显示新命令的 Flutter Theme Agent 的屏幕截图

图 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 语句，将新的命令代码导入扩展程序。

    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 以打开命令面板。
  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 服务以提高应用的可伸缩性和可靠性。