Gemini 2.0 Flash est désormais prêt à être déployé en production. 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éez un outil d'assistance au codage pour générer des interfaces utilisateur Flutter ou tout composant de code sur lequel vous souhaitez effectuer des itérations rapides. La création d'interfaces utilisateur peut être amusante et gratifiante, mais c'est aussi un travail difficile. Il ne s'agit pas seulement d'obtenir un code correct, mais aussi d'obtenir un look and feel correct et de faire en sorte que votre équipe s'accorde sur une direction de conception.

Ce tutoriel vous explique comment étendre l'agent de thème Flutter, un outil d'assistance au code optimisé par l'IA développé par l'équipe Flutter Developer Relations de Google. Ce projet open source est une extension de Visual Studio Code (VS Code) de Microsoft qui génère des composants spécifiques d'un thème Flutter, ou d'un objet ThemeData, y compris des jeux de couleurs, des styles de texte et des styles de boutons. Vous pouvez modifier le projet pour que ces fonctions existantes fonctionnent mieux pour vous ou créer de nouvelles commandes pour mieux prendre en charge votre workflow de développement.

Pour obtenir une présentation vidéo du projet et découvrir comment l'étendre, y compris des insights de ses créateurs, consultez Générateur de code Flutter avec IA : créer 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 en cours d'exécution dans VS Code

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

Configuration du projet

Ces instructions vous expliquent comment configurer le projet Flutter Theme Agent pour le développement et les tests. Les étapes générales consistent à installer des logiciels préalables, à définir quelques variables d'environnement, à cloner 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 Visual Studio Code (VS Code) de Microsoft et utilise Node.js et npm pour gérer les packages et exécuter l'application. Les instructions d'installation suivantes s'appliquent à une machine hôte Linux.

Pour installer le logiciel requis:

Installez Visual Studio Code pour votre plate-forme.
Installez node et npm en suivant les instructions d'installation pour votre plate-forme.
Si vous n'avez pas encore installé Flutter pour VS Code, suivez les instructions d'installation.

Cloner et configurer le projet

Téléchargez le code du projet et utilisez la commande d'installation npm pour télécharger les dépendances requises et configurer le projet. Vous avez besoin du logiciel de contrôle des versions git pour récupérer le code source du projet.
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 également configurer votre dépôt Git local pour qu'il utilise un "checkout" clairsemé afin de n'avoir que les fichiers du projet de l'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 Flutter Theme Agent.

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 Flutter Theme Agent en tant qu'extension de développement dans VS Code sur votre appareil. Le test ouvre une fenêtre Extension Development Host (Hôte de développement d'extension) VS Code distincte dans laquelle la nouvelle extension est disponible. Dans cette nouvelle fenêtre, vous configurez la clé API utilisée par l'extension pour accéder à l'API Google Gemini.

Pour configurer et tester votre configuration:

