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

Flutter のユーザー インターフェースやコードを生成するためのコーディング アシスタント ツールを構築できます。 すばやくイテレーションするコード コンポーネントを指定します。ユーザーインターフェースの作成は 楽しみでやりがいもありますが 大変な仕事でもあります単に手に入れるだけではなく コードの見た目や操作感も適切になり デザインの方向性について合意を形成します

このチュートリアルでは、Google Cloud で Flutter テーマ エージェント Flutter デベロッパー リレーションズ チームが構築した AI ベースのコード アシスタンス ツール 務めていますこのオープンソース プロジェクトは Microsoft Visual Studio の拡張機能です。 Code（VS Code）であり、 Flutter テーマのコンポーネント、または ThemeData オブジェクトのカラーパターン ボタンのスタイルを設定できます。プロジェクトを変更すると、 新しいコマンドを構築してより効果的にサポートすることも 開発ワークフローを合理化できます

プロジェクトの概要と拡張方法（分析情報を含む）の動画 ご覧ください。 Flutter 用 AI コード生成ツール - Google AI でビルドします。 それ以外の場合は、手順に沿ってプロジェクトの拡張を開始できます。 ご覧ください

VS Code で実行されている Flutter テーマ エージェントのスクリーンショット

図 1. VS Code 拡張機能開発ホストで実行される Flutter テーマ エージェント クリックします。

プロジェクトの設定

ここでは、Flutter テーマエージェントのプロジェクト セットを取得する手順について説明します。 準備します。一般的な手順については、 いくつかの環境変数の設定、プロジェクトのクローン作成、前提条件のソフトウェアの作成 構成のインストールを実行します。

前提条件をインストールする

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 テーマ エージェント プロジェクトのルート ディレクトリに移動します。

    cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

  4. インストール コマンドを実行して依存関係をダウンロードし、プロジェクトを構成します。

    npm install

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

これで、Flutter Theme Agent を実行してインストールをテストできるようになりました。 開発用拡張機能としてデバイス上の VS Code で使用できます。テストでは別のタブが開き、 新しい拡張機能がある VS Code の Extension Development Host ウィンドウ できます。この新しいウィンドウでは、拡張機能が Gemini API にアクセスする方法を紹介します

設定を構成してテストするには:

  1. VS Code アプリケーションを起動します。
  2. VS Code で、[File] >新しいウィンドウ。
  3. [File] > [File] > [Flutter Theme Agent] を選択して、Flutter テーマ エージェント プロジェクトを開きます。フォルダを開く 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」と入力し、[User] タブを選択して、[Google > Gemini: API キーの設定で、[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 で提供されているコマンドを変更することは、 拡張機能の動作と機能を変更します。

コメント コマンドとレビュー コマンドはどちらも、少数ショット プロンプトの手法を使用します。 そのコードの例とコメント、および一般的ないくつかの 生成するコードです。このプロンプト コンテキスト情報ガイド Gemini 言語モデルを使用して回答を生成します。プロンプトを変更することで コメントまたはレビュー コマンドのいずれかで、指示、例、またはその両方を 既存の各コマンドの動作を変更できます。

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

buttonstyle.ts コマンドの編集を準備するには:\

  1. VS Code アプリケーションを起動します。
  2. VS Code で、[File] >新しいウィンドウ。
  3. [File] > [File] > [Flutter Theme Agent] を選択して、Flutter テーマ エージェント プロジェクトを開きます。フォルダを開く 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 ボタンスタイルの指示と出力の例をもう 1 つ追加する 既存の例の 1 つを置き換えます

    ...
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. [表示 >コマンド パレット。

  4. コマンド パレットで「Flutter」と入力し、[Flutter Theme] を選択します。 エージェント: Flutter ButtonStyle コマンドを作成する

新しいコマンドを作成

Flutter テーマ エージェントを拡張するには、次の処理を実行するコマンドを新たに作成します。 まったく新しいタスクを実行できますたとえば、 buttonstyle.ts と colorscheme.ts は、ほとんどが自己完結型であり、 アクティブなエディタからテキストを収集し、プロンプトを作成して、 Gemini API に送信してプロンプトを送信し、レスポンスを渡します。

新しいコマンドが表示された Flutter テーマ エージェントのスクリーンショット

図 2. VS Code 拡張機能の新しい Flutter テーマ エージェント コマンド [Development Host] ウィンドウ

この手順では、次のコードを使用して新しいコマンドを作成する方法を説明します。 既存のコマンド 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. 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] ウィンドウに表示できます。 拡張機能のコードを編集しました。

変更したコマンドをテストするには:

  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 テーマ エージェント プロジェクトについて詳しくは、 コード リポジトリ。 アプリケーションの構築についてサポートが必要な場合や、開発者をお探しの場合 詳しくは、 Google Developers Community Discord サーバー。

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

Flutter テーマエージェントを多数のユーザー向けにデプロイすることを予定している場合は、 Google Gemini API の使用には、レート制限やその他の 使用制限。 Gemini モデルで本番環境アプリケーションを構築することを検討している場合は、 チェックアウト Google Cloud Vertex AI アプリケーションのスケーラビリティと信頼性を向上させる。