Mit Gemini einen AI-Flutter-Codegenerator erstellen

Erstellen Sie ein Programmierassistent-Tool zum Generieren von Flutter-Benutzeroberflächen oder eine andere Codekomponente, die Sie schnell iterieren möchten. Das Erstellen von Benutzeroberflächen kann lustig und lohnenswert sein, ist aber auch harte Arbeit. Es geht nicht nur darum, den Code richtig zu machen. Es geht auch darum, das Look-and-feel richtig zu gestalten und Ihr Team dazu zu bringen, sich auf eine Designrichtung zu einigen.

In dieser Anleitung erfahren Sie, wie Sie den Flutter Theme Agent, ein KI-gestütztes Codehilfe-Tool, das vom Flutter Developer Relations-Team bei Google entwickelt wurde, erweitern können. Dieses Open-Source-Projekt ist eine Erweiterung für Visual Studio Code (VS Code) von Microsoft, mit der bestimmte Komponenten eines Flutter-Designs oder ThemeData-Objekts wie Farbschemas, Textstile und Schaltflächenstile generiert werden. Sie können das Projekt ändern, um diese vorhandenen Funktionen für Ihre Zwecke zu optimieren, oder neue Befehle erstellen, um Ihren Entwicklungsworkflow besser zu unterstützen.

Ein Video mit einem Überblick über das Projekt und wie es erweitert werden kann, einschließlich der Erkenntnisse der Entwickler, findest du unter AI Flutter Code Generator – Build with Google AI. Alternativ können Sie mit dem Erweitern des Projekts beginnen, indem Sie der Anleitung unten folgen.

Screenshot des Agenten für das Flutter-Design, der in VS Code ausgeführt wird

Abbildung 1: Agent für das Flutter-Design, der im Fenster „Host für VS Code-Erweiterungsentwicklung“ ausgeführt wird.

Projekt einrichten

In dieser Anleitung erfahren Sie, wie Sie das Projekt „Flutter Theme Agent“ für Entwicklung und Tests einrichten. Zu den allgemeinen Schritten gehören: Installieren der erforderlichen Software, Festlegen einiger Umgebungsvariablen, Klonen des Projekts aus dem Code-Repository und Ausführen der Konfigurationsinstallation.

Erforderliche Komponenten installieren

Das Projekt des Flutter-Theme-Agents wird als Erweiterung von Microsoft Visual Studio Code (VS Code) ausgeführt. Es verwendet Node.js und npm zum Verwalten von Paketen und zum Ausführen der Anwendung. Die folgende Installationsanleitung bezieht sich auf einen Linux-Hostcomputer.

So installieren Sie die erforderliche Software:

  1. Installieren Sie Visual Studio Code für Ihre Plattform.
  2. Installieren Sie node und npm. Folgen Sie dazu der Installationsanleitung für Ihre Plattform.
  3. Wenn Sie Flutter für VS Code noch nicht installiert haben, folgen Sie der Installationsanleitung.

Projekt klonen und konfigurieren

Laden Sie den Projektcode herunter und verwenden Sie den Installationsbefehl npm, um die erforderlichen Abhängigkeiten herunterzuladen und das Projekt zu konfigurieren. Sie benötigen die git-Versionsverwaltungssoftware, um den Projektquellcode abzurufen.
So laden Sie den Projektcode herunter und konfigurieren ihn:

  1. Klonen Sie das Git-Repository mit dem folgenden Befehl.

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

  2. Optional können Sie Ihr lokales Git-Repository für die Verwendung von Sparse-Checkout konfigurieren, sodass Sie nur die Dateien für das Docs-Agent-Projekt haben.

    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent

  3. Rufen Sie das Projektstammverzeichnis für den Flutter Theme-Agent auf.

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

  4. Führen Sie den Installationsbefehl aus, um Abhängigkeiten herunterzuladen und das Projekt zu konfigurieren:

    npm install

