Creare un generatore di codice Flutter basato sull'IA con Gemini

Crea uno strumento di assistente alla programmazione per generare interfacce utente Flutter o qualsiasi componente di codice su cui vuoi eseguire rapidamente l'iterazione. La creazione di interfacce utente divertente e gratificante, ma è anche un duro lavoro. Non è solo una questione di ottenere il codice corretto, l'aspetto e il design per il meglio e il team devono trovare un accordo su una direzione progettuale.

Questo tutorial mostra come estendere Agente tema Flutter, uno strumento di assistenza alla programmazione basato sull'IA creato dal team per le relazioni con gli sviluppatori di Flutter di Google. Questo progetto open source è un'estensione di Microsoft Visual Studio VS Code (VS Code) che genera codice componenti di un tema Flutter, o oggetto ThemeData, tra cui combinazioni di colori, stili di testo e stili di pulsanti. Puoi modificare il progetto in modo da renderli le funzioni esistenti funzionano meglio per te oppure crea nuovi comandi per supportare meglio nel tuo flusso di lavoro di sviluppo.

Per una panoramica video del progetto e di come estenderlo, inclusi approfondimenti da chi l'ha creato, dai un'occhiata Generatore di codice Flutter per l'IA - Crea con l'IA di Google. In alternativa, puoi iniziare a estendere il progetto seguendo le istruzioni di seguito.

Screenshot dell'agente tema Flutter in esecuzione in VS Code

Figura 1. Agente temi Flutter in esecuzione nell'host di sviluppo estensione codice VS finestra.

Configurazione del progetto

Queste istruzioni illustrano come impostare il progetto di Flutter Theme Agent per lo sviluppo e il test. I passaggi generali includono l'installazione prerequisito, impostare alcune variabili di ambiente, clonare il progetto dal repository di codice ed eseguire l'installazione della configurazione.

Installa i prerequisiti

Il progetto Agente temi Flutter viene eseguito come estensione di Microsoft Visual Studio Code (VS Code) e utilizza Node.js e npm per gestire i pacchetti ed eseguire un'applicazione. Le seguenti istruzioni di installazione sono per un host Linux in una macchina virtuale.

Per installare il software richiesto:

  1. Installa Visual Studio Code. per la tua piattaforma.
  2. Installa node e npm seguendo le istruzioni di installazione istruzioni per la tua piattaforma.
  3. Se non hai già installato Flutter per VS Code, segui le istruzioni di installazione.

clona e configura il progetto

Scarica il codice del progetto e usa il comando di installazione npm per eseguire l'operazione le dipendenze richieste e configurare il progetto. Ti servono Software di controllo del codice sorgente git per recuperare il progetto codice sorgente.
Per scaricare e configurare il codice del progetto:

  1. Clona il repository git utilizzando il comando seguente.

    git clone https://github.com/google/generative-ai-docs`
    
  2. Facoltativamente, configura il repository Git locale per utilizzare il pagamento sparso, in modo da avere solo i file del progetto Agente Documenti.

    cd generative-ai-docs/
    git sparse-checkout init --cone
    git sparse-checkout set examples/gemini/node/flutter_theme_agent
    
  3. Vai alla directory principale del progetto dell'agente per i temi Flutter.

    cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/
    
  4. Esegui il comando di installazione per scaricare le dipendenze e configurare il progetto:

    npm install
    

Configurare e testare l'estensione

Ora dovresti essere in grado di testare la tua installazione eseguendo Flutter Theme Agent come estensione di sviluppo in VS Code sul tuo dispositivo. Il test apre una finestra La finestra Host di sviluppo estensione del codice VS in cui viene visualizzata la nuova estensione disponibili. In questa nuova finestra, configurerai la chiave API utilizzata dall'estensione accedono all'API Gemini di Google.

Per configurare e testare la configurazione:

  1. Avvia l'applicazione VS Code.
  2. In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
  3. Apri il progetto Agente tema Flutter selezionando File > Apri cartella, e selezionando la cartella flutter_theme_agent/.
  4. In VS Code, apri il file flutter_theme_agent/package.json.
  5. Esegui l'estensione in modalità di debug selezionando Esegui > Avvia il debug. Questo passaggio apre una finestra separata per l'host di sviluppo dell'estensione del codice VS.
  6. Apri le impostazioni di VS Code selezionando Codice > Impostazioni > Impostazioni.
  7. Ricevi un Chiave API Gemini di Google dal sito per sviluppatori di IA generativa e copia la stringa chiave.
  8. Imposta la chiave API come impostazione di configurazione. In Impostazioni di ricerca digita flutter theme, seleziona la scheda Utente e, nel campo Google > Gemini: Chiave API, fai clic sul link Modifica in settings.json e aggiungi la tua chiave API Gemini:

    "google.ai.apiKey": "your-api-key-here"
    
  9. Salva le modifiche apportate al file settings.json e chiudi le schede delle impostazioni.

