L'Ancrage dans la recherche Google est désormais disponible. En savoir plus

Cette page a été traduite par l'API Cloud Translation.

Créer un générateur de code Flutter basé sur l'IA avec Gemini

Créer un assistant de codage permettant de générer des interfaces utilisateur Flutter que vous voulez itérer rapidement. La création d'interfaces utilisateur peut être amusant et gratifiant, mais c’est aussi du travail. Il ne s’agit pas seulement d’obtenir que le code est correct, que son apparence est correcte et que votre équipe à se mettre d’accord sur une orientation de conception.

Ce tutoriel vous explique comment étendre Agent de thème Flutter. un outil d'assistance au codage basé sur l'IA conçu par l'équipe des relations avec les développeurs Flutter chez Google. Ce projet Open Source est une extension de Microsoft Visual Studio de code (VS Code) qui génère des données d'un thème Flutter ou d'un objet ThemeData, y compris des jeux de couleurs, styles de texte et styles de boutons. Vous pouvez modifier le projet fonctions existantes plus adaptées à vos besoins, ou créer de nouvelles commandes pour une meilleure compatibilité votre workflow de développement.

Pour obtenir une présentation vidéo du projet et de la façon de l'étendre, y compris des informations des personnes qui l’ont créé, consultez Générateur de code Flutter par IA – Concevoir avec l'IA de Google Sinon, vous pouvez commencer à étendre le projet en suivant les instructions ci-dessous.

Capture d'écran de l'agent de thème Flutter exécuté dans VS Code

Figure 1. Agent de thème Flutter s'exécutant dans l'hôte de développement d'extension VS Code fenêtre.

Configuration du projet

Ces instructions vous guident dans l'obtention d'un projet d'agent de thème Flutter pour le développement et les tests. La procédure générale consiste à installer des logiciels prérequis, en définissant quelques variables d'environnement, en clonant le projet à partir du dépôt de code et exécuter l'installation de la configuration.

Installer les prérequis

Le projet Flutter Theme Agent s'exécute en tant qu'extension de Microsoft Visual Studio Code (VS Code), et utilise Node.js et npm pour gérer les packages et exécuter le application. Les instructions d'installation suivantes s'appliquent aux hôtes Linux machine.

Pour installer le logiciel requis:

Installez Visual Studio Code. pour votre plate-forme.
Installez node et npm en suivant la procédure d'installation instructions spécifiques à votre plate-forme.
Si vous n'avez pas encore installé Flutter pour VS Code, suivez le instructions d'installation.

Cloner et configurer le projet

Téléchargez le code du projet et utilisez la commande d'installation npm pour le télécharger les dépendances requises et configurer le projet. Vous devez Logiciel de contrôle des sources git pour récupérer le projet le code source.
Pour télécharger et configurer le code du projet:

Clonez le dépôt Git à l'aide de la commande suivante.

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

Vous pouvez éventuellement configurer votre dépôt Git local pour utiliser le paiement creuse. Vous n'avez donc que les fichiers du projet Agent Docs.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```
Accédez au répertoire racine du projet de l'agent de thème Flutter.
```
cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/
```
Exécutez la commande d'installation pour télécharger les dépendances et configurer le projet:
```
npm install
```

Configurer et tester l'extension

Vous devriez maintenant pouvoir tester votre installation en exécutant l'agent de thème Flutter en tant qu'extension de développement dans VS Code sur votre appareil. Le test ouvre une fenêtre Fenêtre Extension Development Host de VS Code dans laquelle la nouvelle extension est disponibles. Dans cette nouvelle fenêtre, vous allez configurer la clé API que l'extension utilise pour accéder à l'API Gemini de Google.

Pour configurer et tester votre configuration:

