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

Crie uma ferramenta de assistente de programação para gerar interfaces do usuário do Flutter ou qualquer componente de código em que você queira 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 acertar o código, mas também acertar a aparência e fazer com que sua equipe chegue a uma direção de design.

Neste tutorial, mostramos como estender o Flutter Theme Agent, uma ferramenta de assistência de código com tecnologia de IA criada pela equipe de relações com desenvolvedores do Flutter no Google. Esse projeto de código aberto é uma extensão do Visual Studio Code (VS Code) da Microsoft que gera componentes específicos de um tema do Flutter ou objeto ThemeData, incluindo esquemas de cores, estilos de texto e estilos de botão. É possível modificar o projeto para que essas funções existentes funcionem melhor para você ou criar novos comandos para um melhor suporte ao fluxo de trabalho de desenvolvimento.

Para ter uma visão geral em vídeo do projeto e como estendê-lo, incluindo insights das pessoas que o criaram, confira AI Flutter Code Generator: Build with Google AI. Caso contrário, comece a estender o projeto seguindo as instruções abaixo.

Captura de tela do Flutter Theme Agent em execução no VS Code

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

Configuração do projeto

As instruções a seguir orientam você na configuração do projeto do agente de tema do Flutter para desenvolvimento e teste. As etapas gerais são Instalar alguns softwares de pré-requisito, definir algumas variáveis de ambiente, clonar o projeto do repositório de código e executar a instalação da configuração.

Instale os pré-requisitos

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

Para instalar o software necessário:

  1. Instale o Visual Studio Code da sua plataforma.
  2. Instale node e npm seguindo as instruções de instalação da sua plataforma.
  3. Se você ainda não instalou o Flutter para VS Code, siga as instruções de instalação (link em inglês).

Clonar e configurar o projeto

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

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

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

  2. Como opção, configure seu repositório git local para usar a finalização da compra esparsa, para que você tenha apenas os arquivos para o projeto do agente do Documentos.

    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent

  3. Navegue até o diretório raiz do projeto do Theme Agent do Flutter.

    cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

  4. 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 separada Extension Development Host do VS Code em que a nova extensão está disponível. Nessa nova janela, você configura a chave de API que a extensão usa para acessar a API Google Gemini.

Para configurar e testar sua configuração:

  1. Inicie o aplicativo VS Code.
  2. No VS Code, crie uma nova janela selecionando File > New Window.
  3. Abra o projeto Flutter Theme Agent selecionando File > Open Folder e a pasta flutter_theme_agent/.
  4. No VS Code, abra o arquivo flutter_theme_agent/package.json.
  5. Para executar a extensão no modo de depuração, selecione Run > Start Debugging. Esta etapa abre uma janela separada Extension Development Host do VS Code.
  6. Abra as configurações do VS Code selecionando Code > Settings > Settings.
  7. Receba uma chave de API do Google Gemini no site do desenvolvedor de IA generativa e copie a string da chave.

  8. Definir a chave de API como configuração. No campo Search Settings, digite flutter theme, selecione a guia User e, na configuração Google > Gemini: Api Key, clique no link Edit in settings.json e adicione sua chave de API do Gemini:

    "google.ai.apiKey": "your-api-key-here"

  9. Salve as mudanças no arquivo settings.json e feche as guias de configurações.

Para testar os comandos de extensão:

  1. Na janela Extension Development Host do VS Code, escreva um comentário de código descrevendo o componente da interface do usuário que você quer gerar.
  2. Selecione o texto do comentário com as características do componente.
  3. Abra a Paleta de comandos selecionando Visualizar > Paleta de comandos.
  4. No Paleta de comandos, digite Flutter Theme e selecione um dos comandos com esse prefixo.

Modificar comando atual

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

Os comandos de comentário e revisão usam uma abordagem de comando few shot com exemplos de código e comentários para esse código, bem como algumas instruções gerais para o modelo de linguagem de IA. Essas informações de contexto de comando orientam o modelo de linguagem do Gemini na geração de uma resposta. Ao alterar as instruções de comando, os exemplos ou ambos nos comandos de comentário ou revisão, você pode mudar o comportamento de cada um dos comandos atuais.

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