Per testare i comandi dell'estensione:

  1. Nella finestra Host di sviluppo estensione di VS Code, scrivi un codice che descrive il componente dell'interfaccia utente che vuoi generare.
  2. Seleziona il testo del commento con le caratteristiche del componente.
  3. Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza dei comandi.
  4. Nella tavolozza dei comandi, digita Flutter Theme e seleziona una delle con questo prefisso.

Modifica comando esistente

Modificare i comandi forniti in Flutter Theme Agent è il modo più semplice modificare il comportamento e le funzionalità dell'estensione.

Entrambi i comandi di commento e recensione utilizzano un approccio di pochi prompt. esempi di codice e commenti relativi a tale codice, nonché alcune informazioni generali istruzioni per il modello linguistico IA. Queste guide informative contestuali dei prompt il modello linguistico Gemini nella generazione di una risposta. Modificando il prompt. istruzioni, esempi o entrambi nei comandi di commento e recensione, modificare il comportamento di ciascuno dei comandi esistenti.

Questo insieme di istruzioni spiega come modificare il comando buttonstyle.ts tramite modificare il testo del comando.

Per prepararti a modificare il comando buttonstyle.ts:\

  1. Avvia l'applicazione VS Code.
  2. In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
  3. Apri il progetto Agente tema Flutter selezionando File > Apri cartella, e selezionando la cartella flutter_theme_agent/.
  4. Apri il file flutter_theme_agent/src/buttonstyle.ts.

    Per modificare il comportamento del comando buttonstyle.ts:\

  5. Nel file buttonstyle.ts, modifica la costante BUTTONSTYLE_CONTEXT per includere istruzioni diverse.

    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 vuoi, nel file buttonstyle.ts, BUTTONSTYLE_CONTEXT costante, aggiungi un altro esempio di istruzione e output in stile pulsante oppure sostituire uno degli esempi esistenti.

    ...
    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. Salva le modifiche apportate al file buttonstyle.ts.

Per testare il comando modificato:

  1. Nella finestra del progetto dell'estensione VS Code, riavvia il debugger selezionando Esegui > Riavvia il debug.
  2. Seleziona un codice nella finestra Estensione sviluppo host di VS Code. commento nella finestra dell'editor descrivendo lo stile del pulsante desiderato, esempio:

    // blue, lickable buttons that light up when you hover over them`
    
  3. Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza dei comandi.

  4. Nella tavolozza dei comandi, digita Flutter e seleziona Tema Flutter Agente: crea un comando Flutter ButtonStyle.

Crea nuovo comando

Puoi estendere l'agente tema Flutter creando nuovi comandi che eseguono completamente nuove con l'API Gemini. Ogni file di comando, ad esempio buttonstyle.ts e colorscheme.ts sono per la maggior parte indipendenti e includono codice per raccogliere testo dall'editor attivo, comporre un prompt, collegare all'API Gemini, inviando un prompt e trasmettendo la risposta.

Screenshot dell&#39;agente tema Flutter con il nuovo comando visibile

Figura 2. Nuovo comando Flutter Theme Agent nell'estensione di codice VS nella finestra Host di sviluppo.

Questa serie di istruzioni spiega come creare un nuovo comando utilizzando il codice un comando esistente, colorscheme.ts, come modello. Questo aggiornamento cambia per non includere la sintassi che include l'oggetto ColorScheme, in modo che non è necessario rimuovere questa sintassi dopo la generazione e visualizzare più velocemente.

