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.
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:
- Installa Visual Studio Code. per la tua piattaforma.
- Installa
node
enpm
seguendo le istruzioni di installazione istruzioni per la tua piattaforma. - 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:
Clona il repository git utilizzando il comando seguente.
git clone https://github.com/google/generative-ai-docs`
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
Vai alla directory principale del progetto dell'agente per i temi Flutter.
cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/
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:
- Avvia l'applicazione VS Code.
- In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
- Apri il progetto Agente tema Flutter selezionando File > Apri cartella,
e selezionando la cartella
flutter_theme_agent/
. - In VS Code, apri il file
flutter_theme_agent/package.json
. - 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.
- Apri le impostazioni di VS Code selezionando Codice > Impostazioni > Impostazioni.
- Ricevi un Chiave API Gemini di Google dal sito per sviluppatori di IA generativa e copia la stringa chiave.
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"
Salva le modifiche apportate al file
settings.json
e chiudi le schede delle impostazioni.
Per testare i comandi dell'estensione:
- Nella finestra Host di sviluppo estensione di VS Code, scrivi un codice che descrive il componente dell'interfaccia utente che vuoi generare.
- Seleziona il testo del commento con le caratteristiche del componente.
- Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza dei comandi.
- 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
:\
- Avvia l'applicazione VS Code.
- In VS Code, crea una nuova finestra selezionando File > Nuova finestra.
- Apri il progetto Agente tema Flutter selezionando File > Apri cartella,
e selezionando la cartella
flutter_theme_agent/
. Apri il file
flutter_theme_agent/src/buttonstyle.ts
.Per modificare il comportamento del comando
buttonstyle.ts
:\Nel file
buttonstyle.ts
, modifica la costanteBUTTONSTYLE_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. ...
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?>( ...
Salva le modifiche apportate al file
buttonstyle.ts
.
Per testare il comando modificato:
- Nella finestra del progetto dell'estensione VS Code, riavvia il debugger selezionando Esegui > Riavvia il debug.
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`
Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza dei comandi.
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.
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
:
- Crea una copia del file
flutter_theme_agent/src/colorscheme.ts
denominatacolorscheme2.ts
nella directorysrc/
. - In VS Code, apri il file
src/colorscheme2.ts
. Nel file
colorscheme2.ts
, rinomina la funzionegenerateColorScheme
ingenerateColorScheme2
:export async function generateColorScheme2(){ vscode.window.showInformationMessage('Generating Color Scheme...');
Modifica le istruzioni del prompt nel file
colorscheme2.ts
. Modifica ilCOLORSCHEME_CONTEXT
istruzioni per la generazione del codice rimuovendo il metodoColorScheme(
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), ...
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 ...
Ripeti queste modifiche per il secondo esempio. Nella
COLORSCHEME_CONTEXT
stringa alla riga 87, rimuovi il testoColorScheme(
e crea una riga vuota.Alla riga 115, rimuovi le parentesi di chiusura "
)
" dal alla fine dell'elenco di colori e rendila vuota.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: ...
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:
- In VS Code, apri il file
flutter_theme_agent/src/extension.ts
. Importa il nuovo codice comando nell'estensione aggiungendo una nuova importazione l'Informativa.
import { generateColorScheme2 } from './components/colorscheme2';
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); ... }
Salva le modifiche apportate al file
extension.ts
.
Per integrare il comando name con il pacchetto dell'estensione:
- In VS Code, apri il file
flutter_theme_agent/package.json
. 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." } ],
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:
- Nella finestra del progetto dell'estensione VS Code, riavvia il debugger selezionando Esegui > Riavvia debug, che riavvia un Finestra Host sviluppo estensione.
- Nella finestra dell'estensione di sviluppo dell'host di VS Code, apri un file Flutter di sviluppo software.
- 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.
- Apri la tavolozza dei comandi selezionando Visualizza > Tavolozza dei comandi.
- 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.