Compila un generador de código de Flutter basado en IA con Gemini

Compila una herramienta de asistente de programación para generar interfaces de usuario de Flutter o cualquier componente de código que desees iterar rápidamente. Crear interfaces de usuario puede ser divertido y gratificante, pero también es un trabajo arduo. No se trata solo de usar el código correcto, sino también de usar el diseño y lograr que tu equipo se ponga de acuerdo sobre una dirección de diseño.

En este instructivo, se muestra cómo extender el Flutter Theme Agent, una herramienta de asistencia para código potenciada por IA creada por el equipo de Relaciones con Desarrolladores de Flutter en Google. Este proyecto de código abierto es una extensión de Microsoft Visual Studio Code (VS Code) que genera componentes específicos de un tema de Flutter o de un objeto ThemeData, incluidos los esquemas de colores, los estilos de texto y los estilos de botones. Puedes modificar el proyecto para que estas funciones existentes te resulten más útiles o compilar comandos nuevos que respalden mejor tu flujo de trabajo de desarrollo.

Para ver una descripción general en video del proyecto y cómo extenderlo, incluidas las estadísticas de quienes lo crearon, consulta AI Flutter Code Generator - Build with Google AI. De lo contrario, puedes comenzar a extender el proyecto siguiendo las instrucciones que se indican a continuación.

Captura de pantalla del agente de temas de Flutter que se ejecuta en VS Code

Figura 1. El agente de temas de Flutter que se ejecuta en la ventana del Host de desarrollo de VS Code Extension.

Configuración del proyecto

En estas instrucciones, se explica cómo configurar el proyecto del agente de temas de Flutter para el desarrollo y las pruebas. Los pasos generales son instalar un software de requisitos previos, configurar algunas variables de entorno, clonar el proyecto desde el repositorio de código y ejecutar la instalación de la configuración.

Instala los requisitos previos

El proyecto del agente de temas de Flutter se ejecuta como una extensión de Microsoft Visual Studio Code (VS Code) y usa Node.js y npm para administrar los paquetes y ejecutar la aplicación. Las siguientes instrucciones de instalación son para una máquina anfitrión de Linux.

Para instalar el software requerido, sigue estos pasos:

  1. Instala Visual Studio Code en tu plataforma.
  2. Instala node y npm según las instrucciones de instalación para tu plataforma.
  3. Si aún no instalaste Flutter para VS Code, sigue las instrucciones de instalación.

Clona y configura el proyecto

Descarga el código del proyecto y usa el comando de instalación npm para descargar las dependencias necesarias y configurar el proyecto. Necesitas el software de control de fuente git para recuperar el código fuente del proyecto.
Para descargar y configurar el código del proyecto, haz lo siguiente:

  1. Usa el siguiente comando para clonar el repositorio de Git.

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

  2. De manera opcional, configura tu repositorio de Git local para usar la confirmación de la compra dispersa, de modo que solo tengas los archivos para el proyecto del Agente de Documentos.

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

  3. Navega al directorio raíz del proyecto del agente de temas de Flutter.

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

  4. Ejecuta el comando de instalación para descargar las dependencias y configurar el proyecto:

    npm install

Configura y prueba la extensión

Ahora deberías poder probar tu instalación ejecutando el agente de temas de Flutter como una extensión de desarrollo en VS Code en tu dispositivo. La prueba abrirá una ventana independiente de Extension Development Host de VS Code en la que está disponible la extensión nueva. En esta ventana nueva, configurarás la clave de API que usa la extensión para acceder a la API de Google Gemini.

