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

Compilarás una herramienta de asistente de programación para generar interfaces de usuario de Flutter o cualquier en el que quieras iterar rápidamente. Crear interfaces de usuario puede ser divertido y gratificante, pero también es un trabajo arduo. No se trata solo de conseguir el código correcto, también logra una apariencia y un estilo correctos, y logra que tu equipo para acordar una dirección de diseño.

En este instructivo, se muestra cómo extender Agente de temas de Flutter, una herramienta de asistencia para código potenciada por IA y desarrollada por el equipo de Relaciones con Desarrolladores de Flutter en Google. Este proyecto de código abierto es una extensión para Microsoft Visual Studio Code (VS Code) que genera código de componentes de un tema de Flutter o un objeto ThemeData, incluidos los esquemas de colores, estilos de texto y estilos de botones. Puedes modificar el proyecto para que estas funcionan mejor para ti, o crea nuevos comandos para brindar una mejor asistencia en el flujo de trabajo de desarrollo.

Para ver una descripción general en video del proyecto y cómo extenderlo, incluidas las estadísticas de la gente que lo creó, mira Generador de código de Flutter con IA: Compila con la IA de Google. De lo contrario, puedes seguir las instrucciones para extender el proyecto 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 el host de desarrollo de extensiones de VS Code en la ventana modal.

Configura el proyecto

Estas instrucciones te guiarán para obtener el proyecto de Flutter Theme Agent configurado para el desarrollo y las pruebas. Los pasos generales son instalar algunos el software de requisitos previos, la configuración de algunas variables de entorno, la clonación del proyecto del repositorio de código y ejecutar la instalación de la configuración.

Instala los requisitos previos

El proyecto Flutter Theme Agent se ejecuta como una extensión de Microsoft Visual Studio Code (VS Code) y Node.js y npm para administrar paquetes y ejecutar y mantener la integridad de su aplicación. Las siguientes instrucciones de instalación son para un host de Linux máquina.

Para instalar el software requerido, sigue estos pasos:

  1. Instala Visual Studio Code para tu plataforma.
  2. Instala node y npm siguiendo la instalación instrucciones 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 descargarlo las dependencias necesarias y configurar el proyecto. Necesitas Software de control de fuente git para recuperar el proyecto código fuente.
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. Opcionalmente, configura tu repositorio de Git local para usar el resultado escaso. Así, solo tendrá 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 de Flutter Theme Agent.

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

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

    npm install

Configura y prueba la extensión

Ahora deberías poder probar tu instalación ejecutando Flutter Theme Agent como una extensión de desarrollo en VS Code en tu dispositivo. La prueba abre una ventana Ventana Extension Development Host para VS Code en la que se encuentra la extensión nueva disponibles. En esta ventana nueva, configurarás la clave de API que usa la extensión para acceder a la API de Google Gemini.

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

  1. Inicia la aplicación de VS Code.
  2. En VS Code, selecciona File > para crear una ventana nueva Nueva ventana.
  3. Abre el proyecto Flutter Theme Agent seleccionando File > Abrir carpeta y seleccionando 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 > Inicia la depuración. En este paso, se abre una ventana separada del Host de desarrollo de extensión de VS Code.
  6. Abre la configuración de VS Code. Para ello, selecciona Code > Configuración > Configuración.
  7. Obtén un Clave de API de Google Gemini desde el sitio de Generative AI Developer y copia la cadena de la clave.

  8. Establece la clave de API como un parámetro de configuración. En Configuración de búsqueda escribe flutter theme, selecciona la pestaña Usuario y en la pestaña Google > el parámetro de configuración de la clave de API de Gemini, 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 la extensión, haz lo siguiente:

  1. En la ventana Extension Development Host de VS Code, escribe un código. comentario 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 una de las siguientes opciones: 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 comentarios como revisión usan un enfoque de instrucción de algunas tomas con ejemplos de código y comentarios para ese código, así como algunas instrucciones para el modelo de lenguaje de IA. En esta instrucción, se guía la información de contexto el modelo de lenguaje de Gemini para generar una respuesta. Si cambias el mensaje instrucciones, ejemplos o ambos en los comandos de comentario o revisión, puede cambiar el comportamiento de cada uno de los comandos existentes.

