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 en el que desees iterar rápidamente. Crear interfaces de usuario puede ser divertido y gratificante, pero también es un trabajo duro. No se trata solo de escribir un código correcto, sino también de lograr el aspecto adecuado y hacer que tu equipo esté de acuerdo con una dirección de diseño.

En este instructivo, se muestra cómo extender el agente de temas de Flutter, una herramienta de asistencia de 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 para Visual Studio Code (VS Code) de Microsoft que genera componentes específicos de un tema de Flutter o un objeto ThemeData, incluidos esquemas de colores, estilos de texto y estilos de botones. Puedes modificar el proyecto para que estas funciones existentes funcionen mejor o compilar comandos nuevos para admitir mejor tu flujo de trabajo de desarrollo.

Para obtener una descripción general en video del proyecto y cómo ampliarlo, incluidas las estadísticas de las personas que 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 ejecutándose en VS Code

Figura 1: Agente de temas de Flutter que se ejecuta en la ventana del host de desarrollo de la extensión de VS Code.

Configura el proyecto

Estas instrucciones te guiarán para configurar el proyecto de Flutter Theme Agent para el desarrollo y las pruebas. Los pasos generales son instalar algunos softwares previos, configurar algunas variables de entorno, clonar el proyecto desde el repositorio de código y ejecutar la instalación de configuración.

Instala los requisitos previos

El proyecto Flutter Theme Agent se ejecuta como una extensión de Visual Studio Code (VS Code) de Microsoft y usa Node.js y npm para administrar 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 necesario, sigue estos pasos:

  1. Instala Visual Studio Code para tu plataforma.
  2. Instala node y npm siguiendo 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 código fuente git para recuperar el código fuente del proyecto.
Para descargar y configurar el código del proyecto, haz lo siguiente:

  1. Clona el repositorio de git con el siguiente comando.

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

  2. De manera opcional, configura tu repositorio de git local para usar el control de revisión disperso, de modo que solo tengas los archivos del 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 la instalación ejecutando Flutter Theme Agent como una extensión de desarrollo en VS Code en tu dispositivo. La prueba abre una ventana independiente del Extension Development Host de VS Code, en la que está disponible la extensión nueva. En esta nueva ventana, configuras la clave de API que usa la extensión para acceder a la API de Google Gemini.

Para configurar y probar tu configuración, sigue estos pasos:

  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 de Flutter Theme Agent seleccionando File > Open Folder y, luego, 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. Este paso abre una ventana independiente del host de desarrollo de extensiones de VS Code.
  6. Para abrir la configuración de VS Code, selecciona Code > Settings > Settings.
  7. Obtén una clave de API de Google Gemini en el 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 la configuración Google > Gemini: Api Key, haz clic en el vínculo Edit in 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 la 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. Para abrir la paleta de comandos, selecciona View > Command Palette.
  4. En la paleta de comandos, escribe Flutter Theme y selecciona uno de los comandos con ese prefijo.

Modifica un 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 de revisión usan un enfoque de indicaciones breves 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 la instrucción guía al modelo de lenguaje de Gemini para generar una respuesta. Si cambias las instrucciones de la instrucción, 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 cambiando el texto del mensaje del comando.

Para 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 de Flutter Theme Agent seleccionando File > Open Folder y, luego, 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 una instrucción y salida de estilo 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, haz lo siguiente:

  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 deseas, por ejemplo:

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

  3. Para abrir la paleta de comandos, selecciona View > Command Palette.

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

Crea un comando nuevo

Puedes extender el agente de temas de Flutter creando comandos nuevos que realicen tareas completamente nuevas con la API de Gemini. Cada archivo de comando, como buttonstyle.ts y colorscheme.ts, es en su mayoría independiente y, además, incluye código para recopilar texto del editor activo, redactar una instrucción, conectarse a la API de Gemini, enviar una instrucción y entregar la respuesta.

Captura de pantalla del agente de temas de Flutter con el nuevo comando visible

Figura 2: Nuevo comando Flutter Theme Agent en la ventana del host de desarrollo de la extensión de VS Code.

En este conjunto de instrucciones, se explica cómo compilar un comando nuevo con el 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 esta sintaxis después de la generación y visualizar el resultado más rápido.

Para crear un comando que genere solo una lista de colores para un objeto ColorScheme, haz lo siguiente:

  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 de la instrucción 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 haz que sea 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 haz que sea 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 de la línea 87, quita el texto ColorScheme( y haz que sea 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 haz que sea una línea vacía.

  8. En la cadena 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 nuevo comando, debes integrarlo con el resto de la extensión. Actualiza los archivos extension.ts y package.json para que el nuevo comando forme parte de la extensión y habilita VS Code para que pueda invocar el nuevo comando.

Para integrar el nuevo comando con el código de la extensión, sigue estos pasos:

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

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

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

  3. Para registrar el nuevo comando, 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 extensión, haz lo siguiente:

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

  2. Agrega el nuevo comando 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 hayas completado la codificación del comando y lo hayas integrado con 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, haz lo siguiente:

  1. En la ventana del proyecto de extensión de VS Code, reinicia el depurador seleccionando Run > Restart Debugging, que reinicia una ventana Extension Development Host independiente.
  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 deseas y selecciona ese texto de comentario.
  4. Para abrir la paleta de comandos, selecciona View > Command Palette.
  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 desarrolladores, consulta el servidor de Discord de la comunidad de Google Developers.

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 al límite 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 la confiabilidad de tu app.