Para configurar y probar tu configuración, haz lo siguiente:

  1. Inicia la aplicación de VS Code.
  2. En VS Code, selecciona File > New Window para crear una ventana nueva.
  3. Abre el proyecto del agente de temas de Flutter. Para ello, selecciona File > Open Folder y elige la carpeta flutter_theme_agent/.
  4. En VS Code, abre el archivo flutter_theme_agent/package.json.
  5. Para ejecutar la extensión en modo de depuración, selecciona Run > Start Debugging. En este paso, se abrirá una ventana independiente de Extension Development Host de VS Code.
  6. Abre la configuración de VS Code. Para ello, selecciona Code > Settings > Settings.
  7. Obtén una clave de API de Google Gemini del sitio para desarrolladores de IA generativa y copia la cadena de clave.

  8. Establece la clave de API como un parámetro de configuración. En el campo Configuración de búsqueda, escribe flutter theme, selecciona la pestaña Usuario y, en el parámetro de configuración Google > Gemini: Clave de API, haz clic en el vínculo Editar en settings.json y agrega tu clave de API de Gemini:

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

  9. Guarda los cambios en el archivo settings.json y cierra las pestañas de configuración.

Para probar los comandos de extensión, haz lo siguiente:

  1. En la ventana Extension Development Host de VS Code, escribe un comentario de código que describa el componente de la interfaz de usuario que deseas generar.
  2. Selecciona el texto del comentario con las características del componente.
  3. Abre la paleta de comandos seleccionando Ver > Paleta de comandos.
  4. En la paleta de comandos, escribe Flutter Theme y selecciona uno de los comandos con ese prefijo.

Modificar comando existente

Modificar los comandos proporcionados en Flutter Theme Agent es la forma más sencilla de cambiar el comportamiento y las capacidades de la extensión.

Tanto los comandos de comentario como los de revisión usan un enfoque de instrucciones de pocas tomas con ejemplos de código y comentarios para ese código, así como algunas instrucciones generales para el modelo de lenguaje de IA. Esta información contextual de las instrucciones guía al modelo de lenguaje de Gemini para generar una respuesta. Si cambias las instrucciones del mensaje, los ejemplos o ambos en los comandos de comentario o revisión, puedes cambiar el comportamiento de cada uno de los comandos existentes.

En este conjunto de instrucciones, se explica cómo modificar el comando buttonstyle.ts con el cambio del texto del mensaje del comando.

A fin de prepararte para editar el comando buttonstyle.ts, haz lo siguiente:

  1. Inicia la aplicación de VS Code.
  2. En VS Code, selecciona File > New Window para crear una ventana nueva.
  3. Abre el proyecto del agente de temas de Flutter. Para ello, selecciona File > Open Folder y elige la carpeta flutter_theme_agent/.

  4. Abre el archivo flutter_theme_agent/src/buttonstyle.ts.

    Para modificar el comportamiento del comando buttonstyle.ts, haz lo siguiente:

  5. En el archivo buttonstyle.ts, edita la constante BUTTONSTYLE_CONTEXT para incluir instrucciones 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. De manera opcional, en el archivo buttonstyle.ts, la constante BUTTONSTYLE_CONTEXT, agrega otro ejemplo de instrucción y resultado de diseño de botón, o reemplaza uno de los ejemplos 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. Guarda los cambios en el archivo buttonstyle.ts.

Para probar el comando modificado, sigue estos pasos:

  1. En la ventana del proyecto de extensión de VS Code, selecciona Run > Restart Debugging para reiniciar el depurador.

  2. En la ventana Extension Development Host de VS Code, selecciona un comentario de código en la ventana del editor que describa el estilo de botón que desees, por ejemplo:

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

  3. Abre la paleta de comandos seleccionando Ver > Paleta de comandos.

  4. En la paleta de comandos, escribe Flutter y selecciona el comando Flutter Theme Agent: Create a Flutter ButtonStyle.

Crear comando nuevo

Para extender el agente de tema de Flutter, crea comandos nuevos que realicen tareas completamente nuevas con la API de Gemini. La mayoría de los archivos de comando, como buttonstyle.ts y colorscheme.ts, son independientes y contienen código para recopilar texto del editor activo, redactar un mensaje, conectarse a la API de Gemini, enviar un mensaje y entregar la respuesta.

Captura de pantalla del Flutter Theme Agent con el nuevo comando visible

Figura 2: Se agregó el nuevo comando Flutter Theme Agent en la ventana del host de desarrollo de VS Code Extension.

