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 que você queira iterar rapidamente. Criar interfaces do usuário pode ser divertido e gratificante, mas também é trabalhoso. Não se trata apenas de corrigir o código, mas também de melhorar a aparência e a sensação e fazer com que sua equipe concorde em uma direção de design.

Este tutorial mostra 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 do objeto ThemeData, incluindo esquemas de cores, estilos de texto e estilos de botões. Você pode modificar o projeto para que essas funções funcionem melhor para você ou criar novos comandos para oferecer melhor suporte ao fluxo de trabalho de desenvolvimento.

Para conferir uma visão geral em vídeo do projeto e saber como ele pode ser estendido, incluindo insights dos criadores, acesse AI Flutter Code Generator - Build with Google AI. Caso contrário, você pode começar a estender o projeto seguindo as instruções abaixo.

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

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

Configurar o projeto

Estas instruções mostram como configurar o projeto do Flutter Theme Agent 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 de configuração.

Instalar os pré-requisitos

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

Para instalar o software necessário:

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

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 extrair o código-fonte do projeto.
Para fazer o download e configurar o código do projeto:

  1. Clone o repositório do Git usando o comando abaixo.

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

  2. Se quiser, configure seu repositório local do git para usar o checkout esparso, para que você tenha apenas os arquivos do projeto do Docs Agent.

    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 Flutter Theme Agent.

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

Para configurar e testar a configuração:

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

  8. Defina a chave de API como uma 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 Gemini:

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

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

Para testar os comandos da extensão:

  1. Na janela Extension Development Host do VS Code, escreva um comentário de código que descreva 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. Na paleta de comandos, digite Flutter Theme e selecione um dos comandos com esse prefixo.

Modificar comando

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 solicitação de algumas fotos com exemplos de código e comentários para esse código, além de algumas instruções gerais para o modelo de linguagem de IA. Essas informações de contexto do comando orientam o modelo de linguagem do Gemini na geração de uma resposta. Ao mudar as instruções, os exemplos ou ambos nos comandos de comentários ou avaliações, você pode mudar o comportamento de cada um dos comandos existentes.

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

Para se preparar para editar o 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 do Flutter Theme Agent selecionando File > Open Folder e selecionando a pasta flutter_theme_agent/.

  4. Abra flutter_theme_agent/src/buttonstyle.ts.

    Para modificar o comportamento do 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. Se preferir, 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 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?>(
...

  7. Salve as alterações no arquivo buttonstyle.ts.

Para testar o comando modificado:

  1. Na janela do projeto da 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 que descreva 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. Na paleta de comandos, digite Flutter e selecione o comando Flutter Theme Agent: Create a Flutter ButtonStyle.

Criar novo comando

É possível estender o agente de temas do Flutter criando novos comandos que executam tarefas completamente novas com a API Gemini. 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 comando e processar 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 janela do host de desenvolvimento da extensão do VS Code.

Este conjunto de instruções explica como criar um novo comando usando o código de um comando existente, colorscheme.ts, como modelo. Essa atualização muda o comando para não incluir a sintaxe de inclusão do objeto ColorScheme. Assim, você não precisa remover essa sintaxe após a geração e pode 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 comando 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 tornando-o uma linha vazia.

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

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

  5. Remova o caractere de parênteses de fechamento ")" 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 para o segundo exemplo. Na string COLORSCHEME_CONTEXT na linha 87, remova o texto ColorScheme( e faça com que ela seja uma linha vazia.

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

  8. Na string COLORSCHEME_CONTEXT, adicione uma instrução para não incluir a sintaxe de delimitaçã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 alterações no arquivo colorscheme2.ts.

Integrar o novo comando

Depois de concluir o código do novo comando, você precisa integrá-lo ao resto da extensão. Atualize os arquivos extension.ts e package.json para tornar o novo comando parte 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 de importaçã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 alterações no arquivo extension.ts.

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

  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 alterações no arquivo package.json.

Testar o novo comando

Depois de concluir a codificação do comando e integrá-lo à extensão, você poderá testá-lo. O 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 da extensão do VS Code, reinicie o depurador selecionando Run > Restart Debugging, que reinicia uma janela Extension Development Host separada.
  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 descrevendo o componente da interface do usuário que você quer e selecione o texto do comentário.
  4. Abra a paleta de comandos selecionando Visualizar > Paleta de comandos.
  5. Na paleta de comandos, digite Flutter Theme e selecione o comando Flutter Theme Agent: My New Code Generator.

Outros recursos

Para mais informações sobre o projeto do agente de temas do Flutter, consulte o repositório de código. Se você precisar de ajuda para criar o aplicativo ou estiver procurando colaboradores de desenvolvimento, confira o servidor Google Developers Community Discord.

Aplicativos de produção

Se você planeja implantar o Flutter Theme Agent para um grande público, saiba que o uso da API Google Gemini pode estar sujeito a limitação de taxa e outras restrições de uso. Se você está 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 escalabilidade e a confiabilidade do seu app.