Démarrez l'application VS Code.
Dans VS Code, créez une fenêtre en sélectionnant File > Nouvelle fenêtre
Ouvrez le projet de l'agent de thème Flutter en sélectionnant File > Ouvrir le dossier, et en sélectionnant le dossier flutter_theme_agent/.
Dans VS Code, ouvrez le fichier flutter_theme_agent/package.json.
Exécutez l'extension en mode débogage en sélectionnant Run > Démarrez le débogage. Cette étape ouvre une fenêtre distincte Extension Development Host de VS Code.
Ouvrez les paramètres de VS Code en sélectionnant Code > Paramètres > Paramètres.
Obtenez un Clé API Google Gemini sur le site pour les développeurs d'IA générative, puis copiez la chaîne de clé.
Définissez la clé API en tant que paramètre de configuration. Dans les paramètres de recherche saisissez flutter theme, sélectionnez l'onglet Utilisateur, puis dans le menu Google > Gemini: Clé API, cliquez sur le lien Modifier dans le fichier settings.json, puis ajoutez votre clé API Gemini:
```
"google.ai.apiKey": "your-api-key-here"
```
Enregistrez les modifications dans le fichier settings.json et fermez les onglets des paramètres.

Pour tester les commandes d'extension:

Dans la fenêtre Extension Development Host de VS Code, écrivez un code Commentaire décrivant le composant d'interface utilisateur à générer.
Sélectionnez le texte du commentaire avec les caractéristiques du composant.
Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes
Dans la palette de commandes, saisissez Flutter Theme et sélectionnez l'une des avec ce préfixe.

Modifier une commande existante

Modifier les commandes fournies dans l'agent de thème Flutter est le moyen le plus simple de modifier le comportement et les fonctionnalités de l'extension.

Les commandes « commentaire » et « critique » utilisent quelques invites de plans avec des exemples de code et des commentaires pour ce code, ainsi que des instructions des instructions pour le modèle de langage d'IA. Ces informations contextuelles de la requête guident le modèle de langage Gemini pour générer une réponse. En modifiant l'invite des instructions, des exemples ou les deux, que ce soit dans les commandes "comment" ou "review", vous peut modifier le comportement de chacune des commandes existantes.

Cet ensemble d'instructions explique comment modifier la commande buttonstyle.ts en exécutant modifier le texte d’invite de la commande.

Pour préparer la modification de la commande buttonstyle.ts:\

Démarrez l'application VS Code.
Dans VS Code, créez une fenêtre en sélectionnant File > Nouvelle fenêtre
Ouvrez le projet de l'agent de thème Flutter en sélectionnant File > Ouvrir le dossier, et en sélectionnant le dossier flutter_theme_agent/.
Ouvrir le fichier flutter_theme_agent/src/buttonstyle.ts.

Pour modifier le comportement de la commande buttonstyle.ts:\

Dans le fichier buttonstyle.ts, modifiez la constante BUTTONSTYLE_CONTEXT. pour inclure des instructions différentes.

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

Éventuellement, dans le fichier buttonstyle.ts, BUTTONSTYLE_CONTEXT constante, ajoutez un autre exemple d'instruction de style de bouton et de sortie, ou remplacer l'un des exemples existants.

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

Enregistrez les modifications dans le fichier buttonstyle.ts.

Pour tester la commande modifiée:

Dans la fenêtre de votre projet d'extension VS Code, redémarrez le débogueur en en sélectionnant Exécuter > Redémarrez le débogage.
Dans la fenêtre Extension Development Host de VS Code, sélectionnez un code un commentaire décrivant le style de bouton souhaité dans la fenêtre de l'éditeur, par Exemple:
```
// blue, lickable buttons that light up when you hover over them`
```
Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes
Dans la palette de commandes, saisissez Flutter et sélectionnez le thème Flutter. Agent: Créez une commande Flutter ButtonStyle.

Créer une commande

Vous pouvez étendre l'agent de thème Flutter en créant des commandes de nouvelles tâches avec l'API Gemini. Chaque fichier de commande, tel que buttonstyle.ts et colorscheme.ts sont principalement autonomes et incluent permettant de collecter du texte à partir de l'éditeur actif, de rédiger une requête, de connecter à l'API Gemini, d'envoyer une requête et de transmettre la réponse.

Capture d'écran de l'agent de thème Flutter avec la nouvelle commande visible

Figure 2. Nouvelle commande de l'agent de thème Flutter dans l'extension VS Code Hôte de développement.

Cet ensemble d'instructions explique comment créer une nouvelle commande à l'aide du code de une commande existante, colorscheme.ts, en tant que modèle. Cette mise à jour modifie pour ne pas inclure la syntaxe englobante de l'objet ColorScheme, afin que vous n'avez pas besoin de supprimer cette syntaxe après la génération et de visualiser le résultat plus rapidement.

Pour créer une commande qui ne génère qu'une liste de couleurs pour un ColorScheme objet:

Créez une copie du fichier flutter_theme_agent/src/colorscheme.ts appelée colorscheme2.ts dans le répertoire src/.
Dans VS Code, ouvrez le fichier src/colorscheme2.ts.

Dans le fichier colorscheme2.ts, renommez la fonction generateColorScheme comme suit : generateColorScheme2:

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

Modifiez les instructions de la requête dans le fichier colorscheme2.ts. Modifiez le les instructions pour générer le code COLORSCHEME_CONTEXT en supprimant le ColorScheme( de l'exemple de code à la ligne 51 et en faire une ligne vide.
```
...
Here's the example of good Dart code:

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