Per creare un comando che genera solo un elenco di colori per un ColorScheme :

  1. Crea una copia del file flutter_theme_agent/src/colorscheme.ts denominata colorscheme2.ts nella directory src/.
  2. In VS Code, apri il file src/colorscheme2.ts.
  3. Nel file colorscheme2.ts, rinomina la funzione generateColorScheme in generateColorScheme2:

    export async function generateColorScheme2(){
      vscode.window.showInformationMessage('Generating Color Scheme...');
    
  4. Modifica le istruzioni del prompt nel file colorscheme2.ts. Modifica il COLORSCHEME_CONTEXT istruzioni per la generazione del codice rimuovendo il metodo ColorScheme( del codice di esempio alla riga 51 e renderlo una riga vuota.

    ...
    Here's the example of good Dart code:
    
      brightness: Brightness.light,
      primary: Color(0xffFF80AB),
    ...
    
  5. Rimuovi le parentesi di chiusura ")" dalla fine un elenco di colori e la rendi una linea vuota.

    ...
      inversePrimary: Color(0xffD15B9D),
      surfaceTint: Color(0xffFF80AB),
    
    This example code is a good ...
    
  6. Ripeti queste modifiche per il secondo esempio. Nella COLORSCHEME_CONTEXT stringa alla riga 87, rimuovi il testo ColorScheme( e crea una riga vuota.

  7. Alla riga 115, rimuovi le parentesi di chiusura ")" dal alla fine dell'elenco di colori e rendila vuota.

  8. Nella stringa COLORSCHEME_CONTEXT, aggiungi un'istruzione per non includere la sintassi di inclusione:

    ...
    - 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. Salva le modifiche apportate al file colorscheme2.ts.

Integra il nuovo comando

Dopo aver completato il codice per il nuovo comando, devi integrarlo con il resto dell'estensione. Aggiorna i file extension.ts e package.json in rendere la nuova parte del comando dell'estensione e abilitare VS Code per poter richiamare il nuovo comando.

Per integrare il nuovo comando con il codice dell'estensione:

  1. In VS Code, apri il file flutter_theme_agent/src/extension.ts.
  2. Importa il nuovo codice comando nell'estensione aggiungendo una nuova importazione l'Informativa.

    import { generateColorScheme2 } from './components/colorscheme2';
    
  3. Registra il nuovo comando aggiungendo il seguente codice alla sezione Funzione activate().

    export function activate(context: vscode.ExtensionContext) {
        ...
        vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
            generateColorScheme2);
        ...
    }
    
  4. Salva le modifiche apportate al file extension.ts.

Per integrare il comando name con il pacchetto dell'estensione:

  1. In VS Code, apri il file flutter_theme_agent/package.json.
  2. Aggiungi il nuovo comando alla sezione commands del file del pacchetto.

    "contributes": {
      "commands": [
        ...
        {
          "command": "flutter-theme-agent.generateColorScheme2",
          "title": "Flutter Theme Agent: My New Code Generator."
        }
      ],
    
  3. Salva le modifiche apportate al file package.json.

Prova il nuovo comando

Dopo aver completato la programmazione del comando e l'integrazione con estensione, puoi testarla. Il tuo nuovo comando è disponibile solo in VS Code Host di sviluppo estensione e non nella finestra VS codice in cui modificato il codice dell'estensione.

Per testare il comando modificato:

  1. Nella finestra del progetto dell'estensione VS Code, riavvia il debugger selezionando Esegui > Riavvia debug, che riavvia un Finestra Host sviluppo estensione.
  2. Nella finestra dell'estensione di sviluppo dell'host di VS Code, apri un file Flutter di sviluppo software.
  3. Nella stessa finestra, apri una finestra dell'editor di codice, digita un commento che il componente dell'interfaccia utente desiderato e seleziona il testo del commento.
  4. Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza dei comandi.
  5. Nella tavolozza dei comandi, digita Flutter Theme e seleziona il Comando Agente tema Flutter: Il mio nuovo generatore di codice.

Risorse aggiuntive

Per ulteriori informazioni sul progetto Flutter Theme Agent, consulta repository di codice. Se hai bisogno di aiuto per creare l'applicazione o sei alla ricerca di uno sviluppatore collaboratori, dai un'occhiata Server di Discord della community di Google Developers.

Applicazioni di produzione

Se prevedi di implementare l'agente per i temi Flutter per un vasto pubblico, tieni presente che dell'API Gemini di Google potrebbe essere soggetto a limitazioni di frequenza e ad altre limitazioni di utilizzo. Se stai pensando di creare un'applicazione di produzione con il modello Gemini, fare il check-out Vertex AI di Google Cloud per una maggiore scalabilità e affidabilità dell'app.