Mit Gemini einen AI-Flutter-Codegenerator erstellen

Entwicklung eines Programmierassistenten zum Generieren von Flutter-Benutzeroberflächen oder anderen die Sie schnell iterieren möchten. Das Erstellen von Benutzeroberflächen Spaß machen und lohnenswert ist, aber auch harte Arbeit. Es geht nicht nur darum, dass der Code richtig ist, das Erscheinungsbild richtig ist und Ihr Team um sich auf eine Designrichtung zu einigen.

In diesem Tutorial erfahren Sie, wie Sie Flutter-Design-Agent Ein KI-gestütztes Code-Assist-Tool, das vom Flutter Developer Relations-Team entwickelt wurde bei Google. Dieses Open-Source-Projekt ist eine Erweiterung für Microsoft Visual Studio Code (VS Code), der spezifische Komponenten eines Flutter-Designs oder ThemeData-Objekts, einschließlich Farbschemata, Text- und Schaltflächenstile. Sie können das Projekt ändern, vorhandene Funktionen besser für Sie funktionieren, oder entwickeln Sie neue Befehle, Ihres Entwicklungs-Workflows.

Videoübersicht über das Projekt und wie Sie es erweitern können, einschließlich Erkenntnissen von den Entwicklern, AI Flutter Code Generator – Build with Google AI. Andernfalls können Sie mit der Erweiterung des Projekts beginnen, indem Sie der Anleitung folgen. weiter unten.

Screenshot des in VS Code ausgeführten Flutter-Design-Agents

Abbildung 1. Flutter Theme-Agent wird im Entwicklungshost der VS Code-Erweiterung ausgeführt .

Projekt einrichten

In dieser Anleitung erfahren Sie, wie Sie das Projektset „Flutter Theme Agent“ abrufen. für Entwicklung und Tests bereit. Die allgemeinen Schritte lauten erforderliche Software, das Festlegen einiger Umgebungsvariablen, das Klonen des Projekts aus dem Code-Repository und führen die Konfigurationsinstallation aus.

Erforderliche Komponenten installieren

Das Projekt „Flutter Theme Agent“ wird als Erweiterung von Microsoft Visual Studio Code (VS Code) und verwendet Node.js und npm zum Verwalten von Paketen und Ausführen der . Die folgende Installationsanleitung gilt für einen Linux-Host. Maschine.

So installieren Sie die erforderliche Software:

  1. Visual Studio Code installieren für Ihre Plattform.
  2. Installieren Sie node und npm gemäß der Installation für Ihre Plattform.
  3. Wenn Sie Flutter for VS Code noch nicht installiert haben, folgen Sie der Installationsanleitung.

Projekt klonen und konfigurieren

Laden Sie den Projektcode herunter und verwenden Sie zum Herunterladen den Installationsbefehl npm die erforderlichen Abhängigkeiten und konfigurieren Sie das Projekt. Du brauchst Versionsverwaltungssoftware git zum Abrufen des Projekts Quellcode verfügbar.
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. Konfigurieren Sie optional Ihr lokales Git-Repository für den Sparse-Checkout. 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 des 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 Ihre Installation jetzt testen können, indem Sie den Flutter Theme-Agent ausführen als Entwicklungserweiterung in VS Code auf Ihrem Gerät. Der Test öffnet eine separate VS Code-Fenster Extension Development Host, in dem sich die neue Erweiterung befindet verfügbar. In diesem neuen Fenster konfigurieren Sie den API-Schlüssel, den die Erweiterung für auf die Google Gemini API zugreifen.