Erweiterung konfigurieren und testen

Sie sollten jetzt Ihre Installation testen können. Führen Sie dazu den Flutter Theme Agent als Entwicklungserweiterung in VS Code auf Ihrem Gerät aus. Durch den Test wird ein separates VS Code-Fenster für Erweiterungsentwicklungshost geöffnet, in dem die neue Erweiterung verfügbar ist. In diesem neuen Fenster konfigurieren Sie den API-Schlüssel, den die Erweiterung für den Zugriff auf die Google Gemini API verwendet.

So konfigurieren und testen Sie Ihre Einrichtung:

  1. Starten Sie die VS Code-Anwendung.
  2. Erstellen Sie in VS Code ein neues Fenster, indem Sie File > New Window auswählen.
  3. Öffnen Sie das Flutter Theme Agent-Projekt. Wählen Sie dazu File > Open Folder (Datei > Ordner öffnen) und dann den Ordner flutter_theme_agent/ aus.
  4. Öffnen Sie in VS Code die Datei flutter_theme_agent/package.json.
  5. Führen Sie die Erweiterung im Debug-Modus aus, indem Sie Run > Start Debugging auswählen. Dadurch wird ein separates VS Code-Fenster für den Erweiterungsentwicklungshost geöffnet.
  6. Öffnen Sie die VS Code-Einstellungen, indem Sie Code > Einstellungen > Einstellungen auswählen.
  7. Rufen Sie von der Website für Generative AI-Entwickler einen Google Gemini API-Schlüssel ab und kopieren Sie den Schlüsselstring.

  8. Legen Sie den API-Schlüssel als Konfigurationseinstellung fest. Geben Sie im Feld Sucheinstellungen flutter theme ein und wählen Sie den Tab Nutzer aus. Klicken Sie in der Einstellung Google > Gemini: API-Schlüssel auf den Link In settings.json bearbeiten und fügen Sie Ihren Gemini API-Schlüssel hinzu:

    "google.ai.apiKey": "your-api-key-here"

  9. Speichern Sie die Änderungen in der Datei settings.json und schließen Sie die Tabs für die Einstellungen.

So testen Sie die Erweiterungsbefehle:

  1. Schreiben Sie im Fenster Extension Development Host in VS Code einen Codekommentar, in dem die Komponente der Benutzeroberfläche beschrieben wird, die Sie generieren möchten.
  2. Wählen Sie den Kommentartext mit den Komponenteneigenschaften aus.
  3. Öffnen Sie die Befehlspalette über Ansicht > Befehlspalette.
  4. Geben Sie in der Befehlspalette Flutter Theme ein und wählen Sie einen Befehl mit diesem Präfix aus.

Vorhandenen Befehl ändern

Das Ändern der Befehle im Flutter Theme Agent ist die einfachste Möglichkeit, das Verhalten und die Funktionen der Erweiterung zu ändern.

Sowohl für die Befehle zum Kommentieren als auch für das Prüfen wird ein paar Shot Prompts mit Codebeispielen und Kommentaren für diesen Code sowie einigen allgemeinen Anleitungen für das KI-Sprachmodell verwendet. Diese Prompt-Kontextinformationen dienen dem Gemini-Sprachmodell beim Erzeugen einer Antwort. Wenn Sie die Anleitung für die Eingabeaufforderung, die Beispiele oder beides in den Befehlen „Kommentar“ oder „Review“ ändern, können Sie das Verhalten der einzelnen Befehle ändern.

In dieser Anleitung wird erläutert, wie Sie den Befehl buttonstyle.ts durch Ändern des Eingabeaufforderungstexts des Befehls ändern.

