O Embasamento com a Pesquisa Google já está disponível. Saiba mais

Esta página foi traduzida pela API Cloud Translation.

Criar um gerador de código de IA do Flutter com o Gemini

Criar uma ferramenta de assistente de programação para gerar interfaces do usuário do Flutter ou qualquer componente de código que você quer iterar rapidamente. Criar interfaces do usuário pode ser divertido e gratificante, mas também é um trabalho árduo. Não é apenas uma questão de conseguir criar o código certo, criar a aparência e fazer com que a equipe para definir uma direção de design.

Neste tutorial, mostramos como estender Agente de tema do Flutter (link em inglês), uma ferramenta de assistência de código com tecnologia de IA criada pela equipe de relações com desenvolvedores do Flutter no Google. Este projeto de código aberto é uma extensão do Microsoft Visual Studio de código (VS Code) que gera componentes de um tema do Flutter ou objeto ThemeData, incluindo esquemas de cores, estilos de texto e de botão. É possível modificar o projeto para tornar as funções existentes funcionam melhor para você ou crie novos comandos para oferecer um suporte seu fluxo de trabalho de desenvolvimento.

Para um vídeo de visão geral do projeto e como estendê-lo, incluindo insights dos criadores, confira Gerador de código do Flutter com IA: crie com a IA do Google. Caso contrário, comece a ampliar o projeto seguindo as instruções. a seguir.

Captura de tela do agente de tema do Flutter em execução no VS Code

Figura 1. Agente de tema do Flutter em execução no host de desenvolvimento da extensão do VS Code janela.

Configurar o projeto

Estas instruções ajudam você a configurar o projeto do agente de tema do Flutter para desenvolvimento e teste. As etapas gerais são instalar alguns pré-requisito, definindo algumas variáveis de ambiente, clonando o projeto do repositório de código e executar a instalação da configuração.

Instalar os pré-requisitos

O projeto Flutter Theme Agent é executado como uma extensão do Microsoft Visual Studio Code (VS Code) e usos. Node.js e npm para gerenciar pacotes e executar a para o aplicativo. As instruções de instalação a seguir são para um host do Linux máquina virtual.

Para instalar o software necessário:

Instale o Visual Studio Code. para sua plataforma.
Instale node e npm seguindo as instruções de instruções da sua plataforma.
Se você ainda não instalou o Flutter para VS Code, siga as instruções de instalação.

Clonar e configurar o projeto

Baixe o código do projeto e use o comando de instalação npm para fazer o download as dependências necessárias e configurar o projeto. Você precisa o software de controle de origem git para recuperar o projeto; o código-fonte.
Para fazer o download e configurar o código do projeto:

Clone o repositório git usando o comando a seguir.

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

Outra opção é configurar o repositório git local para usar a finalização esparsa. então você só tem os arquivos do projeto do agente do Documentos.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```
Navegue até o diretório raiz do projeto do agente de tema do Flutter.
```
cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/
```
Execute o comando de instalação para fazer o download das dependências e configurar o projeto:
```
npm install
```

Configurar e testar a extensão

Agora você pode testar sua instalação executando o Flutter Theme Agent como uma extensão de desenvolvimento no VS Code no seu dispositivo. O teste abre uma Janela Extension Development Host do VS Code em que a nova extensão está disponíveis. Nessa nova janela, configure a chave de API que a extensão usa para acessar a API Google Gemini.

Para definir e testar sua configuração:

Inicie o aplicativo VS Code.
No VS Code, crie uma nova janela selecionando File > Nova janela.
Abra o projeto do Flutter Theme Agent selecionando File > Abrir pasta, e selecionando a pasta flutter_theme_agent/.
No VS Code, abra o arquivo flutter_theme_agent/package.json.
Execute a extensão no modo de depuração selecionando Run > Iniciar depuração. Esta etapa abre uma janela separada, o Host de desenvolvimento da extensão do VS Code.
Abra as configurações do VS Code selecionando Code > Configurações > Configurações.
Receba um Chave da API Google Gemini do site para desenvolvedores de IA generativa e copie a string da chave.
Definir a chave de API como uma configuração. Nas Configurações de pesquisa digite flutter theme, selecione a guia Usuário e no menu Google > Gemini: chave de API, clique no link Editar em settings.json e adicione sua chave da API Gemini:
```
"google.ai.apiKey": "your-api-key-here"
```
Salve as mudanças no arquivo settings.json e feche as guias de configurações.

Para testar os comandos de extensão:

Na janela Host de desenvolvimento de extensão do VS Code, escreva um código. descrevendo o componente da interface do usuário que você quer gerar.
Selecione o texto do comentário com as características do componente.
Abra a paleta de comandos selecionando Exibir > Paleta de comandos.
Na Paleta de comandos, digite Flutter Theme e selecione um dos com esse prefixo.

Modificar o comando atual

Modificar os comandos fornecidos no Flutter Theme Agent é a maneira mais simples de alterar o comportamento e os recursos da extensão.

Os comandos de comentário e revisão usam uma abordagem de alguns comandos com comandos de shot com exemplos de código e comentários, bem como alguns comentários e instruções para o modelo de linguagem de IA. Este comando guia as informações de contexto o modelo de linguagem do Gemini ao gerar uma resposta. Ao alterar o comando instruções, exemplos ou ambos nos comandos de comentário ou revisão, pode mudar o comportamento de cada um dos comandos.

Este conjunto de instruções explica como modificar o comando buttonstyle.ts alterando o texto do prompt do comando.

Para se preparar para editar o comando buttonstyle.ts:\

Inicie o aplicativo VS Code.
No VS Code, crie uma nova janela selecionando File > Nova janela.
Abra o projeto do Flutter Theme Agent selecionando File > Abrir pasta, e selecionando a pasta flutter_theme_agent/.
Abra flutter_theme_agent/src/buttonstyle.ts.

Para modificar o comportamento do comando buttonstyle.ts:\

No arquivo buttonstyle.ts, edite a constante BUTTONSTYLE_CONTEXT. para incluir instruções diferentes.

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

Opcionalmente, no arquivo buttonstyle.ts, BUTTONSTYLE_CONTEXT constante, adicione outro exemplo de instrução e saída de estilo de botão ou substitua um dos exemplos atuais.

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

Salve as mudanças no arquivo buttonstyle.ts.

Para testar o comando modificado:

Na janela do projeto da extensão do VS Code, reinicie o depurador. selecionando Executar > Reiniciar depuração.
Na janela Extension Development Host do VS Code, selecione um código. na janela do editor descrevendo o estilo de botão desejado, por exemplo:
```
// blue, lickable buttons that light up when you hover over them`
```
Abra a paleta de comandos selecionando Exibir > Paleta de comandos.
Na paleta de comandos, digite Flutter e selecione o Tema do Flutter Agente: crie um comando do FlutterButtonStyle.

Criar novo comando

É possível ampliar o agente de tema do Flutter criando novos comandos que executam tarefas completamente novas com a API Gemini. Cada arquivo de comando, como buttonstyle.ts e colorscheme.ts, na maioria das vezes são independentes e incluem para coletar textos do editor ativo, escrever um comando, conectar à API Gemini, enviando um comando e entregando a resposta.

Captura de tela do Flutter Theme Agent com o novo comando visível

Figura 2. Novo comando do agente de tema do Flutter na extensão do VS Code Janela "Host de desenvolvimento".

Este conjunto de instruções explica como criar um novo comando usando o código do um comando atual, colorscheme.ts, como um modelo. Essa atualização muda para não incluir a sintaxe de inclusão do objeto ColorScheme, de modo que não é preciso remover essa sintaxe após a geração e visualizar a saída mais rápido.

Para criar um comando que gera apenas uma lista de cores para uma ColorScheme objeto:

Faça uma cópia do arquivo flutter_theme_agent/src/colorscheme.ts chamado colorscheme2.ts no diretório src/.
No VS Code, abra o arquivo src/colorscheme2.ts.

No arquivo colorscheme2.ts, renomeie a função generateColorScheme como generateColorScheme2:

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

Mude as instruções do comando no arquivo colorscheme2.ts. Edite o instruções de geração de código do COLORSCHEME_CONTEXT removendo a ColorScheme( do código de exemplo na linha 51 e transformá-lo em uma linha vazia.
```
...
Here's the example of good Dart code:

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

