Gemini で AI Flutter コード生成ツールをビルドする

Flutter ユーザー インターフェースや、迅速な反復処理が必要なコード コンポーネントを生成するためのコーディング アシスタント ツールを構築します。ユーザー インターフェースの作成は楽しい作業であり、やりがいもありますが、大変な作業でもあります。コードを正しくするだけでなく、外観や操作感を正しくし、チームがデザインの方向性に同意できるようにします。

このチュートリアルでは、Google の Flutter デベロッパー リレーションズ チームが構築した AI を活用したコード支援ツールである Flutter Theme Agent を拡張する方法について説明します。このオープンソース プロジェクトは、Microsoft Visual Studio Code（VS Code）の拡張機能であり、カラーパターン、テキスト スタイル、ボタン スタイルなど、Flutter テーマの特定のコンポーネント（ThemeData オブジェクト）を生成します。これらの既存の関数をより適切に機能させるようにプロジェクトを変更したり、開発ワークフローをより適切にサポートするように新しいコマンドを作成したりできます。

プロジェクトの概要と拡張方法の動画（作成者からの分析情報を含む）については、AI Flutter Code Generator - Build with 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. VS Code 用 Flutter をまだインストールしていない場合は、インストール手順に沿ってインストールします。

プロジェクトのクローンを作成して構成する

プロジェクト コードをダウンロードし、npm インストール コマンドを使用して必要な依存関係をダウンロードし、プロジェクトを構成します。プロジェクトのソースコードを取得するには、git ソース管理ソフトウェアが必要です。
プロジェクト コードをダウンロードして構成する手順は次のとおりです。

  1. 次のコマンドを使用して、Git リポジトリのクローンを作成します。

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

  2. 必要に応じて、スパース チェックアウトを使用するようにローカルの Git リポジトリを構成して、Docs エージェント プロジェクトのファイルのみを取得します。

    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 で、[ファイル > 新しいウィンドウ] を選択して新しいウィンドウを作成します。
  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 デベロッパー サイトから 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. [表示] > [コマンド パレット] を選択して、コマンド パレットを開きます。
  4. コマンド パレットで Flutter Theme と入力し、その接頭辞を持つコマンドのいずれかを選択します。

既存のコマンドを変更する

拡張機能の動作と機能を変更する最も簡単な方法は、Flutter Theme Agent で提供されるコマンドを変更することです。

コメント コマンドとレビュー コマンドの両方で、コードのサンプルとそのコードのコメント、AI 言語モデルの一般的な指示を含む少数ショット プロンプト アプローチが使用されます。このプロンプト コンテキスト情報は、Gemini 言語モデルが回答を生成する際に使用されます。コメント コマンドまたはレビュー コマンドのいずれかでプロンプトの指示や例を変更することで、既存のコマンドの動作を変更できます。

この手順では、コマンドのプロンプト テキストを変更して buttonstyle.ts コマンドを変更する方法について説明します。

buttonstyle.ts コマンドを編集する準備をします。

  1. VS Code アプリケーションを起動します。
  2. VS Code で、[ファイル > 新しいウィンドウ] を選択して新しいウィンドウを作成します。
  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. [表示] > [コマンド パレット] を選択して、コマンド パレットを開きます。

  4. コマンド パレットで Flutter と入力し、[Flutter Theme Agent: Create a 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. 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. 2 つ目の例でも、これらの変更を繰り返します。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. [表示] > [コマンド パレット] を選択して、コマンド パレットを開きます。
  5. コマンド パレットで 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 サービスを確認して、アプリのスケーラビリティと信頼性を高めましょう。