Zur Vorbereitung der Bearbeitung des Befehls buttonstyle.ts:\

  1. Starten Sie die VS Code-Anwendung.
  2. Erstellen Sie in VS Code ein neues Fenster, indem Sie File > New Window auswählen.
  3. Öffnen Sie das Flutter Theme Agent-Projekt. Wählen Sie dazu File > Open Folder (Datei > Ordner öffnen) und dann den Ordner flutter_theme_agent/ aus.

  4. Datei flutter_theme_agent/src/buttonstyle.ts öffnen.

    So ändern Sie das Verhalten des Befehls buttonstyle.ts:\

  5. Bearbeiten Sie in der Datei buttonstyle.ts die BUTTONSTYLE_CONTEXT-Konstante, sodass sie andere Anweisungen enthält.

    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. Optional können Sie in der Datei buttonstyle.ts (Konstante BUTTONSTYLE_CONTEXT) ein weiteres Beispiel für eine Anweisung und Ausgabe im Schaltflächenstil hinzufügen oder eines der vorhandenen Beispiele ersetzen.

    ...
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. Speichern Sie die Änderungen in der Datei buttonstyle.ts.

So testen Sie den geänderten Befehl:

  1. Starten Sie den Debugger im Projektfenster der VS Code-Erweiterung neu. Wählen Sie dazu Ausführen > Debugging neu starten aus.

  2. Wählen Sie im Fenster Extension Development Host in VS Code einen Codekommentar im Editorfenster aus, in dem der gewünschte Schaltflächenstil beschrieben wird. Beispiel:

    // blue, lickable buttons that light up when you hover over them`

  3. Öffnen Sie die Befehlspalette über Ansicht > Befehlspalette.

  4. Geben Sie in der Befehlspalette Flutter ein und wählen Sie den Befehl Flutter Theme Agent: Create a Flutter ButtonStyle aus.

Neuen Befehl erstellen

Sie können den Flutter Theme Agent erweitern, indem Sie neue Befehle erstellen, die völlig neue Aufgaben mit der Gemini API ausführen. Jede Befehlsdatei, z. B. buttonstyle.ts und colorscheme.ts, ist größtenteils in sich geschlossen und enthält Code zum Erfassen von Text aus dem aktiven Editor, zum Erstellen eines Prompts, zum Herstellen einer Verbindung zur Gemini API, zum Senden einer Aufforderung und zum Senden der Antwort.

Screenshot des Flutter-Design-Agents mit neuem Befehl

Abbildung 2: Neuer Befehl für den Flutter-Theme-Agent im Fenster „Development Host“ für die VS Code-Erweiterung.

In dieser Anleitung wird erläutert, wie Sie einen neuen Befehl mithilfe des Codes eines vorhandenen Befehls colorscheme.ts als Vorlage erstellen. Durch diese Aktualisierung wird der Befehl so geändert, dass er die einschließende Syntax des ColorScheme-Objekts nicht mehr enthält. So müssen Sie diese Syntax nicht nach der Generierung entfernen und die Ausgabe schneller visualisieren.