Supprimez la parenthèse fermante ")" à la fin de la liste de couleurs et faites-en une ligne vide.

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

This example code is a good ...

Répétez ces modifications pour le deuxième exemple. Dans COLORSCHEME_CONTEXT à la ligne 87, supprimez le texte ColorScheme( et transformez-la en ligne vide.
À la ligne 115, supprimez la parenthèse fermante ")" à partir de la fin de la liste des couleurs et la transformer en ligne vide.

Dans la chaîne COLORSCHEME_CONTEXT, ajoutez une instruction à ne pas inclure. la syntaxe englobante:

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

Enregistrez les modifications dans le fichier colorscheme2.ts.

Intégrer la nouvelle commande

Après avoir finalisé le code de la nouvelle commande, vous devez l'intégrer à le reste de l'extension. Remplacez les fichiers extension.ts et package.json par intégrer la nouvelle commande de l'extension et permettre à VS Code d'appeler la nouvelle commande.

Pour intégrer la nouvelle commande au code de l'extension:

Dans VS Code, ouvrez le fichier flutter_theme_agent/src/extension.ts.
Importez le nouveau code de commande dans l'extension en ajoutant une nouvelle importation .
```
import { generateColorScheme2 } from './components/colorscheme2';
```

Enregistrez la nouvelle commande en ajoutant le code suivant à la commande fonction activate().

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

Enregistrez les modifications dans le fichier extension.ts.

Pour intégrer la commande name au package d'extension:

Dans VS Code, ouvrez le fichier flutter_theme_agent/package.json.

Ajoutez la nouvelle commande à la section commands du fichier du package.

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

Enregistrez les modifications dans le fichier package.json.

Tester la nouvelle commande

Une fois que vous avez terminé de coder la commande et que vous l'avez intégrée au vous pouvez la tester. Votre nouvelle commande n'est disponible que dans Extension Development Host, et pas dans la fenêtre VS Code dans laquelle vous modifié le code de l'extension.

Pour tester la commande modifiée:

Dans la fenêtre de votre projet d'extension VS Code, redémarrez le débogueur en en sélectionnant Exécuter > Relancez le débogage, qui redémarre Fenêtre Extension Development Host.
Dans la fenêtre Extension Development Host de VS Code, ouvrez un projet de développement.
Dans la même fenêtre, ouvrez une fenêtre de l'éditeur de code, saisissez un commentaire décrivant le composant d'interface utilisateur souhaité, puis sélectionnez le texte du commentaire.
Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes
Dans la palette de commandes, saisissez Flutter Theme et sélectionnez l'icône Commande Agent de thème Flutter: Mon nouveau générateur de code.

Ressources supplémentaires

Pour en savoir plus sur le projet d'agent de thème Flutter, consultez la dépôt de code. Si vous avez besoin d'aide pour créer l'application ou si vous recherchez un développeur collaborateurs, consultez le Serveur Google Developers Community Discord.

Applications de production

Si vous prévoyez de déployer l'agent de thème Flutter pour une large audience, notez que votre l'utilisation de l'API Gemini de Google peut être soumise à une limitation du débit et à d'autres restrictions d'utilisation. Si vous envisagez de créer une application de production avec le modèle Gemini, CANNOT TRANSLATE Google Cloud Vertex AI pour améliorer l'évolutivité et la fiabilité de votre application.