En este conjunto de instrucciones, se explica cómo modificar el comando buttonstyle.ts cambiar el texto del símbolo del sistema.

Prepárate para editar el comando buttonstyle.ts:

  1. Inicia la aplicación de VS Code.
  2. En VS Code, selecciona File > para crear una ventana nueva Nueva ventana.
  3. Abre el proyecto Flutter Theme Agent seleccionando File > Abrir carpeta y seleccionando 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 diferentes instrucciones.

    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, BUTTONSTYLE_CONTEXT constante, agrega otro ejemplo de una instrucción y resultado de estilo de botón, o reemplazar 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 la extensión de VS Code, reinicia el depurador. Para ello, haz lo siguiente: selecciona Ejecutar > Reinicia la depuración

  2. En la ventana Extension Development Host de VS Code, selecciona un código. comentario 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 Tema Flutter Agente: Crea un comando de Flutter ButtonStyle.

Crear 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, en su mayoría, son independientes. código para recopilar texto del editor activo, redactar un mensaje, conectar 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 de agente de tema de Flutter en la extensión de VS Code Ventana de Host de desarrollo.

Este conjunto de instrucciones explica cómo crear un nuevo comando usando el código de un comando existente, colorscheme.ts, como plantilla. Esta actualización cambia la comando para no incluir la sintaxis adjunta del objeto ColorScheme, de modo que no tienes que quitar esta sintaxis después de generarla y visualizar el resultado más rápido.

Para crear un comando que genere solo una lista de colores para una ColorScheme objeto:

  1. Haz una copia del archivo flutter_theme_agent/src/colorscheme.ts llamada 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. Edita el Instrucciones de generación de código de COLORSCHEME_CONTEXT quitando ColorScheme( del código de ejemplo en la línea 51 y convertirlo 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 ")". desde el final del una lista de colores y convertirla 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 convertirla en una línea vacía.

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

  8. En la cadena COLORSCHEME_CONTEXT, agrega una instrucción para no incluir la sintaxis contenedora:

    ...
- 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 a haz que el nuevo comando forme parte de la extensión y habilita VS Code podrá invocarlo el nuevo comando.

Para integrar el comando nuevo en 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 importación nueva para importar el código de comando nuevo a la extensión. declaración.

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

  3. Registra el comando nuevo agregando el siguiente código al 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 de nombre al paquete de la extensión, 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 hayas completado la programación del comando y su integración con el puedes probarla. Tu nuevo comando solo está disponible en VS Code Host de desarrollo de extensión y no en la ventana de VS Code en la que editó el código de la extensión.

Para probar el comando modificado, sigue estos pasos:

  1. En la ventana del proyecto de la extensión de VS Code, reinicia el depurador. Para ello, haz lo siguiente: selecciona Ejecutar > Restart Debugging, que reinicia una instancia Ventana Extension Development Host.
  2. En la ventana Extension Development Host de VS Code, abre un archivo de Flutter. de desarrollo de software.
  3. En la misma ventana, abre una ventana del editor de código, escribe un comentario que describa el componente de interfaz de usuario que deseas y selecciona ese texto del comentario.
  4. Abre la paleta de comandos seleccionando Ver > Paleta de comandos.
  5. En la paleta de comandos, escribe Flutter Theme y selecciona Comando Agente de temas de Flutter: Mi nuevo generador de código.

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 un desarrollador colaboradores, consulta la servidor de Discord de la Comunidad de Google Developers.

Aplicaciones de producción

Si planeas implementar Flutter Theme Agent para un público numeroso, ten en cuenta que tu uso de la API de Gemini de Google 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 de Gemini, finalizar la compra Vertex AI de Google Cloud y servicios para aumentar la escalabilidad y confiabilidad de tu app.