So konfigurieren und testen Sie die Einrichtung:

  1. Starten Sie die VS Code-Anwendung.
  2. Erstellen Sie in VS Code ein neues Fenster, indem Sie File > Neues Fenster.
  3. Öffnen Sie das Flutter Theme Agent-Projekt, indem Sie File > Ordner öffnen, und wählen Sie 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 Ausführen > Debugging starten Dadurch wird ein separates VS Code-Fenster Extension Development Host geöffnet.
  6. Öffnen Sie die VS Code-Einstellungen, indem Sie Code > Einstellungen > Einstellungen.
  7. Holen Sie sich Google Gemini API-Schlüssel von der generativen KI-Entwicklerwebsite und kopieren Sie den Schlüsselstring.

  8. Legen Sie den API-Schlüssel als Konfigurationseinstellung fest. In den Sucheinstellungen Geben Sie flutter theme ein, wählen Sie den Tab Nutzer aus und geben Sie im Feld Google > Gemini: API-Schlüssel auf den Link In settings.json bearbeiten. 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 mit den Einstellungen.

So testen Sie die Erweiterungsbefehle:

  1. Schreiben Sie in VS Code im Fenster Extension Development Host einen Code. Kommentar mit einer Beschreibung der UI-Komponente, die Sie generieren möchten.
  2. Wählen Sie den Kommentartext mit den Komponenteneigenschaften aus.
  3. Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette.
  4. Geben Sie in der Befehlspalette Flutter Theme ein und wählen Sie eine der mit diesem Präfix.

Vorhandenen Befehl ändern

Am einfachsten lassen sich die Befehle im Flutter Theme Agent ändern. das Verhalten und die Funktionen der Erweiterung zu ändern.

Sowohl bei den Befehlen zum Kommentieren als auch bei der Überprüfung wird eine Reihe Shot-Prompts verwendet, Beispiele für Code und Kommentare für diesen Code sowie allgemeine Anweisungen für das KI-Sprachmodell. Anleitungen zu Kontextinformationen für den Prompt das Gemini-Sprachmodell beim Generieren einer Antwort. Durch Ändern des Prompts Anweisungen, Beispiele oder beides in den Befehlen "comment" oder "review" das Verhalten der vorhandenen Befehle ändern.

In dieser Anleitung wird erläutert, wie Sie den Befehl buttonstyle.ts ändern, indem Sie den Prompt-Text des Befehls ändern.

Bearbeiten des Befehls buttonstyle.ts:\

  1. Starten Sie die VS Code-Anwendung.
  2. Erstellen Sie in VS Code ein neues Fenster, indem Sie File > Neues Fenster.
  3. Öffnen Sie das Flutter Theme Agent-Projekt, indem Sie File > Ordner öffnen, und wählen Sie den Ordner flutter_theme_agent/ aus.

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

    Verhalten des Befehls buttonstyle.ts ändern:\

  5. Bearbeiten Sie in der Datei buttonstyle.ts die Konstante BUTTONSTYLE_CONTEXT. um unterschiedliche Anweisungen hinzuzufügen.

    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: BUTTONSTYLE_CONTEXT in der Datei buttonstyle.ts fügen Sie ein weiteres Beispiel für eine Schaltflächenstilanweisung und -ausgabe hinzu. 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 an der Datei buttonstyle.ts.

So testen Sie den geänderten Befehl:

  1. Starten Sie den Debugger im Projektfenster der VS Code-Erweiterung neu, indem Sie wählen Sie Ausführen > Starten Sie das Debugging neu.

  2. Wählen Sie im VS Code-Fenster Extension Development Host einen Code aus. und beschreiben Sie im Editorfenster den gewünschten Schaltflächenstil, Beispiel:

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

  3. Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette.

  4. Geben Sie in der Befehlspalette Flutter ein und wählen Sie das Flutter-Design aus Agent: Erstellen Sie einen Flutter ButtonStyle-Befehl.

Neuen Befehl erstellen

Sie können den Flutter-Design-Agent erweitern, indem Sie neue Befehle erstellen, ganz neue Aufgaben mit der Gemini API ausführen. Jede Befehlsdatei, z. B. buttonstyle.ts und colorscheme.ts sind weitgehend eigenständig und umfassen zum Erfassen von Text aus dem aktiven Editor, Erstellen eines Prompts, an die Gemini API, um einen Prompt zu senden und die Antwort zu übergeben.

Screenshot des Flutter-Design-Agents mit sichtbarem neuen Befehl

Abbildung 2: Neuer Befehl des Flutter Theme Agent in der VS Code-Erweiterung Entwicklungshostfenster.