Remova o caractere de fechamento ")" a partir do fim do lista de cores e torná-la uma linha vazia.

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

This example code is a good ...

Repita essas mudanças para o segundo exemplo. Na string COLORSCHEME_CONTEXT na linha 87, remova o texto ColorScheme( e torná-la uma linha vazia.
Na linha 115, remova o caractere de fechamento de parênteses ")" do fim da lista de cores e transformá-la em uma linha vazia.

Na string COLORSCHEME_CONTEXT, adicione uma instrução para não incluir a sintaxe de inclusão:

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

Salve as mudanças no arquivo colorscheme2.ts.

Integrar o novo comando

Depois de concluir o código do novo comando, você precisa integrá-lo ao o restante da extensão. Atualize os arquivos extension.ts e package.json para torne o novo comando parte da extensão e ative o VS Code para invocar o novo comando.

Para integrar o novo comando com o código de extensão:

No VS Code, abra o arquivo flutter_theme_agent/src/extension.ts.
Importe o novo código de comando para a extensão adicionando uma nova importação. .
```
import { generateColorScheme2 } from './components/colorscheme2';
```

Registre o novo comando adicionando o seguinte código ao função activate().

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

Salve as mudanças no arquivo extension.ts.

Para integrar o comando de nome ao pacote de extensão:

No VS Code, abra o arquivo flutter_theme_agent/package.json.

Adicione o novo comando à seção commands do arquivo de pacote.

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

Salve as mudanças no arquivo package.json.

Testar o novo comando

Depois de concluir a codificação do comando e integrá-lo com o você poderá testá-la. Seu novo comando só está disponível no Janela Extension Development Host, e não na janela do VS Code em que você editou o código da extensão.

Para testar o comando modificado:

Na janela do projeto da extensão do VS Code, reinicie o depurador. selecionando Executar > Reiniciar depuração, que reinicia uma Janela Extension Development Host.
Na janela Extension Development Host do VS Code, abra um Flutter. em um projeto de desenvolvimento de software.
Na mesma janela, abra uma janela do editor de código, digite um comentário o componente da interface do usuário desejado e selecione o texto do comentário.
Abra a paleta de comandos selecionando Exibir > Paleta de comandos.
Na Paleta de comandos, digite Flutter Theme e selecione os Flutter Theme Agent: My New Code Generator (em inglês).

Outros recursos

Para mais informações sobre o projeto do Flutter Theme Agent, consulte a repositório de códigos (link em inglês). Se você precisar de ajuda para criar o aplicativo ou estiver procurando desenvolvedores colaboradores, confira o Servidor do Discord da comunidade do Google Developers.

Aplicativos de produção

Se você planeja implantar o Agente de tema do Flutter para um público grande, observe que seu o uso da API Gemini do Google pode estar sujeito a limitação de taxa e outros restrições de uso. Se você está pensando em criar um aplicativo de produção com o modelo do Gemini, confira Vertex AI do Google Cloud para aumentar a escalonabilidade e a confiabilidade do seu app.