En este conjunto de instrucciones, se explica cómo compilar un comando nuevo mediante el uso del código de un comando existente, colorscheme.ts, como plantilla. Esta actualización cambia el comando para que no incluya la sintaxis de cierre del objeto ColorScheme, de modo que no tengas que quitar esa sintaxis después de generarla y visualizar el resultado más rápido.

Si deseas crear un comando que genere solo una lista de colores para un objeto ColorScheme, sigue estos pasos:

  1. Haz una copia del archivo flutter_theme_agent/src/colorscheme.ts llamado colorscheme2.ts en el directorio src/.
  2. En VS Code, abre el archivo src/colorscheme2.ts.

  3. En el archivo colorscheme2.ts, cambia el nombre de la función generateColorScheme a generateColorScheme2:

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

  4. Cambia las instrucciones del mensaje en el archivo colorscheme2.ts. Para editar las instrucciones de generación de código COLORSCHEME_CONTEXT, quita el texto ColorScheme( del código de ejemplo en la línea 51 y establécelo en una línea vacía.

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

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

  5. Quita el carácter de paréntesis de cierre ")" del final de la lista de colores y conviértelo en una línea vacía.

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

This example code is a good ...

  6. Repite estos cambios para el segundo ejemplo. En la cadena COLORSCHEME_CONTEXT en la línea 87, quita el texto ColorScheme( y conviértelo en una línea vacía.

  7. En la línea 115, quita el carácter de paréntesis de cierre ")" del final de la lista de colores y establécelo en una línea vacía.

  8. En la string COLORSCHEME_CONTEXT, agrega una instrucción para no incluir la sintaxis de cierre:

    ...
- 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. Guarda los cambios en el archivo colorscheme2.ts.

Integra el comando nuevo

Después de completar el código del comando nuevo, debes integrarlo al resto de la extensión. Actualiza los archivos extension.ts y package.json para que el comando nuevo forme parte de la extensión y habilita VS Code para poder invocarlo.

Para integrar el nuevo comando con el código de la extensión, haz lo siguiente:

  1. En VS Code, abre el archivo flutter_theme_agent/src/extension.ts.

  2. Agrega una nueva sentencia de importación para importar el nuevo código de comando a la extensión.

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

  3. Registra el comando nuevo. Para ello, agrega el siguiente código a la función activate().

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

  4. Guarda los cambios en el archivo extension.ts.

Para integrar el comando name con el paquete de extensiones, haz lo siguiente:

  1. En VS Code, abre el archivo flutter_theme_agent/package.json.

  2. Agrega el comando nuevo a la sección commands del archivo del paquete.

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

  3. Guarda los cambios en el archivo package.json.

Prueba el comando nuevo

Una vez que completes la programación del comando y lo integres a la extensión, puedes probarlo. Tu nuevo comando solo está disponible en la ventana Extension Development Host de VS Code y no en la ventana de VS Code, en la que editaste el código de la extensión.

Para probar el comando modificado, sigue estos pasos:

  1. En la ventana del proyecto de extensión de VS Code, reinicia el depurador seleccionando Run > Restart Debugging, que reinicia otra ventana Extension Development Host.
  2. En la ventana Extension Development Host de VS Code, abre un proyecto de desarrollo de Flutter.
  3. En la misma ventana, abre una ventana del editor de código, escribe un comentario que describa el componente de la interfaz de usuario que desees y selecciona el texto de comentario.
  4. Abre la paleta de comandos seleccionando Ver > Paleta de comandos.
  5. En la paleta de comandos, escribe Flutter Theme y selecciona el comando Flutter Theme Agent: My New Code Generator.

Recursos adicionales

Para obtener más información sobre el proyecto del agente de temas de Flutter, consulta el repositorio de código. Si necesitas ayuda para compilar la aplicación o buscas colaboradores para desarrolladores, consulta el servidor de Google Developers Community Discord.

Aplicaciones de producción

Si planeas implementar Flutter Theme Agent para un público amplio, ten en cuenta que el uso de la API de Google Gemini puede estar sujeto a límites de frecuencia y a otras restricciones de uso. Si estás considerando compilar una aplicación de producción con el modelo Gemini, consulta los servicios de Vertex AI de Google Cloud para aumentar la escalabilidad y confiabilidad de tu app.