Lancez l'application VS Code.
Dans VS Code, créez une fenêtre en sélectionnant File > New Window (Fichier > Nouvelle fenêtre).
Ouvrez le projet Flutter Theme Agent en sélectionnant File > Open Folder (Fichier > Ouvrir un dossier), puis 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 > Start Debugging (Exécuter > Démarrer le débogage). Cette étape ouvre une fenêtre Extension Development Host (Hôte de développement d'extension) VS Code distincte.
Ouvrez les paramètres de VS Code en sélectionnant Code > Settings > Settings (Code > Paramètres > Paramètres).
Obtenez une clé API Google Gemini sur le site des développeurs de l'IA générative, puis copiez la chaîne de clé.
Définissez la clé API comme paramètre de configuration. Dans le champ Search Settings (Paramètres de recherche), saisissez flutter theme, sélectionnez l'onglet User (Utilisateur), puis dans le paramètre Google > Gemini: Api Key (Google > Gemini : clé API), cliquez sur le lien Edit in settings.json (Modifier dans settings.json), puis ajoutez votre clé API Gemini :
```
"google.ai.apiKey": "your-api-key-here"
```
Enregistrez les modifications apportées au fichier settings.json et fermez les onglets des paramètres.

Pour tester les commandes de l'extension:

Dans la fenêtre Extension Development Host (Hôte de développement de l'extension) de VS Code, ajoutez un commentaire de code décrivant le composant d'interface utilisateur que vous souhaitez 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, puis sélectionnez l'une des commandes associées à ce préfixe.

Modifier une commande existante

Modifier les commandes fournies dans Flutter Theme Agent est le moyen le plus simple de modifier le comportement et les fonctionnalités de l'extension.

Les commandes de commentaire et d'examen utilisent une approche d'invite avec quelques exemples de code et de commentaires pour ce code, ainsi que des instructions générales pour le modèle de langage d'IA. Ces informations contextuelles de requête guident le modèle de langage Gemini lors de la génération d'une réponse. En modifiant les instructions ou les exemples de requête dans les commandes de commentaire ou d'avis, vous pouvez modifier le comportement de chacune des commandes existantes.

Cet ensemble d'instructions explique comment modifier la commande buttonstyle.ts en modifiant le texte de l'invite de la commande.

Pour vous préparer à modifier la commande buttonstyle.ts :

Lancez l'application VS Code.
Dans VS Code, créez une fenêtre en sélectionnant File > New Window (Fichier > Nouvelle fenêtre).
Ouvrez le projet Flutter Theme Agent en sélectionnant File > Open Folder (Fichier > Ouvrir un dossier), puis 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 différentes instructions.

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

Dans le fichier buttonstyle.ts, constante BUTTONSTYLE_CONTEXT, vous pouvez ajouter un autre exemple d'instruction et de sortie de style bouton, 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 apportées au 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 sélectionnant Run > Restart Debugging (Exécuter > Redémarrer le débogage).
Dans la fenêtre Extension Development Host (Hôte de développement de l'extension) de VS Code, sélectionnez un commentaire de code dans la fenêtre de l'éditeur décrivant le style de bouton souhaité, 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, puis sélectionnez la commande Flutter Theme Agent : Create a Flutter ButtonStyle (Agent de thème Flutter : créer un ButtonStyle Flutter).

Créer une commande

Vous pouvez étendre l'agent de thème Flutter en créant des commandes qui effectuent des tâches complètement nouvelles avec l'API Gemini. Chaque fichier de commande, tel que buttonstyle.ts et colorscheme.ts, est principalement autonome et inclut du code permettant de collecter du texte à partir de l'éditeur actif, de composer une requête, de se connecter à l'API Gemini, d'envoyer une requête et de gérer la réponse.

Capture d'écran de Flutter Theme Agent avec la nouvelle commande visible

Figure 2. Nouvelle commande Flutter Theme Agent dans la fenêtre de l'hôte de développement de l'extension VS Code.

Cet ensemble d'instructions explique comment créer une commande à l'aide du code d'une commande existante, colorscheme.ts, comme modèle. Cette mise à jour modifie la commande pour qu'elle n'inclue pas la syntaxe englobante de l'objet ColorScheme. Vous n'avez donc pas besoin de supprimer cette syntaxe après la génération et de visualiser la sortie plus rapidement.

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

Créez une copie du fichier flutter_theme_agent/src/colorscheme.ts appelé 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 en generateColorScheme2:

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

Modifiez les instructions d'invite dans le fichier colorscheme2.ts. Modifiez les instructions de génération de code COLORSCHEME_CONTEXT en supprimant le texte ColorScheme( de l'exemple de code à la ligne 51 et en le remplaçant par une ligne vide.
```
...
Here's the example of good Dart code:

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

Supprimez le caractère de parenthèses fermantes ")" à la fin de la liste des couleurs et remplacez-le par 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 la chaîne COLORSCHEME_CONTEXT de la ligne 87, supprimez le texte ColorScheme( et remplacez-le par une ligne vide.
Sur la ligne 115, supprimez le caractère de parenthèses fermantes ")" à la fin de la liste des couleurs et remplacez-le par une ligne vide.

Dans la chaîne COLORSCHEME_CONTEXT, ajoutez une instruction pour 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 apportées au fichier colorscheme2.ts.

Intégrer la nouvelle commande

Une fois le code de la nouvelle commande terminé, vous devez l'intégrer au reste de l'extension. Mettez à jour les fichiers extension.ts et package.json pour intégrer la nouvelle commande à l'extension et permettre à VS Code d'invoquer 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 instruction d'importation.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

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

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

Enregistrez les modifications apportées au 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 de package.

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

Enregistrez les modifications apportées au fichier package.json.

Tester la nouvelle commande

Une fois que vous avez terminé de coder la commande et de l'intégrer à l'extension, vous pouvez la tester. Votre nouvelle commande n'est disponible que dans la fenêtre Extension Development Host (Hôte de développement de l'extension) de VS Code, et pas dans la fenêtre VS Code dans laquelle vous avez 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 sélectionnant Run > Restart Debugging (Exécuter > Redémarrer le débogage), ce qui redémarre une fenêtre Extension Development Host (Hôte de développement d'extension) distincte.
Dans la fenêtre Extension Development Host (Hôte de développement d'extension) de VS Code, ouvrez un projet de développement Flutter.
Dans la même fenêtre, ouvrez une fenêtre d'éditeur de code, saisissez un commentaire décrivant le composant d'interface utilisateur souhaité, puis sélectionnez le texte de ce commentaire.
Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes.
Dans la palette de commandes, saisissez Flutter Theme, puis sélectionnez la commande Flutter Theme Agent: My New Code Generator (Agent de thème Flutter : mon nouveau générateur de code).

Ressources supplémentaires

Pour en savoir plus sur le projet Flutter Theme Agent, consultez le dépôt de code. Si vous avez besoin d'aide pour créer l'application ou si vous recherchez des développeurs pour collaborer, consultez le serveur Discord de la communauté des développeurs Google.

Applications de production

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