So erstellen Sie einen Befehl, der nur eine Liste von Farben für ein ColorScheme-Objekt generiert:

  1. Erstellen Sie eine Kopie der Datei flutter_theme_agent/src/colorscheme.ts mit dem Namen colorscheme2.ts im Verzeichnis src/.
  2. Öffnen Sie in VS Code die Datei src/colorscheme2.ts.

  3. Benennen Sie die Funktion generateColorScheme in der Datei colorscheme2.ts in generateColorScheme2 um:

    export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

  4. Ändern Sie die Anleitung für die Aufforderung in der Datei colorscheme2.ts. Bearbeiten Sie die Anleitung zur Codegenerierung COLORSCHEME_CONTEXT. Entfernen Sie dazu den Text ColorScheme( aus dem Beispielcode in Zeile 51 und geben Sie eine leere Zeile ein.

    ...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...

  5. Entfernen Sie das schließende Klammer „)“ vom Ende der Farbliste und legen Sie dafür eine leere Zeile fest.

    ...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

  6. Wiederholen Sie diese Änderungen für das zweite Beispiel. Entfernen Sie im String COLORSCHEME_CONTEXT in Zeile 87 den Text ColorScheme( und definieren Sie ihn als leere Zeile.

  7. Entfernen Sie in Zeile 115 die schließende Klammer ")" vom Ende der Farbliste und legen Sie eine leere Zeile fest.

  8. Fügen Sie dem String COLORSCHEME_CONTEXT eine Anweisung hinzu, die umschließende Syntax nicht enthalten soll:

    ...
- 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. Speichern Sie die Änderungen in der Datei colorscheme2.ts.

Neuen Befehl einbinden

Nachdem Sie den Code für den neuen Befehl fertiggestellt haben, müssen Sie ihn in den Rest der Erweiterung integrieren. Aktualisieren Sie die Dateien extension.ts und package.json, um den neuen Befehlsteil der Erweiterung zu erstellen. Aktivieren Sie dann VS Code, um den neuen Befehl aufrufen zu können.

So binden Sie den neuen Befehl in den Erweiterungscode ein:

  1. Öffnen Sie in VS Code die Datei flutter_theme_agent/src/extension.ts.

  2. Importieren Sie den neuen Befehlscode in die Erweiterung, indem Sie eine neue Importanweisung hinzufügen.

    import { generateColorScheme2 } from './components/colorscheme2';

  3. Registrieren Sie den neuen Befehl. Fügen Sie dazu der Funktion activate() den folgenden Code hinzu.

    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

  4. Speichern Sie die Änderungen in der Datei extension.ts.

So binden Sie den Befehl „name“ in das Erweiterungspaket ein:

  1. Öffnen Sie in VS Code die Datei flutter_theme_agent/package.json.

  2. Fügen Sie den neuen Befehl dem Abschnitt commands der Paketdatei hinzu.

    "contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

  3. Speichern Sie die Änderungen in der Datei package.json.

Neuen Befehl testen

Nachdem Sie den Befehl codiert und in die Erweiterung integriert haben, können Sie ihn testen. Der neue Befehl ist nur im Fenster Extension Development Host in VS Code verfügbar und nicht im VS Code-Fenster, in dem Sie den Code für die Erweiterung bearbeitet haben.

So testen Sie den geänderten Befehl:

  1. Starten Sie den Debugger im Projektfenster der VS Code-Erweiterung neu. Wählen Sie dazu Ausführen > Debugging neu starten aus. Dadurch wird ein separates Fenster für den Host für die Erweiterungsentwicklung neu gestartet.
  2. Öffnen Sie im Fenster Extension Development Host in VS Code ein Flutter-Entwicklungsprojekt.
  3. Öffnen Sie im selben Fenster ein Code-Editor-Fenster, geben Sie einen Kommentar ein, der die gewünschte Komponente der Benutzeroberfläche beschreibt, und wählen Sie den Kommentartext aus.
  4. Öffnen Sie die Befehlspalette über Ansicht > Befehlspalette.
  5. Geben Sie in der Befehlspalette Flutter Theme ein und wählen Sie den Befehl Flutter Theme Agent: My New Code Generator aus.

Zusätzliche Ressourcen

Weitere Informationen zum Projekt „Flutter Theme Agent“ finden Sie im Code-Repository. Wenn Sie Hilfe beim Erstellen der Anwendung benötigen oder mit dem Entwickler zusammenarbeiten möchten, besuchen Sie den Server der Google Developers-Community Discord.

Produktionsanwendungen

Wenn Sie den Flutter-Design-Agent für eine große Zielgruppe bereitstellen möchten, kann die Verwendung der Google Gemini API unter Umständen Ratenbegrenzungen und anderen Nutzungsbeschränkungen unterliegen. Wenn Sie mit dem Gemini-Modell eine Produktionsanwendung erstellen möchten, sollten Sie sich die Google Cloud Vertex AI-Dienste ansehen, die die Skalierbarkeit und Zuverlässigkeit Ihrer Anwendung verbessern.