Gemini 2.0 Flash ist jetzt für die Produktion bereit. Weitere Informationen

Diese Seite wurde von der Cloud Translation API übersetzt.

Mit Gemini einen AI-Flutter-Codegenerator erstellen

Erstellen Sie ein Tool zur Programmierunterstützung zum Generieren von Flutter-Benutzeroberflächen oder einer beliebigen Codekomponente, die Sie schnell iterieren möchten. Das Erstellen von Benutzeroberflächen kann Spaß machen und lohnend sein, ist aber auch harte Arbeit. Es geht nicht nur darum, den Code richtig zu gestalten, sondern auch das Erscheinungsbild und die Designrichtung Ihres Teams zu definieren.

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

Eine Videoübersicht über das Projekt und seine Erweiterung, einschließlich Einblicken von den Entwicklern, finden Sie unter KI-Flutter-Codegenerator – mit Google AI entwickeln. Andernfalls können Sie mit der Erweiterung des Projekts beginnen, indem Sie der Anleitung unten folgen.

Screenshot des Flutter Theme Agents, der in VS Code ausgeführt wird

Abbildung 1. Flutter Theme Agent, der im Hostfenster der VS Code-Erweiterungsentwicklung ausgeführt wird

Projekt einrichten

In dieser Anleitung wird beschrieben, wie Sie das Flutter Theme Agent-Projekt für die Entwicklung und den Test einrichten. Die allgemeinen Schritte sind die Installation einiger erforderlicher Software, das Festlegen einiger Umgebungsvariablen, das Klonen des Projekts aus dem Code-Repository und das Ausführen der Konfigurationsinstallation.

Erforderliche Komponenten installieren

Das Flutter Theme Agent-Projekt wird als Erweiterung von Microsoft Visual Studio Code (VS Code) ausgeführt und verwendet Node.js und npm, um Pakete zu verwalten und die Anwendung auszuführen. Die folgende Installationsanleitung gilt für einen Linux-Hostcomputer.

So installieren Sie die erforderliche Software:

Installieren Sie Visual Studio Code für Ihre Plattform.
Installiere node und npm. Folge dazu der Installationsanleitung für deine Plattform.
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 Quellcodeverwaltungssoftware git, um den Quellcode des Projekts abzurufen.
So laden Sie den Projektcode herunter und konfigurieren ihn:

Klonen Sie das Git-Repository mit dem folgenden Befehl:

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

