Découvrez le livre de recettes avec l'API Gemini et notre forum de la communauté.

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'assistant de codage pour générer des interfaces utilisateur Flutter ou tout composant de code sur lequel vous souhaitez effectuer une itération rapide. Créer des interfaces utilisateur peut être amusant et gratifiant, mais c'est aussi un travail difficile. Il ne s'agit pas seulement d'obtenir le bon code, il s'agit également d'obtenir l'aspect et la convivialité appropriés et de faire en sorte que votre équipe s'accorde sur une orientation de conception.

Ce tutoriel explique comment étendre Flutter Theme Agent, un outil d'aide au code optimisé par l'IA et conçu par l'équipe Google chargée des relations avec les développeurs Flutter. Ce projet Open Source est une extension de Microsoft Visual Studio Code (VS Code) 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 optimiser le fonctionnement de ces fonctions existantes ou créer de nouvelles commandes pour vous aider à mieux gérer votre workflow de développement.

Pour obtenir une présentation vidéo du projet et de la manière de l'étendre, y compris les insights de ses créateurs, regardez le Générateur de code Flutter basé sur l'IA – Compiler avec l'IA de Google. Sinon, vous pouvez commencer à prolonger 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 la fenêtre de l'hôte de développement des extensions de VS Code.

Configuration du projet

Ces instructions vous expliquent comment configurer le projet d'agent de thème Flutter pour le développement et les tests. Les étapes générales sont l'installation d'un logiciel prérequis, la définition de quelques variables d'environnement, le clonage du projet à partir du dépôt de code et l'exécution de l'installation de la configuration.

Installer les prérequis

Le projet d'agent de thème Flutter 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 l'application. Les instructions d'installation suivantes concernent 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 correspondant à 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, puis exécutez 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 du code source git pour récupérer le code source du projet.
Pour télécharger et configurer le code du projet, procédez comme suit:

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 creux 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 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 Flutter Theme Agent en tant qu'extension de développement dans VS Code sur votre appareil. Le test ouvre une fenêtre distincte de VS Code Extension Development Host dans laquelle la nouvelle extension est disponible. Dans cette nouvelle fenêtre, vous allez configurer la clé API que l'extension utilise 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 de l'agent de thème Flutter en sélectionnant File > Open Folder (Fichier > Ouvrir le 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 distincte de VS Code Extension Development Host.
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 d'IA générative et copiez la chaîne de la clé.
Définissez la clé API en tant que 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: Clé API, cliquez sur le lien Edit in settings.json (Modifier dans le fichier settings.json), puis ajoutez votre clé API Gemini:
```
"google.ai.apiKey": "your-api-key-here"
```
Enregistrez les modifications apportées au fichier settings.json, puis fermez les onglets de paramètres.

Pour tester les commandes de l'extension:

Dans la fenêtre Extension Development Host de VS Code, écrivez un commentaire dans le 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 et sélectionnez l'une des commandes portant ce préfixe.

Modifier la 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 de commentaire et de révision utilisent une approche de requête de quelques plans avec des 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 dans la génération d'une réponse. En modifiant les instructions et les exemples de la requête, ou les deux dans les commandes "comment" ou "review", 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 d'invite de la commande.

Pour préparer la modification de 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 de l'agent de thème Flutter en sélectionnant File > Open Folder (Fichier > Ouvrir le 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.
...

Si vous le souhaitez, dans le fichier buttonstyle.ts (constante BUTTONSTYLE_CONTEXT), ajoutez un autre exemple d'instruction de style de bouton et de sortie, ou remplacez 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 projet de l'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 de VS Code, sélectionnez un commentaire 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 et sélectionnez Flutter Theme Theme (Agent de thème Flutter: Create a Flutter ButtonStyle).

Créer une commande

Vous pouvez étendre l'agent de thème Flutter en créant des commandes qui effectuent des tâches entièrement nouvelles avec l'API Gemini. Chaque fichier de commande, tel que buttonstyle.ts et colorscheme.ts, est pour la plupart autonome et inclut du code permettant de collecter du texte à partir de l'éditeur actif, de rédiger une requête, de se connecter à l'API Gemini, d'envoyer une invite 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 d'agent de thème Flutter dans la fenêtre de l'hôte de développement de l'extension de VS Code.

Cet ensemble d'instructions explique comment créer une commande en utilisant le 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:

Dans le répertoire src/, copiez le fichier flutter_theme_agent/src/colorscheme.ts nommé colorscheme2.ts.
Dans VS Code, ouvrez le fichier src/colorscheme2.ts.

Dans le fichier colorscheme2.ts, remplacez le nom de la fonction generateColorScheme par 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 du code COLORSCHEME_CONTEXT en supprimant le texte ColorScheme( de l'exemple de code à la ligne 51 et faites-en 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 remplacez-la 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 à la ligne 87, supprimez le texte ColorScheme( et remplacez-le par une ligne vide.
À la ligne 115, supprimez la parenthèse fermante ")" à la fin de la liste des couleurs et remplacez-la 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 dans le fichier colorscheme2.ts.

Intégrer la nouvelle commande

Une fois que vous avez terminé le code de la nouvelle commande, 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, puis autorisez VS Code à 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 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 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 de 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 fini 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 de VS Code, et non 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 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 distincte.
Dans la fenêtre Extension Development Host 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 ce commentaire.
Ouvrez la palette de commandes en sélectionnant Affichage > Palette de commandes.
Dans la palette de commandes, saisissez Flutter Theme et 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 d'agent de thème Flutter, 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 collaboratifs, 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 utilisation de l'API Google Gemini 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, découvrez les services Google Cloud Vertex AI pour améliorer l'évolutivité et la fiabilité de votre application.