Como preparar a edição do comando buttonstyle.ts:\

  1. Inicie o aplicativo VS Code.
  2. No VS Code, crie uma nova janela selecionando File > New Window.
  3. Abra o projeto Flutter Theme Agent selecionando File > Open Folder e a pasta flutter_theme_agent/.

  4. Abra flutter_theme_agent/src/buttonstyle.ts.

    Para modificar o comportamento de comando buttonstyle.ts:\

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

  6. Como opção, no arquivo buttonstyle.ts, constante BUTTONSTYLE_CONTEXT, adicione outro exemplo de instrução e saída de estilo de botão ou substitua um dos exemplos já existentes.

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

  7. Salve as mudanças no arquivo buttonstyle.ts.

Para testar o comando modificado:

  1. Na janela do projeto de extensão do VS Code, reinicie o depurador selecionando Run > Restart Debugging.

  2. Na janela Extension Development Host do VS Code, selecione um comentário de código na janela do editor descrevendo o estilo do botão que você quer, por exemplo:

    // blue, lickable buttons that light up when you hover over them`

  3. Abra a Paleta de comandos selecionando Visualizar > Paleta de comandos.

  4. No Command Palette, digite Flutter e selecione o comando Flutter Theme Agent: Create a Flutter ButtonStyle.

Criar novo comando

Você pode ampliar o agente de tema do Flutter criando novos comandos que executam tarefas completamente novas com a API Gemini. Na maioria das vezes, cada arquivo de comando, como buttonstyle.ts e colorscheme.ts, é independente e inclui código para coletar texto do editor ativo, compor um comando, conectar-se à API Gemini, enviar um prompt e entregar a resposta.

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

Figura 2. Novo comando do Flutter Theme Agent na janela de host de desenvolvimento da extensão do VS Code.

Neste conjunto de instruções, explicamos como criar um novo comando usando o código de um comando já existente, colorscheme.ts, como modelo. Essa atualização muda o comando para não incluir a sintaxe de inclusão do objeto ColorScheme, para que você não precise remover essa sintaxe após a geração e visualizar a saída mais rapidamente.

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

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

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

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

  4. Mude as instruções de solicitação no arquivo colorscheme2.ts. Edite as instruções de geração de código COLORSCHEME_CONTEXT removendo o texto ColorScheme( do código de exemplo na linha 51 e torne-o uma linha vazia.

    ...
Here's the example of good Dart code:

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

  5. Remova o caractere de fechamento de parênteses ")" do final da lista de cores e torne-o uma linha vazia.

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

This example code is a good ...

  6. Repita essas mudanças no segundo exemplo. Na string COLORSCHEME_CONTEXT na linha 87, remova o texto ColorScheme( e torne-o uma linha vazia.

  7. Na linha 115, remova o caractere de fechamento de parênteses ")" do final da lista de cores e torne-a uma linha vazia.

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

  9. 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 restante da extensão. Atualize os arquivos extension.ts e package.json para tornar a nova parte do comando da extensão e permitir que o VS Code invoque o novo comando.

Para integrar o novo comando ao código da extensão:

  1. No VS Code, abra o arquivo flutter_theme_agent/src/extension.ts.

  2. Importe o novo código de comando para a extensão adicionando uma nova instrução.

    import { generateColorScheme2 } from './components/colorscheme2';

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

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

  4. Salve as mudanças no arquivo extension.ts.

Para integrar o comando "name" ao pacote de extensões:

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

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

  3. Salve as mudanças no arquivo package.json.

Testar o novo comando

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

Para testar o comando modificado:

  1. Na janela do projeto de extensão do VS Code, reinicie o depurador selecionando Run > Restart Debugging. Isso reinicia uma janela separada Extension Development Host.
  2. Na janela Extension Development Host do VS Code, abra um projeto de desenvolvimento do Flutter.
  3. Na mesma janela, abra uma janela do editor de código, digite um comentário que descreva o componente da interface do usuário desejado e selecione o texto do comentário.
  4. Abra a Paleta de comandos selecionando Visualizar > Paleta de comandos.
  5. No Command Palette, digite Flutter Theme e selecione o comando Flutter Theme Agent: My New Code Generator.

Outros recursos

Para saber mais sobre o projeto do Flutter Theme Agent, consulte o repositório de códigos (link em inglês). Se você precisar de ajuda para criar o aplicativo ou estiver procurando colaboradores desenvolvedores, confira o servidor da Comunidade de desenvolvedores do Google no Discord.

Aplicativos de produção

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