Optional können Sie Ihr lokales Git-Repository so konfigurieren, dass eine spärliche Überprüfung verwendet wird, sodass nur die Dateien für das Docs-Agent-Projekt vorhanden sind.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```
Rufen Sie das Stammverzeichnis des Flutter Theme Agent-Projekts auf.
```
cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/
```
Führen Sie den Befehl „install“ aus, um Abhängigkeiten herunterzuladen und das Projekt zu konfigurieren:
```
npm install
```

Erweiterung konfigurieren und testen

Sie sollten jetzt in der Lage sein, Ihre Installation zu testen, indem Sie den Flutter Theme Agent als Entwicklungserweiterung in VS Code auf Ihrem Gerät ausführen. Dadurch wird ein separates Fenster des VS Code-Erweiterungsentwicklungshosts geöffnet, in dem die neue Erweiterung verfügbar ist. In diesem neuen Fenster konfigurieren Sie den API-Schlüssel, mit dem die Erweiterung auf die Google Gemini API zugreift.

So konfigurieren und testen Sie die Einrichtung:

Starten Sie die VS Code-Anwendung.
Erstellen Sie in VS Code ein neues Fenster. Wählen Sie dazu Datei > Neues Fenster aus.
Öffnen Sie das Flutter Theme Agent-Projekt, indem Sie Datei > Ordner öffnen auswählen und den Ordner flutter_theme_agent/ auswählen.
Öffnen Sie die Datei flutter_theme_agent/package.json in VS Code.
Wählen Sie Ausführen > Fehlerbehebung starten aus, um die Erweiterung im Debug-Modus auszuführen. Dadurch wird ein separates VS Code-Fenster Extension Development Host (Erweiterungsentwicklungshost) geöffnet.
Öffnen Sie die VS Code-Einstellungen, indem Sie Code > Einstellungen > Einstellungen auswählen.
Rufen Sie auf der Website für Entwickler von generativer KI einen Google Gemini API-Schlüssel ab und kopieren Sie den Schlüsselstring.
Legen Sie den API-Schlüssel als Konfigurationseinstellung fest. Geben Sie im Feld Sucheinstellungen flutter theme ein, wählen Sie den Tab Nutzer aus und klicken Sie unter Google > Gemini: Api Key auf den Link In settings.json bearbeiten. Fügen Sie dann Ihren Gemini API-Schlüssel hinzu:
```
"google.ai.apiKey": "your-api-key-here"
```
Speichern Sie die Änderungen in der Datei settings.json und schließen Sie die Tabs „Einstellungen“.

So testen Sie die Erweiterungsbefehle:

Geben Sie im VS Code-Fenster Extension Development Host einen Codekommentar ein, in dem Sie die Benutzeroberflächenkomponente beschreiben, die Sie generieren möchten.
Wählen Sie den Kommentartext mit den Komponentenmerkmalen aus.
Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette auswählen.
Geben Sie in der Befehlspalette Flutter Theme ein und wählen Sie einen der Befehle mit diesem Präfix aus.

Vorhandenen Befehl ändern

Die einfachste Möglichkeit, das Verhalten und die Funktionen der Erweiterung zu ändern, besteht darin, die im Flutter Theme Agent bereitgestellten Befehle zu ändern.

Sowohl die Kommentar- als auch die Überprüfungsbefehle verwenden einen Ansatz mit wenigen Prompts mit Codebeispielen und Kommentaren zu diesem Code sowie einige allgemeine Anweisungen für das KI-Sprachmodell. Diese Informationen zum Prompt-Kontext helfen dem Gemini-Sprachmodell, eine Antwort zu generieren. Sie können die Anweisungen, Beispiele oder beides für die Befehle „Kommentar“ oder „Überprüfung“ ändern, um das Verhalten der einzelnen Befehle zu ändern.

In dieser Anleitung wird beschrieben, wie Sie den Befehl buttonstyle.ts ändern, indem Sie den Prompttext des Befehls ändern.

So bereiten Sie die Bearbeitung des Befehls buttonstyle.ts vor:

Starten Sie die VS Code-Anwendung.
Erstellen Sie in VS Code ein neues Fenster. Wählen Sie dazu Datei > Neues Fenster aus.
Öffnen Sie das Flutter Theme Agent-Projekt, indem Sie Datei > Ordner öffnen auswählen und den Ordner flutter_theme_agent/ auswählen.
Öffnen Sie die Datei flutter_theme_agent/src/buttonstyle.ts.

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

Bearbeiten Sie in der Datei buttonstyle.ts die Konstante BUTTONSTYLE_CONTEXT, um andere Anweisungen anzugeben.

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.
...

Optional können Sie in der Datei buttonstyle.ts, Konstante BUTTONSTYLE_CONTEXT, ein weiteres Beispiel für eine Schaltflächenstilanweisung und ‑ausgabe 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?>(
...

Speichern Sie die Änderungen in der Datei buttonstyle.ts.

So testen Sie den geänderten Befehl:

Starten Sie im Fenster des VS Code-Erweiterungsprojekts den Debugger neu, indem Sie Ausführen > Debugging neu starten auswählen.
Wählen Sie im VS Code-Fenster Extension Development Host (Erweiterungsentwicklungshost) einen Codekommentar im Editorfenster aus, der den gewünschten Schaltflächenstil beschreibt, z. B.:
```
// blue, lickable buttons that light up when you hover over them`
```
Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette auswählen.
Geben Sie in der Befehlspalette Flutter ein und wählen Sie den Befehl Flutter Theme Agent: Create a Flutter ButtonStyle (Flutter-Design-Agent: Flutter-Schaltflächenstil erstellen) aus.

Neuen Befehl erstellen

Sie können den Flutter-Design-Agenten erweitern, indem Sie neue Befehle erstellen, die völlig neue Aufgaben mit der Gemini API ausführen. Jede Befehlsdatei wie buttonstyle.ts und colorscheme.ts ist weitgehend 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 eines Prompts und zum Übergeben der Antwort.

Screenshot des Flutter-Design-Agenten mit neuem Befehl

Abbildung 2: Neuer Befehl „Flutter Theme Agent“ im Fenster „Development Host“ der VS Code-Erweiterung

In dieser Anleitung wird beschrieben, wie Sie einen neuen Befehl erstellen, indem Sie den Code eines vorhandenen Befehls (colorscheme.ts) als Vorlage verwenden. Durch dieses Update wird der Befehl so geändert, dass er die umschließende Syntax des ColorScheme-Objekts nicht enthält. Sie müssen diese Syntax also nicht mehr nach der Generierung entfernen und können die Ausgabe schneller visualisieren.

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

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

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

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

Ändern Sie die Promptanleitung in der Datei colorscheme2.ts. Bearbeiten Sie die COLORSCHEME_CONTEXT-Anweisungen zur Codegenerierung, indem Sie den Text ColorScheme( aus dem Beispielcode in Zeile 51 entfernen und eine leere Zeile daraus machen.
```
...
Here's the example of good Dart code:

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

