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 Extension Development Host ウィンドウで実行されている 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. 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

拡張機能を構成してテストする

これで、デバイスの 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. [表示] > [コマンド パレット] を選択して、コマンド パレットを開きます。
  4. コマンド パレットで「Flutter Theme」と入力し、その接頭辞を持つコマンドを 1 つ選択します。

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

拡張機能の動作と機能を変更する最も簡単な方法は、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. [表示] > [コマンド パレット] を選択して、コマンド パレットを開きます。

  4. コマンド パレットで「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. 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 Community Discord サーバーをご確認ください。

本番環境のアプリケーション

Flutter Theme Agent を多数のユーザーにデプロイする予定がある場合は、Google Gemini API の使用がレート制限やその他の使用制限の対象となる可能性があるので注意してください。Gemini モデルを使用して本番環境アプリケーションを構築することを検討している場合は、アプリのスケーラビリティと信頼性を高める Google Cloud Vertex AI サービスを確認してください。