In dieser Anleitung wird erklärt, wie Sie einen neuen Befehl mit dem Code den vorhandenen Befehl colorscheme.ts als Vorlage. Mit dieser Aktualisierung ändert sich um die einschließende Syntax des ColorScheme-Objekts nicht einzubeziehen, sodass Sie müssen diese Syntax nach der Generierung nicht entfernen und die Ausgabe visualisieren schneller.

Um einen Befehl zu erstellen, mit dem nur eine Liste von Farben für ein ColorScheme generiert wird -Objekt enthält:

  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 in der Datei colorscheme2.ts die Funktion generateColorScheme in generateColorScheme2:

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

  4. Ändern Sie die Prompt-Anleitung in der Datei colorscheme2.ts. Bearbeiten Sie die Anleitung für die COLORSCHEME_CONTEXT-Codegenerierung, indem Sie den ColorScheme( aus dem Beispielcode in Zeile 51 aus und legen Sie eine leere Zeile fest.

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

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

  5. Entferne die schließenden Klammern „)“ vom Ende des in eine leere Zeile.

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

This example code is a good ...

  6. Wiederholen Sie diese Änderungen für das zweite Beispiel. Im COLORSCHEME_CONTEXT String in Zeile 87, entferne den ColorScheme(-Text und in eine leere Zeile.

  7. Entfernen Sie in Zeile 115 die schließenden Klammern ")". aus der der Farbliste in eine leere Zeile.

  8. Fügen Sie im String COLORSCHEME_CONTEXT eine Anweisung hinzu, die das Attribut nicht einschließen soll der einschließenden Syntax:

    ...
- 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 an 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. Aktualisieren Sie die Dateien extension.ts und package.json auf den neuen Befehl Teil der Erweiterung machen und VS Code in der Lage sein, den neuen Befehl.

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 einen neuen Import hinzufügen. .

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

  3. Registrieren Sie den neuen Befehl, indem Sie den folgenden Code zur activate().

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

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

So integrieren Sie den Befehl „name“ in das Erweiterungspaket:

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

  2. Fügen Sie den neuen Befehl im 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 an der Datei package.json.

Neuen Befehl testen

Sobald Sie die Codierung des Befehls abgeschlossen und ihn in den können Sie sie testen. Der neue Befehl ist nur im VS Code verfügbar Extension Development Host und nicht im VS Code-Fenster, in dem Sie den Code für die Erweiterung bearbeitet.

So testen Sie den geänderten Befehl:

  1. Starten Sie den Debugger im Projektfenster der VS Code-Erweiterung neu, indem Sie wählen Sie Ausführen > Debugging neu starten, wodurch ein separater Erweiterungsentwicklungshost.
  2. Öffnen Sie in VS Code im Fenster Extension Development Host ein Flutter-Objekt. Projektentwicklungsprojekts.
  3. Öffnen Sie im selben Fenster ein Code-Editor-Fenster, der gewünschten Komponente und wählen Sie den Kommentartext aus.
  4. Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette.
  5. Geben Sie in der Befehlspalette Flutter Theme ein und wählen Sie Flutter Theme Agent: My New Code Generator (Flutter-Design-Agent: My New Code Generator)

Zusätzliche Ressourcen

Weitere Informationen zum Projekt „Flutter Theme Agent“ finden Sie in der Code-Repository gespeichert. Wenn Sie Hilfe bei der App-Entwicklung benötigen oder Collab-Partner finden Sie in der Discord-Server der Google Developers-Community.

Produktionsanwendungen

Wenn Sie vorhaben, den Flutter Theme Agent für eine große Zielgruppe bereitzustellen, sollten Sie beachten, Die Nutzung der Google Gemini API kann einer Ratenbegrenzung und anderen Nutzungsbeschränkungen. Wenn Sie eine Produktionsanwendung mit dem Gemini-Modell erstellen möchten, auschecken Google Cloud Vertex AI um die Skalierbarkeit und Zuverlässigkeit Ihrer Anwendung zu erhöhen.