Entfernen Sie das schließende Klammernzeichen „)“ am Ende der Farbliste und ersetzen Sie es durch eine leere Zeile.

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

This example code is a good ...

Wiederholen Sie diese Änderungen für das zweite Beispiel. Entfernen Sie in Zeile 87 im String COLORSCHEME_CONTEXT den Text ColorScheme( und machen Sie daraus eine leere Zeile.
Entfernen Sie in Zeile 115 das schließende Klammernzeichen „)“ am Ende der Farbliste und machen Sie daraus eine leere Zeile.

Fügen Sie in den String COLORSCHEME_CONTEXT eine Anweisung hinzu, die angibt, dass die umschließende Syntax nicht eingeschlossen werden 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:
...

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 einbinden. Aktualisieren Sie die Dateien extension.ts und package.json, damit der neue Befehl Teil der Erweiterung ist, und aktivieren Sie VS Code, damit es den neuen Befehl aufrufen kann.

So integrieren Sie den neuen Befehl in den Erweiterungscode:

Öffnen Sie die Datei flutter_theme_agent/src/extension.ts in VS Code.
Importieren Sie den neuen Befehlscode in die Erweiterung, indem Sie eine neue Importanweisung hinzufügen.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

Registrieren Sie den neuen Befehl, indem Sie der Funktion activate() den folgenden Code hinzufügen.

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

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

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

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

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."
    }
  ],

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

Neuen Befehl testen

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

So testen Sie den geänderten Befehl:

Starten Sie im VS Code-Fenster für das Erweiterungsprojekt den Debugger neu, indem Sie Ausführen > Debugging neu starten auswählen. Dadurch wird ein separates Fenster für den Erweiterungsentwicklungshost neu gestartet.
Öffnen Sie im VS Code-Fenster Extension Development Host ein Flutter-Entwicklungsprojekt.
Öffnen Sie im selben Fenster einen Code-Editor, geben Sie einen Kommentar zur gewünschten Benutzeroberflächenkomponente ein und wählen Sie diesen Kommentartext aus.
Öffnen Sie die Befehlspalette, indem Sie Ansicht > Befehlspalette auswählen.
Geben Sie in der Befehlspalette Flutter Theme ein und wählen Sie den Befehl Flutter-Design-Agent: My New Code Generator aus.

Zusätzliche Ressourcen

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

Produktionsanwendungen

Wenn Sie Flutter Theme Agent für eine große Zielgruppe bereitstellen möchten, beachten Sie, dass die Nutzung der Google Gemini API möglicherweise einer Ratenbegrenzung und anderen Nutzungsbeschränkungen unterliegt. Wenn Sie eine Produktionsanwendung mit dem Gemini-Modell erstellen möchten, sehen Sie sich die Google Cloud Vertex AI-Dienste an, um die Skalierbarkeit und Zuverlässigkeit Ihrer App zu erhöhen.